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 5.0.1 to 5.1.0
@@ -0,1 +1,11 @@ | ||
| ### v5.1.0 | ||
| ##### New | ||
| - Added `useNativeAndroidPickerStyle` prop. See README for more details. | ||
| ##### Bugfix | ||
| - Fixed Android headless mode showing selected value outside of View (#83) | ||
| ### v5.0.1 | ||
@@ -2,0 +12,0 @@ |
@@ -21,2 +21,3 @@ /// <reference types="react" /> | ||
| placeholderTextColor?: string; | ||
| useNativeAndroidPickerStyle?: boolean; | ||
| hideDoneBar?: boolean; | ||
@@ -23,0 +24,0 @@ doneText?: string; |
| { | ||
| "name": "react-native-picker-select", | ||
| "version": "5.0.1", | ||
| "version": "5.1.0", | ||
| "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -37,19 +37,20 @@ # react-native-picker-select | ||
| | Name | Type | Description | Required? | iOS / Android | | ||
| | ----------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | | ||
| | onValueChange | function | Callback which returns `value, index` | Y | Both | | ||
| | items | array | 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 | Y | Both | | ||
| | placeholder | object | - 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 | N | Both | | ||
| | disabled | boolean | Disables interaction with the component | N | Both | | ||
| | value | any | 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. | N | Both | | ||
| | itemKey | string, number | 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. | N | Both | | ||
| | style | object | Style overrides for most parts of the component. More details below. | N | Both | | ||
| | hideIcon | boolean | Hides the floating downward arrow on the right side of the input box | N | Both | | ||
| | pickerProps | object | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | N | Both | | ||
| | placeholderTextColor | color | Overrides the default placeholder color shown | N | iOS | | ||
| | hideDoneBar | boolean | 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. | N | iOS | | ||
| | onUpArrow / onDownArrow | function | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided | N | iOS | | ||
| | onDonePress | function | Callback when the 'Done' button is pressed | N | iOS | | ||
| | modalProps | object | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | N | iOS | | ||
| | textInputProps | object | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully) | N | iOS | | ||
| | Name | Type | Description | Required? | iOS / Android | | ||
| | --------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | | ||
| | onValueChange | function | Callback which returns `value, index` | Y | Both | | ||
| | items | array | 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 | Y | Both | | ||
| | placeholder | object | - 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 | N | Both | | ||
| | disabled | boolean | Disables interaction with the component | N | Both | | ||
| | value | any | 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. | N | Both | | ||
| | itemKey | string, number | 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. | N | Both | | ||
| | style | object | Style overrides for most parts of the component. More details below. | N | Both | | ||
| | hideIcon | boolean | Hides the floating downward arrow on the right side of the input box | N | Both | | ||
| | pickerProps | object | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | N | Both | | ||
| | placeholderTextColor | color | Overrides the default placeholder color shown | N | iOS | | ||
| | useNativeAndroidPickerStyle | boolean | DEFAULTS TO TRUE. The component defaults to using the native React Native Picker in it's un-selected state. Setting this flag to false will mimic the default iOS presentation where a tappable TextInput is displayed. See more in the styling section. | N | Android | | ||
| | hideDoneBar | boolean | 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. | N | iOS | | ||
| | onUpArrow / onDownArrow | function | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided | N | iOS | | ||
| | onDonePress | function | Callback when the 'Done' button is pressed | N | iOS | | ||
| | modalProps | object | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | N | iOS | | ||
| | textInputProps | object | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully) | N | iOS | | ||
@@ -68,2 +69,3 @@ ### Styling | ||
| - Other styles that can be modified for Android are named `headlessAndroidContainer` and `viewContainer` | ||
| - If you set the prop `useNativeAndroidPickerStyle` to false, the component will allow two other style objects: `inputAndroidContainer` and `inputAndroid` | ||
@@ -70,0 +72,0 @@ ## Testing |
@@ -41,2 +41,3 @@ import React, { PureComponent } from 'react'; | ||
| placeholderTextColor: ColorPropType, | ||
| useNativeAndroidPickerStyle: PropTypes.bool, | ||
@@ -73,2 +74,3 @@ // Custom Modal props (iOS only) | ||
| placeholderTextColor: '#C7C7CD', | ||
| useNativeAndroidPickerStyle: true, | ||
| hideDoneBar: false, | ||
@@ -289,5 +291,3 @@ doneText: 'Done', | ||
| > | ||
| <View | ||
| testID="needed_for_touchable" | ||
| > | ||
| <View testID="needed_for_touchable"> | ||
| <Text style={[defaultStyles.done, style.done]}>{doneText}</Text> | ||
@@ -312,6 +312,8 @@ </View> | ||
| const { children, hideIcon, style, textInputProps } = this.props; | ||
| const containerStyle = | ||
| Platform.OS === 'ios' ? style.inputIOSContainer : style.inputAndroidContainer; | ||
| if (children) { | ||
| return ( | ||
| <View pointerEvents="box-only" style={style.inputIOSContainer}> | ||
| <View pointerEvents="box-only" style={containerStyle}> | ||
| {children} | ||
@@ -322,7 +324,7 @@ </View> | ||
| return ( | ||
| <View pointerEvents="box-only" style={style.inputIOSContainer}> | ||
| <View pointerEvents="box-only" style={containerStyle}> | ||
| <TextInput | ||
| style={[ | ||
| !hideIcon ? { paddingRight: 30 } : {}, | ||
| style.inputIOS, | ||
| Platform.OS === 'ios' ? style.inputIOS : style.inputAndroid, | ||
| this.getPlaceholderStyle(), | ||
@@ -384,9 +386,9 @@ ]} | ||
| renderAndroidHeadless() { | ||
| const { children, disabled, style, pickerProps } = this.props; | ||
| const { disabled, style, pickerProps } = this.props; | ||
| return ( | ||
| <View style={[{ borderWidth: 0 }, style.headlessAndroidContainer]}> | ||
| {children} | ||
| {this.renderTextInputOrChildren()} | ||
| <Picker | ||
| style={defaultStyles.headlessAndroidPicker} | ||
| testID="RNPickerSelectAndroid" | ||
| testID="RNPickerSelectAndroidHeadless" | ||
| enabled={!disabled} | ||
@@ -404,3 +406,11 @@ onValueChange={this.onValueChange} | ||
| renderAndroid() { | ||
| const { children, disabled, hideIcon, style, pickerProps } = this.props; | ||
| const { | ||
| children, | ||
| disabled, | ||
| hideIcon, | ||
| style, | ||
| pickerProps, | ||
| useNativeAndroidPickerStyle, | ||
| } = this.props; | ||
| if (children) { | ||
@@ -410,19 +420,27 @@ return this.renderAndroidHeadless(); | ||
| if (useNativeAndroidPickerStyle) { | ||
| return ( | ||
| <View style={[defaultStyles.viewContainer, style.viewContainer]}> | ||
| <Picker | ||
| style={[ | ||
| hideIcon ? { backgroundColor: 'transparent' } : {}, | ||
| style.inputAndroid, | ||
| this.getPlaceholderStyle(), | ||
| ]} | ||
| testID="RNPickerSelectAndroid" | ||
| enabled={!disabled} | ||
| onValueChange={this.onValueChange} | ||
| selectedValue={this.state.selectedItem.value} | ||
| {...pickerProps} | ||
| > | ||
| {this.renderPickerItems()} | ||
| </Picker> | ||
| <View style={[defaultStyles.underline, style.underline]} /> | ||
| </View> | ||
| ); | ||
| } | ||
| return ( | ||
| <View style={[defaultStyles.viewContainer, style.viewContainer]}> | ||
| <Picker | ||
| style={[ | ||
| hideIcon ? { backgroundColor: 'transparent' } : {}, | ||
| style.inputAndroid, | ||
| this.getPlaceholderStyle(), | ||
| ]} | ||
| testID="RNPickerSelectAndroid" | ||
| enabled={!disabled} | ||
| onValueChange={this.onValueChange} | ||
| selectedValue={this.state.selectedItem.value} | ||
| {...pickerProps} | ||
| > | ||
| {this.renderPickerItems()} | ||
| </Picker> | ||
| <View style={[defaultStyles.underline, style.underline]} /> | ||
| {this.renderAndroidHeadless()} | ||
| </View> | ||
@@ -512,3 +530,4 @@ ); | ||
| height: 1000, | ||
| color: 'transparent', | ||
| }, | ||
| }); |
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 by5.1%
31752
- Lines of code
- increased by3.68%
507
- Number of lines in readme file
- increased by2.6%
79
No dependency changes