React-native-picker-select: onValueChange called twice with different value

[Hristijan95]

Describe the bug

There is a onValueChange prop on the RNPickerSelect and it's called twice instead of once. The first time with the correct value, and the second time with the wrong (opposite) value. I've also noticed that on iOS you can't even select the value you want, for example I have 2 values (Yes and No) and if the initial value is "Yes", when I click to "No", it goes to "No", the onValueChange is called and then it immediately goes to "Yes" again and the onValueChange is called again. I guess the same happens on Android, but I can't see it because the UI is different (The select dialog is closed right after selection).

To Reproduce

1. Implement the RNPickerSelect anywhere in the project.
2. Click to open the selection options and select one option.
3. Check the console.log from onValueChange, it will be called twice.

Expected behavior

The expected behavior it obvious, the onValueChange should be only called once with the correct value.

Screenshots

n/a

Additional details

• Device: All
• OS: All
• react-native-picker-select version: 6.3.3
• react-native version: 0.61.3
• react version: 16.8.0

Reproduction and/or code sample

n/a - It's just the plain simple implementation of the RNPickerSelect.

[lfkwtz]

Sounds like it isn’t implemented correctly. This would be an open issue already if you weren’t able to select something (base functionality). Feel free to post a repro.

[zaytri]

I ran into the same issue, unsure what's causing it though. Has something to do with the value prop. Removing that prop entirely fixed the issue, but then I couldn't set an initial value.

My workaround was using itemKey instead, and setting key of each item to be the same as their respective value. I then had to go one step further and use RNPickerSelect as a headless container, and have the child display itemKey (or placeholder if itemKey didn't exist).

Basically this circumvents getDerivedStateFromProps because I guess the second onValueChange occurs from here?

[jenskuhrjorgensen]

@zaytrix I have no idea why it worked, but duplicating the value of key in itemKey and adding the following props to RNPickerSelect finally made it work for me:

value={Platform.OS === "ios" ? selectedItem != null ? selectedItem.value : null : undefined}
itemKey={Platform.OS === "android" ? selectedItem != null ? selectedItem.value : null : undefined}

When using just value, onValueChange was sometimes called many times on Android on initial rendering of the view, causing the value to flicker.

I found your solution via this SO post.

Thanks! 😄

[gabcvit]

@zaytri Thank you so much! I have been looking for this solution for days!!