CODEWITHSUNDEEP
androidfirebasereact-nativepicker
Savad
Savad

Reputation: 1316

How to show data from firebase in a picker in react native

I am developing an app in react native, I want to show names and value in picker that is stored in firebase. How to show data from firebase on the picker?

NB:- I am a noob. So, If you can, Please provide a simple example.

Upvotes: 0

Views: 1408

Answers (1)

Ravi
Ravi

Reputation: 35589

You can find basic guideline on how to use firebase database from Firebase Realtime Database With React Native article.

After getting data from it, you just need to use setState to set data and use Picker from react native.

<Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
  this.setState({language: itemValue})
}>
   <Picker.Item label="Java" value="java" />    // update this according to your firebase data collection
   <Picker.Item label="JavaScript" value="js" />
</Picker>

This is demo code for picker, you need to render Picker.Item as per you firebase data.

You can even use third part library called react-native-picker which will display data in wheel picker for both android and iOS.

Update

As you want it dynamic code also, please see reference code

{this.state.data.map(element =>
    <Picker.Item label={element} value={element} />
)}

this.state.data is data you have set to state when you received response from firebase

Upvotes: 5

Related Questions