react-native: Can't select first option from Picker

Overview

Using a Picker, onValueChange has no effect when the first item is selected, but works for the rest.

When pressing 1st item, for the first time, this won’t fire, because is selected by RN by default (even if my state value is undefined/false/0/‘whatever’).

React Native version:

System: OS: Windows 10 10.0.18362 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Memory: 6.03 GB / 15.85 GB Binaries: Node: 11.10.1 - C:\Program Files\nodejs\node.EXE npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD SDKs: Android SDK: API Levels: 23, 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.6010548 npmPackages: react: 16.12.0 => 16.12.0 react-native: 0.61.5 => 0.61.5

Steps To Reproduce

I created this Snack showing the issue. All you need to do is Tap to Play.

https://snack.expo.io/@mayconjcm/picker-rn-bug

Expected Results

We need to have some function or callback, to know when the first picker item is selected. My workaround is creating a last picker item: <Picker.Item label="Cancel" value="none" />. But this solution is not most appropriate.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@mayconjcm/picker-rn-bug

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17

Most upvoted comments

  state = {
    value: undefined,
  };

<Picker
          selectedValue={this.state.value}
          style={{ flex: 1 }}
          onValueChange={this.changeOption}
          mode="dropdown">
          <Picker.Item label="Options"/>
          <Picker.Item label="Refresh" value="refresh" />
          <Picker.Item label="Share" value="share" />
          <Picker.Item label="Go To Broswer" value="openExternal" />
</Picker>

As you know, Picker selects first item by Default. i recommend to use like ‘Options’ that don’t have value.

if you need some of help, question to StackOverflow 😃

Djunnni on Feb 29, 2020