Technological trends are rapidly evolving and bringing newer trends. React Native, a library started as an experimental stance now has a huge community contributing towards growth and development.
In this article, we will create a simple picker in react native. React Native Picker is a component for selection between multiple choices. It’s the same as a dropdown in web development.
In react native we have multiple options to implement the picker it depends upon the requirements. If you want picker native controls for Android and iOS then it is pretty straightforward by using the picker module of the react-native Picker module.
Here we have used the following props:
- selectedValue:
Value matching value of one of the items. Can be a string or an integer.
- onValueChange:
onValueChange Callback is triggered when an item is selected from a picker. Following params are sent:
- itemValue: Value of selected item
- itemPosition: Index of selected item
Other than these values we have some other props like
- Enabled
Can be used to enable/disable picker. If the value is set to false, the user will not be able to make a selection.
- Prompt
Android Only. Prompt string for this picker when dialog mode is enabled.
- Mode
Android Only. The developer can specify the mode of picker, this will set the behavior of how picker will display for items selection:
‘dialog’: Enabled by default. Displays picker in the dialog.
‘dropdown’: Shows a dropdown anchored to the picker view
IOS:
Android (Dialog):
Android (drop down):
Other than native control there are more libraries available for react native picker. eg: react-native-picker-select
If you want wheel picker for both android and iOS you can also use
React-native-wheel-picker
React native wheel picker android:
React native wheel picker iOS:
