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 ?

Edited my answer!

Mustansir Zia
– Mustansir Zia

2017-08-29 10:12:54 +00:00
Commented Aug 29, 2017 at 10:12 — Mustansir Zia
– Mustansir Zia, Commented Aug 29, 2017 at 10:12

Mustansir Zia · Accepted Answer · 2017-08-29 10:12:38Z

4

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!

edited Aug 29, 2017 at 10:12

answered Aug 26, 2017 at 21:18

Mustansir Zia

1,00411 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CNK2343 Over a year ago

Thanks! I am a newbie. I used your code example and getting an error message "null is not an object(evaluating 'this.state.selectedUserType'). ". What am I doing wrong ? Appreciate any help.

Mustansir Zia Over a year ago

Oh. Really sorry, didn't know that. Going to edit the answer. I had intentionally skipped the constructor part since that was obvious. You have to define the state for being able to use it. Now you can use it, make sure you do this.setState({userTypes: data}) with the firebase data if that's an array. Please make sure you also carefully study the data that comes from firebase and map it accordingly.

CNK2343 Over a year ago

Thank you very much. I noticed that picker appears different in iOS and Android. Is there any dropdown that looks same in both platforms ?

Mustansir Zia Over a year ago

Yes, I do have one. It's third party though. github.com/instea/react-native-popup-menu

Collectives™ on Stack Overflow

React Native - dropdown in a form with list loading dynamically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related