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 (
<View style={styles.container}>
<BpkSelect
onPress={this.onOpen}
label={this.state.value || 'Choose an airport'}
/>
<BpkPicker
isOpen={this.state.isOpen}
onClose={this.onClose}
selectedValue={this.state.value}
onValueChange={this.setValue}
doneLabel="Done"
>
<BpkPickerItem label="Choose an airport" />
{ AIRPORTS.map(({value, label}) => (
<BpkPickerItem value={value} label={label} />
))}
</BpkPicker>
);
}
}