Gathering detailed insights and metrics for react-native-segmented-picker-with-input-feature
Gathering detailed insights and metrics for react-native-segmented-picker-with-input-feature
Selection picker wheel with multi-column support and optional native dependencies.
Installations
npm install react-native-segmented-picker-with-input-featureDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.15.1
NPM Version
9.2.0
Score
42.4
Supply Chain
57.5
Quality
66.2
Maintenance
50
Vulnerability
94.1
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
6
TypeScript
JavaScript
Swift
Objective-C
Makefile
Ruby
TypeScript (62.66%)
JavaScript (17.34%)
Swift (17%)
Objective-C (1.29%)
Makefile (1.08%)
Ruby (0.64%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
t108590016
Download Statistics
Total Downloads
1,437
Last Day
1
Last Week
5
Last Month
19
Last Year
521
GitHub Statistics
167 Commits
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.7
Package Id
react-native-segmented-picker-with-input-feature@1.0.7
Unpacked Size
200.59 kB
Size
58.88 kB
File Count
40
NPM Version
9.2.0
Node Version
16.15.1
Total Downloads
Cumulative downloads
Total Downloads
1,437
Last day
-50%
1
Compared to previous day
Last week
-50%
5
Compared to previous week
Last month
-56.8%
19
Compared to previous month
Last year
-39%
521
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
Dev Dependencies
27
@babel/core@babel/plugin-proposal-class-properties@babel/plugin-transform-react-jsx@rollup/plugin-babel@types/jest@types/react-native@types/react-test-renderer@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-jestdetoxdetox-getpropseslinteslint-config-airbnb-typescripteslint-plugin-detoxeslint-plugin-importeslint-plugin-jesteslint-plugin-jsx-a11yeslint-plugin-reactjestmetro-react-native-babel-presetreactreact-nativereact-test-rendererrolluprollup-plugin-typescript2typescript
Versions
React Native Segmented Picker
A cross platform implementation of UIPickerView for creating dynamic, multi-dimensional picklists.
- Supports multiple columns and sizes.
- Displays any text-based content, not just dates and times.
- Works with apps built for Expo.
- Optional native extension available for iOS.
Installation
1$ yarn add react-native-segmented-picker 2# or 3# $ npm install --save react-native-segmented-picker
You may also setup the Native iOS Extension at this time, but this is not mandatory.
Usage
1import React, { Component } from 'react'; 2import SegmentedPicker from 'react-native-segmented-picker'; 3 4class Example extends Component { 5 constructor(props) { 6 super(props); 7 this.segmentedPicker = React.createRef(); 8 } 9 10 componentDidMount() { 11 // Can alternatively be shown with the `visible` prop for redux etc. 12 this.segmentedPicker.current.show(); 13 } 14 15 onConfirm = (selections) => { 16 console.info(selections); 17 // => { col_1: "option_1", col_2: "option_3" } 18 } 19 20 render() { 21 return ( 22 <SegmentedPicker 23 ref={this.segmentedPicker} 24 onConfirm={this.onConfirm} 25 options={[ 26 { 27 key: 'col_1', 28 items: [ 29 { label: 'Option 1', value: 'option_1' }, 30 { label: 'Option 2', value: 'option_2' }, 31 ], 32 }, 33 { 34 key: 'col_2', 35 items: [ 36 { label: 'Option 3', value: 'option_3' }, 37 ], 38 }, 39 ]} 40 /> 41 ); 42 } 43}
Further examples can be found in ./examples/src.
Props, Events & Methods Reference
Props
| Prop | Description | Default |
|---|---|---|
visible | Not used by default. Set to true or false to manually handle visibility. | |
options | An array of columns: [{ key: '', flex?: 1, testID?: '', items: [{ label: '', value: '', key?: '', testID?: '' }] }] | [] |
defaultSelections | Eg: {column: 'value', ...} | {} |
native | Use the native UIPickerView component on iOS. Requires additional setup. | false |
nativeTestID | Accessibility identifier of the native component for E2E testing. | '' |
size | Floating point between 0 and 1 representing the percentage of screen to take up. | 0.45 |
confirmText | Text displayed in the top right hand corner. | 'Done' |
confirmTextColor | Color of the confirmText button. | '#0A84FF' |
toolbarBackgroundColor | Background color of the top container where the confirmText is displayed. | '#FAFAF8' |
toolbarBorderColor | Bottom border color of the toolbarContainer. | '#E7E7E7' |
pickerItemTextColor | Color of the text for each item in the picklist. | '#282828' |
selectionBackgroundColor | Background color of the box which shows selected items. | '#F8F8F8' |
selectionBorderColor | Border color (top and bottom) of the selection mask. | '#DCDCDC' |
backgroundColor | Background color of the inner SegmentedPicker container. | '#FFFFFF' |
Event Props
| Event Prop | When and how? |
|---|---|
onValueChange={({ column, value }) => ...} | Emitted each time a picklist value is modified by a user. |
onCancel={(selections) => ...} | Emitted when a user touches out of the modal, or presses the hardware back button on Android. |
onConfirm={(selections) => ...} | Emitted when a user presses the confirm text button. |
Methods
Remember that you will need to set a ref for the <SegmentedPicker /> component in order to use the methods outlined below.
ref.show();
Display the Segmented Picker modal over all other content on the screen. This is the preferred method of showing a <SegmentedPicker /> so that you don't have to manually hide the component after listening to the onCancel and onConfirm events.
Note that this method will have no effect if the visible prop is set.
ref.hide();
Hide the Segmented Picker modal from the screen. Generally should not be required, as this method is automatically called by this library after events where visibility should be toggled off.
ref.selectLabel(label, columnId, animated=true, emitEvent=true, zeroFallback=false);
Programmatically select a picker item by it's label while the component is displaying.
{string} label: Eg 'Option 1'{string} columnId: Eg 'column1'{boolean=true} animated: Scroll or snap to the item?{boolean=true} emitEvent: Specify whether to emit theonValueChangeevent.{boolean=false} zeroFallbackSelect the first list item if not found.
ref.selectValue(value, columnId, animated=true, emitEvent=true, zeroFallback=false);
Same as above, except it filters using the value of a picker item instead of label.
ref.selectIndex(index, columnId, animated=true, emitEvent=true);
Programmatically select an array index from a list column while the component is displaying. This method will give you better performance than the above methods if you already know the index of the item that you want to select.
{number} index: Eg 0{string} columnId: Eg 'column1'{boolean=true} animated: Scroll or snap to the item?{boolean=true} emitEvent: Specify whether to emit theonValueChangeevent.
ref.getCurrentSelections();
Returns the current selected items as they appear in the UI. This is the same method that's used internally when the onCancel and onConfirm events are fired.
Recipes
This section contains some code examples of common requirements and frequently asked questions.
1. Dynamically Changing Columns
A common use case is to have one of your columns change it's list options based off the selection in another column. In other words, implementing Column B as a function of Column A. The below example shows one possible way to achieve this using the onValueChange() event.
1import React, { Component } from 'react'; 2import SegmentedPicker from 'react-native-segmented-picker'; 3 4const options = { 5 categories: [{ label: 'Fruits', value: 'fruits' }, { label: 'Vegetables', value: 'vegetables' }], 6 foods: { 7 fruits: [{ label: 'Apples', value: 'apples' }, { label: 'Oranges', value: 'oranges' }], 8 vegetables: [{ label: 'Carrots', value: 'carrots', }, { label: 'Potatoes', value: 'potatoes' }], 9 }, 10}; 11 12class Demo extends Component { 13 constructor(props) { 14 super(props); 15 this.state = { 16 selections: { 17 category: options.categories[0].value, 18 food: undefined, 19 }, 20 }; 21 } 22 23 onValueChange = ({ column, value }) => { 24 this.setState((prevState) => ({ 25 selections: { 26 ...prevState.selections, 27 [column]: value, 28 }, 29 })); 30 }; 31 32 generateOptions = () => { 33 const { categories, foods } = options; 34 const { selections } = this.state; 35 return [ 36 { 37 key: 'category', 38 items: categories, 39 }, 40 { 41 key: 'food', 42 items: foods[selections.category], 43 }, 44 ]; 45 }; 46 47 render() { 48 return ( 49 <SegmentedPicker 50 options={this.generateOptions()} 51 onValueChange={this.onValueChange} 52 defaultSelections={this.state.selections} 53 /> 54 ); 55 } 56}
2. Specifying Column Widths
You can customise the relative width of picker segments by using flex notation in your column data. This integer acts as a ratio - the larger the number, the bigger it grows.
1{/* All widths equal (default): */} 2<SegmentedPicker 3 options={[ 4 { key: 'col_1', flex: 1, items: [] }, 5 { key: 'col_2', flex: 1, items: [] }, 6 { key: 'col_3', flex: 1, items: [] }, 7 ]} 8/> 9 10{/* Small middle column: */} 11<SegmentedPicker 12 options={[ 13 { key: 'col_1', flex: 3, items: [] }, 14 { key: 'col_2', flex: 1, items: [] }, 15 { key: 'col_3', flex: 3, items: [] }, 16 ]} 17/>
3. End-To-End (E2E) Testing
This library fully supports E2E testing (using tools such as Detox).
1<SegmentedPicker 2 options=[ 3 { 4 key: 'col_1', 5 testID: 'col_1', 6 items: [ 7 { label: 'Option 1', value: 'option_1', testID: 'col_1_option_1' }, 8 ], 9 }, 10 ] 11/>
1// Detox Example: 2await expect(element(by.id('col_1'))).toBeVisible(); 3await element(by.id('col_1_option_1')).tap();
You can see full examples in our own testing suite here. Keep in mind there are also a small number of testID attributes which are automatically set on fixed elements for your convenience.
1import { TEST_IDS } from 'react-native-segmented-picker';
TEST_IDS.PICKER: The entire segmented picker container (useful to check if visible).TEST_IDS.CONFIRM_BUTTON: "Done" confirmation button in the top right hand corner.TEST_IDS.CLOSE_AREA: Darkened area outside of the picker which hides the component when tapped.
Contributions
This is an open source project. Bug fixes, improvements and the addition of useful new features to this package are greatly appreciated.
- Fork and clone the repository from GitHub.
- Setup:
yarn install. - Checkout a new branch, eg:
feature/my-thingorbugfix/terrible-thing. - After making any changes, make sure that
yarn teststill passes. - Are there new unit test(s) that you could write to capture your changes?
- Submit a pull request to
masteroutlining what your change is and how you tested it.
Made with love in Melbourne by Adam McArthur.
No vulnerabilities found.
No security vulnerabilities found.