react-native/website/versioned_docs/0.34/picker.md

id, title, original_id

id	title	original_id
version-0.34-picker	picker	picker

Picker #

Renders the native picker component on iOS and Android. Example:

<Picker selectedValue={this.state.language} onValueChange={(lang) => this.setState({language: lang})}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> </Picker>

Props #

View props... #

onValueChange function #

Callback for when an item is selected. This is called with the following parameters:

• itemValue: the value prop of the item that was selected
• itemPosition: the index of the selected item in this picker

selectedValue any #

Value matching value of one of the items. Can be a string or an integer.

style pickerStyleType #

testID string #

Used to locate this view in end-to-end tests.

androidenabled bool #

If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

androidmode enum('dialog', 'dropdown') #

On Android, specifies how to display the selection items when the user taps on the picker:

• 'dialog': Show a modal dialog. This is the default.
• 'dropdown': Shows a dropdown anchored to the picker view

androidprompt string #

Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

iositemStyle itemStylePropType #

Style to apply to each of the item labels.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub

'use strict';

const React = require('react'); const ReactNative = require('react-native'); const StyleSheet = require('StyleSheet'); const UIExplorerBlock = require('UIExplorerBlock'); const UIExplorerPage = require('UIExplorerPage');

const { Picker, Text, TouchableWithoutFeedback, } = ReactNative; // $FlowFixMe found when converting React.createClass to ES6 const Item = Picker.Item;

class PickerExample extends React.Component { static title = '<Picker>'; static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.';

state = { selected1: 'key1', selected2: 'key1', selected3: 'key1', color: 'red', mode: Picker.MODE_DIALOG, };

render() { return ( <UIExplorerPage title="<Picker>"> <UIExplorerBlock title="Basic Picker"> <Picker style={styles.picker} selectedValue={this.state.selected1} onValueChange={this.onValueChange.bind(this, 'selected1')}> <Item label="hello" value="key0" /> <Item label="world" value="key1" /> </Picker> </UIExplorerBlock> <UIExplorerBlock title="Disabled picker"> <Picker style={styles.picker} enabled={false} selectedValue={this.state.selected1}> <Item label="hello" value="key0" /> <Item label="world" value="key1" /> </Picker> </UIExplorerBlock> <UIExplorerBlock title="Dropdown Picker"> <Picker style={styles.picker} selectedValue={this.state.selected2} onValueChange={this.onValueChange.bind(this, 'selected2')} mode="dropdown"> <Item label="hello" value="key0" /> <Item label="world" value="key1" /> </Picker> </UIExplorerBlock> <UIExplorerBlock title="Picker with prompt message"> <Picker style={styles.picker} selectedValue={this.state.selected3} onValueChange={this.onValueChange.bind(this, 'selected3')} prompt="Pick one, just one"> <Item label="hello" value="key0" /> <Item label="world" value="key1" /> </Picker> </UIExplorerBlock> <UIExplorerBlock title="Picker with no listener"> <Picker style={styles.picker}> <Item label="hello" value="key0" /> <Item label="world" value="key1" /> </Picker> <Text> Cannot change the value of this picker because it doesn't update selectedValue. </Text> </UIExplorerBlock> <UIExplorerBlock title="Colorful pickers"> <Picker style={[styles.picker, {color: 'white', backgroundColor: '#333'}]} selectedValue={this.state.color} onValueChange={this.onValueChange.bind(this, 'color')} mode="dropdown"> <Item label="red" color="red" value="red" /> <Item label="green" color="green" value="green" /> <Item label="blue" color="blue" value="blue" /> </Picker> <Picker style={styles.picker} selectedValue={this.state.color} onValueChange={this.onValueChange.bind(this, 'color')} mode="dialog"> <Item label="red" color="red" value="red" /> <Item label="green" color="green" value="green" /> <Item label="blue" color="blue" value="blue" /> </Picker> </UIExplorerBlock> </UIExplorerPage> ); }

changeMode = () => { const newMode = this.state.mode === Picker.MODE_DIALOG ? Picker.MODE_DROPDOWN : Picker.MODE_DIALOG; this.setState({mode: newMode}); };

onValueChange = (key: string, value: string) => { const newState = {}; newState[key] = value; this.setState(newState); }; }

var styles = StyleSheet.create({ picker: { width: 100, }, });

module.exports = PickerExample;

Run this example

×

Powered by appetize.io

← PrevNext →