Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-picker-select
Advanced tools
react-native-picker-select - npm Package Compare versions
Comparing version 6.2.0 to 6.3.0
@@ -0,1 +1,11 @@ | ||
| ### 6.3.0 | ||
| ##### New | ||
| - Added a prop called `InputAccessoryView` to allow a custom component to replace the InputAccessoryView on iOS. View the [snack](https://snack.expo.io/@lfkwtz/react-native-picker-select) to see examples on how this can be customized. As a result of this change, the `hideDoneBar` prop has been deprecated. | ||
| - iOS modal window now correctly resizes on orientation change | ||
| - `defaultStyles` are now exported | ||
| --- | ||
| ### 6.2.0 | ||
@@ -2,0 +12,0 @@ |
| { | ||
| "name": "react-native-picker-select", | ||
| "version": "6.2.0", | ||
| "version": "6.3.0", | ||
| "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -35,21 +35,21 @@ # react-native-picker-select | ||
| | Name | Description | Details | | ||
| | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | | ||
| | `onValueChange` | Callback which returns `value, index` | **required**<br>function | | ||
| | `items` | The items for the component to render<br> - Each item should be in the following format:<br>`{label: 'Orange', value: 'orange', key: 'orange', color: 'orange'}`<br>- The label and the value are required<br>- The key and color are optional<br>- The key will be set to the label if not included<br>- The value can be any data type<br>- Must have at least one item | **required**<br>array | | ||
| | `placeholder` | - An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>- An empty object can be used if you'd like to disable the placeholder entirely | object | | ||
| | `disabled` | Disables interaction with the component | boolean | | ||
| | `value` | Will attempt to locate a matching item from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. | any | | ||
| | `itemKey` | Will attempt to locate a matching item from the `items` array by checking each item's `key` property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by `value` as above. | string, number | | ||
| | `style` | Style overrides for most parts of the component.<br>_More details in [styling](#styling)_ | object | | ||
| | `pickerProps` | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | object | | ||
| | `Icon` | Custom icon component to be rendered.<br>_More details in [styling](#styling)_ | Component | | ||
| | `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 | | ||
| | `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 | | ||
| | `hideDoneBar`<br>_iOS only_ | Hides the bar with tabbing arrows and Done link to exit the modal. While this 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. | boolean | | ||
| | `doneText`<br>_iOS only_ | "Done" default text on the modal. Can be overwritten here | string | | ||
| | `onUpArrow / onDownArrow`<br>_iOS only_ | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided | function | | ||
| | `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 | | ||
| | `modalProps`<br>_iOS only_ | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | object | | ||
| | Name | Description | Details | | ||
| | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | | ||
| | `onValueChange` | Callback which returns `value, index` | **required**<br>function | | ||
| | `items` | The items for the component to render<br> - Each item should be in the following format:<br>`{label: 'Orange', value: 'orange', key: 'orange', color: 'orange'}`<br>- The label and the value are required<br>- The key and color are optional<br>- The key will be set to the label if not included<br>- The value can be any data type | **required**<br>array | | ||
| | `placeholder` | - An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>- An empty object can be used if you'd like to disable the placeholder entirely | object | | ||
| | `disabled` | Disables interaction with the component | boolean | | ||
| | `value` | Will attempt to locate a matching item from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item. | any | | ||
| | `itemKey` | Will attempt to locate a matching item from the `items` array by checking each item's `key` property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by `value` as above. | string, number | | ||
| | `style` | Style overrides for most parts of the component.<br>_More details in [styling](#styling)_ | object | | ||
| | `pickerProps` | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | object | | ||
| | `Icon` | Custom icon component to be rendered.<br>_More details in [styling](#styling)_ | Component | | ||
| | `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 | | ||
| | `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 | | ||
| | `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 | | ||
| | `doneText`<br>_iOS only_ | "Done" default text on the modal. Can be overwritten here | string | | ||
| | `onUpArrow / onDownArrow`<br>_iOS only_ | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided | function | | ||
| | `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 | | ||
| | `modalProps`<br>_iOS only_ | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | object | | ||
@@ -80,3 +80,3 @@ ### Styling | ||
| This component has been tested on React Native v0.51 - v0.58 | ||
| This component has been tested on React Native v0.51 - v0.59 | ||
@@ -83,0 +83,0 @@ [](https://www.browserstack.com/) |
@@ -44,3 +44,3 @@ import React, { PureComponent } from 'react'; | ||
| // Custom Modal props (iOS only) | ||
| hideDoneBar: PropTypes.bool, | ||
| hideDoneBar: PropTypes.bool, // deprecated | ||
| doneText: PropTypes.string, | ||
@@ -64,2 +64,3 @@ onDonePress: PropTypes.func, | ||
| Icon: PropTypes.func, | ||
| InputAccessoryView: PropTypes.func, | ||
| }; | ||
@@ -80,3 +81,3 @@ | ||
| useNativeAndroidPickerStyle: true, | ||
| hideDoneBar: false, | ||
| hideDoneBar: false, // deprecated | ||
| doneText: 'Done', | ||
@@ -92,2 +93,3 @@ onDonePress: null, | ||
| Icon: null, | ||
| InputAccessoryView: null, | ||
| }; | ||
@@ -166,2 +168,3 @@ | ||
| animationType: undefined, | ||
| orientation: 'portrait', | ||
| }; | ||
@@ -172,5 +175,7 @@ | ||
| this.onValueChange = this.onValueChange.bind(this); | ||
| this.onOrientationChange = this.onOrientationChange.bind(this); | ||
| this.setInputRef = this.setInputRef.bind(this); | ||
| this.togglePicker = this.togglePicker.bind(this); | ||
| this.triggerDoneCallback = this.triggerDoneCallback.bind(this); | ||
| this.renderInputAccessoryView = this.renderInputAccessoryView.bind(this); | ||
| } | ||
@@ -202,2 +207,8 @@ | ||
| onOrientationChange({ nativeEvent }) { | ||
| this.setState({ | ||
| orientation: nativeEvent.orientation, | ||
| }); | ||
| } | ||
| setInputRef(ref) { | ||
@@ -283,5 +294,13 @@ this.inputRef = ref; | ||
| renderDoneBar() { | ||
| const { doneText, hideDoneBar, onUpArrow, onDownArrow, style } = this.props; | ||
| renderInputAccessoryView() { | ||
| const { | ||
| InputAccessoryView, | ||
| doneText, | ||
| hideDoneBar, | ||
| onUpArrow, | ||
| onDownArrow, | ||
| style, | ||
| } = this.props; | ||
| // deprecated | ||
| if (hideDoneBar) { | ||
@@ -291,4 +310,11 @@ return null; | ||
| if (InputAccessoryView) { | ||
| return <InputAccessoryView testID="custom_input_accessory_view" />; | ||
| } | ||
| return ( | ||
| <View style={[defaultStyles.modalViewMiddle, style.modalViewMiddle]} testID="done_bar"> | ||
| <View | ||
| style={[defaultStyles.modalViewMiddle, style.modalViewMiddle]} | ||
| testID="input_accessory_view" | ||
| > | ||
| <View style={[defaultStyles.chevronContainer, style.chevronContainer]}> | ||
@@ -408,3 +434,3 @@ <TouchableOpacity | ||
| onDismiss={this.triggerDoneCallback} | ||
| // onOrientationChange={TODO: use this to resize window} | ||
| onOrientationChange={this.onOrientationChange} | ||
| {...modalProps} | ||
@@ -419,4 +445,10 @@ > | ||
| /> | ||
| {this.renderDoneBar()} | ||
| <View style={[defaultStyles.modalViewBottom, style.modalViewBottom]}> | ||
| {this.renderInputAccessoryView()} | ||
| <View | ||
| style={[ | ||
| defaultStyles.modalViewBottom, | ||
| { height: this.state.orientation === 'portrait' ? 215 : 162 }, | ||
| style.modalViewBottom, | ||
| ]} | ||
| > | ||
| <Picker | ||
@@ -499,3 +531,3 @@ testID="ios_picker" | ||
| const defaultStyles = StyleSheet.create({ | ||
| export const defaultStyles = StyleSheet.create({ | ||
| viewContainer: { | ||
@@ -551,3 +583,2 @@ alignSelf: 'stretch', | ||
| modalViewBottom: { | ||
| height: 215, | ||
| justifyContent: 'center', | ||
@@ -554,0 +585,0 @@ backgroundColor: '#D0D4DB', |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.3%
40549
- Lines of code
- increased by5.5%
556
No dependency changes