React Native apply array values from state as Picker items

Question

I have an array in my state named Categories.

These are its values: ['Food', 'Home', 'Savings'].

My goal is that I need them to be rendered as Picker.items for my user to select.

How is that possible?

I tried using ListView inside a Picker object, but when I navigate to that page,

AppName stopped Working

prompts.

Freddy · Accepted Answer · 2019-01-13 08:30:19Z

53

You don't need to use listview within picker

var options ={
    "1": "Home",
    "2": "Food",
    "3": "Car",
    "4": "Bank",
};

<Picker
    style={{your_style}}
    mode="dropdown"
    selectedValue={this.state.selected}
    onValueChange={()=>{}}>
    {Object.keys(options).map((key) => {
        return (<Picker.Item label={this.props.options[key]} value={key} key={key}/>) //if you have a bunch of keys value pair
    })}
</Picker>

2) When you have an array of values

var options =["Home","Savings","Car","GirlFriend"];

<Picker
    style={{your_style}}
    mode="dropdown"
    selectedValue={this.state.selected}
    onValueChange={()=>{}}> //add your function to handle picker state change
    {options.map((item, index) => {
        return (<Picker.Item label={item} value={index} key={index}/>) 
    })}
</Picker>

edited Jan 13, 2019 at 8:30

Freddy

4721 gold badge5 silver badges18 bronze badges

answered Mar 25, 2017 at 13:21

Manjeet Singh

4,5925 gold badges29 silver badges41 bronze badges

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

6 Comments

jlosbanes Over a year ago

Hello Sir, Thank You for the solution, It worked, but it alerted warnings. It says 'React.createElement: type is invalid' Sir where FROM will I import the Item component?

jlosbanes Over a year ago

Never mind, I just changed the <Item/> to <Picker.Item />. The alerts were gone after that. Thank you again Kind Sir.

Manjeet Singh Over a year ago

Hi bro, I am not 'SIR' just a fellow programmer like you.You can replace Item with Picker.Item or check facebook.github.io/react-native/docs/picker.html for example

Narendra Singh Over a year ago

@ManjeetSingh when tried like {options.map((item, index) => { return (<Picker.Item label={item} value={index} key={index}/>) })} , I am getting the error - Invalid prop label` of type object supplied to PickerItem, expected string.`

Zain Khan Over a year ago

If I want to add an option e.g "Please Select" so what will I do for it?

|

Dmitry Preeternal · Accepted Answer · 2017-11-10 06:59:26Z

11

corrected a couple of syntax errors

{options.map((item, index) => {
   return (< Picker.Item label={item} value={index} key={index} />);
})}

answered Nov 10, 2017 at 6:59

Dmitry Preeternal

3784 silver badges13 bronze badges

Collectives™ on Stack Overflow

React Native apply array values from state as Picker items

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related