React NativePicker #
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 #
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,
} = ReactNative;
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;
