Bug: value={this.state.gender} does not reflect gender from onValueChange

[idoor88]

In following case, when Male or Female selected, the value passed in onValueChange is M or F, and it is set to state correctly by this.setState({gender:value}); but the value={this.state.gender} shows Male or Female, not M or F:

const placeholder = {
label: 'Select a gender...',
value: null,
color: '#9EA0A4',
};
const genders = [
{
id: 1,
label: 'Male',
value: 'M',
},
{
id: 2,
label: 'Female',
value: 'F',
},
];
<RNPickerSelect
placeholder={placeholder}
items={genders}
onValueChange={(value) => {
console.log("valueChange value: ", value);
this.setState({
gender: value,
});
}}
style={pickerSelectStyles}
value={this.state.gender}
useNativeAndroidPickerStyle={false}
ref={(ref) => this.genderRef = ref}
/>

Steps to reproduce the behavior:

1. Go to 'select a gender'
2. Click on 'select a gender'
3. Scroll down to select Male
4. See the "Male" populated in the field, but M is printed out in console, which means the value is M in onValueChange() call.

Expected behavior

The field should show M instead of Male

Smartphone (please complete the following information):

• Device: [iPhone Simulator 8 plus]
• OS: [iOS10.1]
• react-native-picker-select version: [6.0.0]
• react-native version: [0.57.7]
• react version: [16.6.1]

[lfkwtz]

can you reproduce this on snack.expo.io?

[idoor88]

here is the link I can reproduce it, the field is showing Male, not M:
https://expo.io/snacks/@idoor

[lfkwtz]

maybe i'm not understanding. you're setting the value to be M. if you want the value to be Male, set it to Male.

[idoor88]

I want the value shown in the field is M, and also the gender in the state is M, they should be the same, right now they are not the same, it is shown in the field as Male, but the this.state.gender is actually M, I want the shown value reflect the actual state.gender.

[lfkwtz]

you need to set the label to be M then. this is not a bug - stack overflow is a more appropriate place for this question.

[idoor88]

The label and the value have to be the same? it should not, the gender value is set to M by calling setState, but it shows as Male, you think that is not a bug?

[SimonDrew2018]

@idoor88 did you ever resolve this?
I have the same issue.

I have a list of currencies for example:
value: GBP
label: Great British Pound
value: USD
label: United State Dollars

In the picker I show the label which is correct, however when I select the label in the picker I then want it to display the actual value (GBP / USD... NOT Great British Pound).

In the docs under Value it says:

Will attempt to locate a matching item from the items array by checking each item's value property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item.

Not sure about the above since my value & label are both different?

It should display the Value in the input and not the label text, or am I missing something?

[SimonDrew2018]

@idoor88 & @lfkwtz further to my above comment I made a change in react-native-picker-select index.js which will resolve the issue. (If it is an issue?)

line 358 which renders the TextInput:
change: value={this.state.selectedItem.label}
to: value={this.state.selectedItem.value}

Hope this helps some people.
Thanks.

[lfkwtz]

The value will never be displayed to the end user. Whatever you want the end user to see belongs in the label field.

[WillyRamirez]

@lfkwtz What if I want to display the value in the input when it's selected, but the label in the picker box when expanded?

I have a dropdown of country net numbers. I want the selected net number to be visible for users, but I want the options list also to contain the label (ie country name)

visible in the input
+1

visible when expanded
+1 USA
+1 Canada
+44 UK

[lfkwtz]

definitely possible using headless mode

[WillyRamirez]

@lfkwtz thanks! I see this headlessAndroidContainer is only available for android? Would it be possible to implement this on iOS as well?

[lfkwtz]

headless is available on ios too

For either platform, you can alternatively pass down a child element of your choice that will be wrapped in a touchable area.

if you come up with a nice example of what you're working on feel free to share it and i'll add it to the main snack examples