lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.74k stars 497 forks source link

Feat/toggle picker android #462

Open raketeFlo opened 2 years ago

raketeFlo commented 2 years ago

This allows to programmatically open the picker on android devices.

See open Issue.

PavelTishenko commented 2 years ago

Any updates ? ) We need it !

indapublic commented 2 years ago

Needed feature here, but @JoFlo07 you have broken tests in your PR

raketeFlo commented 2 years ago

I had a look into it and it seems like the failure of the test is related to the jest.config of these tests not to the changes I made. Can you guys have a look at your test suite?

andrejpavlovic commented 15 hours ago

Patch based on this PR here:

diff --git a/node_modules/react-native-picker-select/src/index.js b/node_modules/react-native-picker-select/src/index.js
index 7ae6730..da08215 100644
--- a/node_modules/react-native-picker-select/src/index.js
+++ b/node_modules/react-native-picker-select/src/index.js
@@ -253,6 +253,14 @@ export default class RNPickerSelect extends PureComponent {
       Keyboard.dismiss();
     }

+    if (this.pickerRef && Platform.OS === 'android') {
+      if (!showPicker) {
+        this.pickerRef.focus();
+      } else {
+        this.pickerRef.blur();
+      }
+    }
+
     const animationType =
       modalProps && modalProps.animationType ? modalProps.animationType : 'slide';

@@ -511,6 +519,7 @@ export default class RNPickerSelect extends PureComponent {
         <View style={style.headlessAndroidContainer}>
           {this.renderTextInputOrChildren()}
           <Picker
+            ref={(ref) => {this.pickerRef = ref}}
             style={[
               Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
               defaultStyles.headlessAndroidPicker,
@@ -536,6 +545,7 @@ export default class RNPickerSelect extends PureComponent {
     return (
       <View style={[defaultStyles.viewContainer, style.viewContainer]}>
         <Picker
+          ref={(ref) => {this.pickerRef = ref}}
           style={[
             Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
             style.inputAndroid,