Bind Picker to list of Picker.Item in React Native
You should probably set up your initial state as the empty array, then call your service on componentWillMount or componentDidMount. I've set up something that works with some dummy data here, and pasted the code below.
'use strict';
var React = require('react-native');
var {
Picker,
Text,
View,
AppRegistry
} = React;
var PickerItem = Picker.Item;
var SampleApp = React.createClass({
getInitialState() {
return {
services: ['a', 'b', 'c', 'd', 'e'],
selectedService: 'a'
}
},
componentDidMount() {
setTimeout(() => {
this.setState({
services: [ 'one', 'two', 'three', 'four', 'five' ]
})
}, 3000)
},
render() {
let serviceItems = this.state.services.map( (s, i) => {
return <Picker.Item key={i} value={s} label={s} />
});
return (
<View>
<Text>Pick a service</Text>
<Picker
selectedValue={this.state.selectedService}
onValueChange={ (service) => ( this.setState({selectedService:service}) ) } >
{serviceItems}
</Picker>
</View>
);
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
IMPORTANT: if you try to iterate an array of numbers with map
then don't forget that label
property of Picker.Item
should be converted to string:
const pickerItems = [1,2,3].map(i => (
<Picker.Item label={i.toString()} value={i} />
));