react-native-wheel-pick 1.2.1 → 1.2.3

package/README.md

@@ -24,6 +24,8 @@ npm install @react-native-picker/picker --save-dev --legacy-peer-deps
 npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps
 npx pod-install
 
+npx react-native start --reset-cache // clear cache
+
 npx react-native run-ios // re-build native-code
 npx react-native run-android // re-build native-code for gradle
 ```
@@ -60,6 +62,9 @@ onDateChange={(date: Date) => { console.log(date) }}
 ## More Example 
 
 ```jsx
+// Set Text Color
+<Picker textColor="red" />
+
 // DatePicker set default select date
 <DatePicker
   style={{ height: 215, width: 300 }}
@@ -77,20 +82,19 @@ onDateChange={(date: Date) => { console.log(date) }}
 
 ```
 ```jsx
-// pickerData also support array of object. (Optional)
+// pickerData also support array of object. (Optional Way)
 
-// Way 1
+// Normal Way
 <Picker
   selectedValue='item4'
   pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
   onValueChange={value => { console.log(value) }}
 />
 
-// Optional Way 2
+// Optional Way
 // `label` only use for show Text to UI.
 // You cannot get `label` from onValueChange
 <Picker
-  style={{ backgroundColor: 'white', width: 300, height: 215 }}
   selectedValue='5765387680'
   pickerData={[
     { value : '5765387677', label : 'item1' },
@@ -109,7 +113,6 @@ onDateChange={(date: Date) => { console.log(date) }}
 // These is special props for Android. (iOS not work)
 // You can also use these props for DatePicker, too.
 <Picker
-  textColor='red'
   textSize={20}
 
   selectTextColor='green'
@@ -139,6 +142,18 @@ You can sponsor me
 OR you can fork this project instead.
 
 ## Release Note
+### 1.2.3 (Feb 15 2024)
+- Fix state is not updating after onValueChange in Picker Component. Thanks to [@spasma
+](https://github.com/TronNatthakorn/react-native-wheel-pick/issues/52)
+- Test on React Native Version 0.77
+
+[Android]
+- Support [UIManager New Architecture of React Native](https://github.com/reactwg/react-native-new-architecture/discussions/201)
+- Use Handler for fix 23 index problem. Thanks to [@mykhailoperemitko](https://github.com/TronNatthakorn/react-native-wheel-pick/issues/44) [@A-ANing](https://github.com/A-ANing)
+
+### 1.2.2 (June 7 2023)
+[iOS]
+- Now iOS can use `textColor`, too. [Add missing color option for iOS](https://github.com/TronNatthakorn/react-native-wheel-pick/pull/38) [@aurotones](https://github.com/aurotones)
 
 ### 1.2.1 (June 4 2023)
 - Fix typescript warning

package/android/build.gradle

@@ -6,9 +6,25 @@ buildscript {
 
 apply plugin: 'com.android.library'
 
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+    apply plugin: 'com.facebook.react'
+}
+
 android {
     compileSdkVersion 33
     namespace 'com.tron'
+
+    defaultConfig {
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
+    }
+
+    buildFeatures {
+        buildConfig true
+    }
 }
 
 dependencies {

package/android/src/main/java/com/tron/ReactWheelCurvedPicker.java

@@ -20,6 +20,11 @@ import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 
+import com.facebook.react.uimanager.UIManagerHelper;
+
+// UIManagerType;
+import com.facebook.react.uimanager.common.UIManagerType;
+
 import java.util.Date;
 import java.util.List;
 
@@ -35,7 +40,13 @@ public class ReactWheelCurvedPicker extends WheelPicker {
 
     public ReactWheelCurvedPicker(ReactContext reactContext) {
         super(reactContext);
-        mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+
+        if(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {	
+            mEventDispatcher = (UIManagerHelper.getUIManager(reactContext, 1 /** UIManagerType */)).getEventDispatcher();
+        } else {
+            mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        }
+        
         setOnWheelChangeListener(new OnWheelChangeListener() {
             @Override
             public void onWheelScrolled(int offset) {

package/android/src/main/java/com/tron/ReactWheelCurvedPickerManager.java

@@ -1,6 +1,7 @@
 package com.tron;
 
 import android.graphics.Color;
+import android.os.Handler;
 
 import com.aigestudio.wheelpicker.WheelPicker;
 import com.facebook.react.bridge.ReadableArray;
@@ -84,8 +85,18 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
         //if (picker != null && picker.getState() == WheelPicker.SCROLL_STATE_IDLE) {
         // Log.d("Index from React", index + "");
         if (picker != null) {
-            picker.setSelectedItemPosition(index);
-            picker.invalidate();
+            // picker.setSelectedItemPosition(index);
+            // picker.invalidate();
+
+            final Handler handler = new Handler();
+
+            handler.post(new Runnable() {
+                @Override
+                public void run() {
+                    picker.setSelectedItemPosition(index);
+                    picker.invalidate();
+                }
+            });
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wheel-pick",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "React native wheel picker iOS style with android.",
   "main": "src/index.js",
   "scripts": {

package/src/picker.js

@@ -45,6 +45,12 @@ export default class Picker extends Component {
     this.props.onValueChange(selectedValue);
   };
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.selectedValue !== this.props.selectedValue) {
+      this.setState({ selectedValue: this.props.selectedValue });
+    }
+  }
+
   validateDeprecateProps = (oldProp = 'curtain', newProp = '') => {
     if(this.props){
       if(typeof this.props[oldProp] !== 'undefined'){
@@ -88,6 +94,7 @@ export default class Picker extends Component {
             key={index}
             value={typeof data.value !== 'undefined' ? data.value : data.toString()}
             label={typeof data.label !== 'undefined' ? data.label : data.toString()}
+            color={props.textColor}
           />
         ))}
       </WheelCurvedPicker>