

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display dropdown in ReactNative?
The React native picker component is similar to a dropdown that allows you to select a value from the multiple options given.
The basic Picker component is as follows −
<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}> <Picker.Item label = "ItemLabel" value = "ItemValue" /> ... ... ... <Picker.Item label = "ItemLabel" value = "ItemValue" /> </Picker>
To work with picker component, you need to import it first from react-native as follows −
import { Picker } from 'react-native'
Picker Properties
Sr.No | Props & Description |
---|---|
1 | enabled It takes a boolean value. The picker will be disabled if set to false and the user will not be able to select the item. |
2 | itemStyle Styling to be applied for the items. |
3 | mode This property decides how to display the items of the picker. The options available are : dialog and dropdown. If dialog mode the picker items will be displayed in a modal dialog. If dropdown it will display like normal dropdown mode. |
4 | onValueChange The callback function that will get called when the item from the picker is selected. The parameters available are itemValue i.e the actual value selected and itemPosition i.e the index position of the item. |
5 | selectedValue The selected value from the picker. |
Example: Display of Dropdown using Picker in ReactNative
This example shows the dropdown using the Picker component.
The code is as follows −
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> <Picker.Item label = "Steve" value = "steve" /> <Picker.Item label = "Ellen" value = "ellen" /> <Picker.Item label = "Maria" value = "maria" /> </Picker>
There are 3 values given to the Picker Steve, Ellen and Maria. Here is a complete code to display it.
import React, { Component } from 'react'; import { View, Text, Picker, StyleSheet } from 'react-native' class PickerExample extends Component { state = {user: ''} updateUser = (user) => { this.setState({ user: user }) } render() { return ( <View> <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}> <Picker.Item label = "Steve" value = "steve" /> <Picker.Item label = "Ellen" value = "ellen" /> <Picker.Item label = "Maria" value = "maria" /> </Picker> <Text style = {styles.text}>{this.state.user}</Text> </View> ) } } export default PickerExample const styles = StyleSheet.create({ text: { fontSize: 30, alignSelf: 'center', color: 'red' } })
The this.state.user is used for picker control. The updateUser function will be triggered when a user is picked.
Output
When you open the name from picker you should see as below −
- Related Questions & Answers
- How to display date and time picker in ReactNative?
- How to handle touches in ReactNative?
- How to show ProgressBar in ReactNative?
- How to show a checkbox in reactnative?
- How to display the selected option in a dropdown list with JavaScript?
- How to work with Alerts Dialog box in ReactNative?
- Explain ReactNative SwitchSelector Component
- How to handle errors while working with Navigation in ReactNative?
- How to use Bootstrap Dropdown Plugins
- Explain VirtualizedList component usage in ReactNative?
- Display the dropdown’s (select) selected value on console in JavaScript?
- How to add styling or css to your app using reactnative?
- How to preselect Dropdown Using JavaScript Programmatically?
- Bootstrap dropdown class
- How to retrieve all options in a dropdown using Selenium?
Advertisements