add API data values in Picker react native

Viewed 5923

I am new to react native. I want to add values from database into picker using API please suggest how can i do that.

componentDidMount() {

    return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new Picker.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson),
        }, function() {
          // In this block you can do something with new state.
        });
      })
      .catch((error) => {
        console.error(error);
      });
    }

Here is my picker in which i need to insert the values that are fetched from API function componentDidMount()

render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

      <View style={styles.MainContainer}>
<Picker
  selectedValue={this.state.active}
  dataSource={this.state.dataSource}
  onValueChange={(activeValue, activeIndex) => this.setState({active: 
    activeValue})}>
  renderRow={(rowData) => <Picker.Item label={rowData.fruit_name} value=
   {rowData.fruit_name} />} 
    </Picker>
      </View>
    );}}
1 Answers
Related