Backpack React Native picker component.
npm install react-native-bpk-component-picker> Backpack React Native picker component.
``sh`
npm install react-native-bpk-component-picker --save-dev
`js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
import BpkPicker, { BpkPickerItem } from 'react-native-bpk-component-picker';
import BpkSelect from 'react-native-bpk-component-select';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: spacingBase,
}
});
const AIRPORTS = [
{
value: '1',
label: 'Charles De Gaulle',
},
{
value: '2',
label: 'Paris Orly',
},
{
value: '3',
label: 'Beauvais-Tillé',
},
];
export default class App extends Component {
constructor() {
super();
this.state = {
value: null,
isOpen: false,
};
}
onOpen = () => {
this.setState({
isOpen: true,
});
}
onClose = () => {
this.setState({
isOpen: false,
});
}
setValue = (value) => {
this.setState({value});
}
render() {
return (
label={this.state.value || 'Choose an airport'}
/>
onClose={this.onClose}
selectedValue={this.state.value}
onValueChange={this.setValue}
doneLabel="Done"
>
{ AIRPORTS.map(({value, label}) => (
))}
);
}
}
``
| Property | PropType | Required | Default Value |
| ----------- | ------------------------------------- | -------- | ------------- |
| children | node | true | - |
| doneLabel (iOS only) | string | true | - |
| onClose | func | true | - |
| onValueChange | func | true | - |
| isOpen | bool | false | false |
| selectedValue | oneOfType(string, number) | false | null |
| onShow | func | false | - |
| pickerContentRef | React.Ref | false | null |
| Property | PropType | Required | Default Value |
| ----------- | ------------------------------------- | -------- | ------------- |
| label | string | true | - |
| value | oneOfType(string, number) | false | null |