react-native-picker-select - npm Package Compare versions

Comparing version 6.3.4 to 6.4.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+### 6.4.0
+
+##### New
+
+-   Opened up `onOpen` prop to now support Android when in headless or `useNativeAndroidPickerStyle={false}` mode
+
+---
+
 ### 6.3.4
@@ -2,0 +10,0 @@

package.json

 {
     "name": "react-native-picker-select",
-    "version": "6.3.4",
+    "version": "6.4.0",
     "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -66,2 +66,3 @@ # react-native-picker-select
 | `textInputProps`                                | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully). This is iOS only unless `useNativeAndroidPickerStyle={false}`.                                                                                                                                                                                                                                                                                                                             | object                   |
+| `onOpen`<br>                                    | Callback triggered right before the opening of the picker<br>_Not supported when `useNativeAndroidPickerStyle={true}`_                                                                                                                                                                                                                                                                                                                                                                                    | function                 |
 | `useNativeAndroidPickerStyle`<br>_Android only_ | The component defaults to using the native Android Picker in its un-selected state. Setting this flag to `false` will mimic the default iOS presentation where a tappable TextInput is displayed.<br>_More details in [styling](#styling)_                                                                                                                                                                                                                                                              | boolean                  |
@@ -72,3 +73,3 @@ | `InputAccessoryView`<br>_iOS only_              | Replace the InputAcessoryView section (bar with tabbing arrown and Done button) of the opened picker with your own custom component. Can also return `null` here to hide completely. While this bar is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. View the [snack](https://snack.expo.io/@lfkwtz/react-native-picker-select) to see examples on how this can be customized. | boolean                  |
 | `onDonePress`<br>_iOS only_                     | Callback when the 'Done' button is pressed                                                                                                                                                                                                                                                                                                                                                                                                                                                              | function                 |
-| `onOpen / onClose`<br>_iOS only_                | Callback triggered right before the opening or closing of the picker                                                                                                                                                                                                                                                                                                                                                                                                                                    | function                 |
+| `onClose`<br>_iOS only_                         | Callback triggered right before the closing of the picker                                                                                                                                                                                                                                                                                                                                                                                                                                               | function                 |
 | `modalProps`<br>_iOS only_                      | Additional props to pass to the Modal (some props are used in core functionality so use this carefully)                                                                                                                                                                                                                                                                                                                                                                                                 | object                   |
@@ -100,3 +101,3 @@
 
-This component has been tested on React Native v0.51 - v0.59
+This component has been tested on React Native v0.51 - v0.61
 
@@ -103,0 +104,0 @@ [![BrowserStack](https://i.imgur.com/cOdhMed.png)](https://www.browserstack.com/)

src/index.js

@@ -41,2 +41,3 @@ import React, { PureComponent } from 'react';
         placeholderTextColor: ColorPropType, // deprecated
+        onOpen: PropTypes.func,
         useNativeAndroidPickerStyle: PropTypes.bool,
@@ -50,3 +51,2 @@
         onDownArrow: PropTypes.func,
-        onOpen: PropTypes.func,
         onClose: PropTypes.func,
@@ -462,23 +462,25 @@
     renderAndroidHeadless() {
-        const { disabled, Icon, style, pickerProps } = this.props;
+        const { disabled, Icon, style, pickerProps, onOpen } = this.props;
         const { selectedItem } = this.state;
 
         return (
-            <View style={style.headlessAndroidContainer}>
-                {this.renderTextInputOrChildren()}
-                <Picker
-                    style={[
-                        Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
-                        defaultStyles.headlessAndroidPicker,
-                        style.headlessAndroidPicker,
-                    ]}
-                    testID="android_picker_headless"
-                    enabled={!disabled}
-                    onValueChange={this.onValueChange}
-                    selectedValue={selectedItem.value}
-                    {...pickerProps}
-                >
-                    {this.renderPickerItems()}
-                </Picker>
-            </View>
+            <TouchableWithoutFeedback onPress={onOpen} testID="android_touchable_wrapper">
+                <View style={style.headlessAndroidContainer}>
+                    {this.renderTextInputOrChildren()}
+                    <Picker
+                        style={[
+                            Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
+                            defaultStyles.headlessAndroidPicker,
+                            style.headlessAndroidPicker,
+                        ]}
+                        testID="android_picker_headless"
+                        enabled={!disabled}
+                        onValueChange={this.onValueChange}
+                        selectedValue={selectedItem.value}
+                        {...pickerProps}
+                    >
+                        {this.renderPickerItems()}
+                    </Picker>
+                </View>
+            </TouchableWithoutFeedback>
         );
@@ -485,0 +487,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

42529

increased by2.2%

Lines of code

565

increased by0.36%

Number of lines in readme file

106

increased by0.95%

No dependency changes