Android Picker ArrayIndexOutOfBoundsException when length of children change

React Native version:

12:39:42 ~/jobs/pickercrash ⚡️ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 26.04 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v12.8.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.2, 28.0.3
      System Images: android-25 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5

Steps To Reproduce

1. Clone the repo
2. Run the project on Android
3. Tap “Foods”
4. Select “Japanese”
5. Tap “Pets”

An error occurs:

09-11 12:54:50.007 11910 11910 E unknown:ReactNative: Exception in native call
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: java.lang.ArrayIndexOutOfBoundsException: length=3; index=3
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at java.util.Arrays$ArrayList.get(Arrays.java:3769)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.widget.ArrayAdapter.getItem(ArrayAdapter.java:393)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:116)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager$ReactPickerAdapter.getView(ReactPickerManager.java:107)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.widget.Spinner.makeView(Spinner.java:712)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.widget.Spinner.layout(Spinner.java:660)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.widget.AbsSpinner.setSelectionInt(AbsSpinner.java:306)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.widget.AbsSpinner.setSelection(AbsSpinner.java:283)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.views.picker.ReactPicker.commitStagedData(ReactPicker.java:142)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager.onAfterUpdateTransaction(ReactPickerManager.java:80)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.views.picker.ReactPickerManager.onAfterUpdateTransaction(ReactPickerManager.java:36)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:47)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:139)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$UpdatePropertiesOperation.execute(UIViewOperationQueue.java:93)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:844)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:952)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue.access$2200(UIViewOperationQueue.java:44)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1012)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.view.Choreographer.doCallbacks(Choreographer.java:761)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.view.Choreographer.doFrame(Choreographer.java:693)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.os.Handler.handleCallback(Handler.java:873)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.os.Handler.dispatchMessage(Handler.java:99)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.os.Looper.loop(Looper.java:193)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at android.app.ActivityThread.main(ActivityThread.java:6669)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at java.lang.reflect.Method.invoke(Native Method)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
09-11 12:54:50.007 11910 11910 E unknown:ReactNative: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
09-11 12:54:50.013 11910 11910 D AndroidRuntime: Shutting down VM
09-11 12:54:50.014 11910 11910 E AndroidRuntime: FATAL EXCEPTION: main
09-11 12:54:50.014 11910 11910 E AndroidRuntime: Process: com.pickercrash, PID: 11910

Describe what you expected to happen: Picker options are re-rendered with the newly rendered selectedValue prop.

Snack, code example, screenshot, or link to a repository: The issue does not reproduce in an Expo Snack, with the latest version, so I must assume it’s a bug introduced in later versions.

I have created a standalone project here: https://github.com/scarlac/pickercrash

Speculation: I am speculating that the options within Picker (ie. Picker.Item) are re-rendered before the parent Picker has a chance to change value. Because the native re-render is not in sync with the virtual dom, the list of Picker.Item will be re-rendered to a shorter list (list of 3 pets vs 4 foods), but the native Picker will still carry the old setting, causing a crash, despite the virtual dom being in perfect sync.

Workaround / hack: Add a key to the Picker that is in sync with the category, such that React Native internally doesn’t re-use the existing Picker across categories.

[mina-kleid]

It actually worked when i added key to the Picker itself. thanks a lot for the hack 😃

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.