Skip to main content
Version: 0.61

Picker

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

<Picker
selectedValue={this.state.language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ language: itemValue })
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>

Reference

Propsโ€‹

Inherits View Props.

onValueChangeโ€‹

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
TypeRequired
functionNo

selectedValueโ€‹

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

TypeRequired
anyNo

styleโ€‹

TypeRequired
pickerStyleTypeNo

testIDโ€‹

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

TypeRequired
stringNo

enabledโ€‹

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

TypeRequiredPlatform
boolNoAndroid

modeโ€‹

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
TypeRequiredPlatform
enum('dialog', 'dropdown')NoAndroid

promptโ€‹

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

TypeRequiredPlatform
stringNoAndroid

itemStyleโ€‹

Style to apply to each of the item labels.

TypeRequiredPlatform
text stylesNoiOS