React Native - dropdown in a form with list loading dynamically

Question

In react native, I have a form (simple fields - name, address) and would like to add a dropdown to select user type. I would like to load the dropdown list dynamically from firebase. Is it possible ? Appreciate any help.

Updated:

  import React, { Component } from 'react';
  import {
         AppRegistry,
         StyleSheet,
         Text,
         View,
         Picker, 
   } from 'react-native';

   export default class Testpicker extends Component {

   constructor(props) {
            super(props);
           types = [{userType: 'admin', userName: 'Admin User'}, {userType:    'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}];
this.setState({userTypes: types});        
 }


 loadUserTypes() {
    return this.state.userTypes.map(user => (
                                             <Picker.Item label={user.userName} value={user.userType} />
                                             ))
}

  render() {
       return (
        <View>
        <Picker
        selectedValue={this.state.selectedUserType}
        onValueChange={(itemValue, itemIndex) =>
        this.setState({selectedUserType: itemValue})}>

        // Dynamically loads Picker.Values from this.state.userTypes.

        {this.loadUserTypes()}
        </Picker>

        </View>
          )
    }
   }

 AppRegistry.registerComponent('Testpicker', () => Testpicker);

Now, I am getting an error message "null is not an object(evaluating 'this.state.selectedUserType')." What am I doing wrong ?

Answer 1

Of course you can, imagine your data from firebase is like so.

types = [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}]

Save this data inside the state as this.setState({userTypes: types});

Create a function loadUserTypesin your class like so.

...
import {Picker} from 'react-native;
...
...

// Inside your class.

constructor(props) {
   super(props);
   // Use this.setState({userTypes: data}) when data comes from 
   // firebase. 
   this.state = {
     userTypes: [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}],
     selectedUserType: ''
   }
}


loadUserTypes() {
  return this.state.userTypes.map(user => (
     <Picker.Item label={user.userName} value={user.userType} />
  ))
}

// Then in your render.
render() {
 return (
  <View>
    <Picker
      selectedValue={this.state.selectedUserType}
      onValueChange={(itemValue, itemIndex) => 
          this.setState({selectedUserType: itemValue})}>

      // Dynamically loads Picker.Values from this.state.userTypes.

      {this.loadUserTypes()}
    </Picker>
  </View>
 )
}

.map function will transform each element of the userTypes array into a RN component that will be returned and we would have an array of RN components that we can render.

The documentation for <Picker /> is available from here.

Hope it helps!