Related pickers crashes the app

[bitsmanent]

It seems impossible to bind two pickers together (one changing depending on the value of the other) because in 99% of cases the app crashes. It's a bug somewhere in the RN code which I was not able to workaround. The snippet below should make everything clears.

For now, I was forced to replace the pickers with custom modals.

React Native version:
System:
OS: Linux 4.18 Ubuntu 18.10 (Cosmic Cuttlefish)
CPU: (4) x64 Intel(R) Core(TM) i5-4460 CPU @ 3.20GHz
Memory: 1.91 GB / 3.73 GB
Shell: Unknown - /bin/mksh
Binaries:
Node: 8.11.4 - /usr/bin/node
npm: 6.10.3 - /usr/local/bin/npm
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-screens: 1.0.0-alpha.23

Steps To Reproduce

1. Run the code below
2. Select Bar > BarSub02 then go back to Foo

I expect to find Foo > FooSub01 selected. I get a FATAL EXCEPTION instead.

Following code example is a reproducible test case:

import React, {Component} from "react";
import {
        Picker,
        View
} from "react-native";

export default class PickerTest extends Component {
        constructor(props) {
                super(props);
                this.state = {
                        index_group: 0,
                        index_subgroup: 0,
                        items: [
                                {name:"Foo", subs: [
                                        {ClsSubGrName:"FooSub01"},
                                ]},
                                {name:"Bar", subs: [
                                        {ClsSubGrName:"BarSub01"},
                                        {ClsSubGrName:"BarSub02"}
                                ]}
                        ]
                };
        }

        render() {
                return (
                <View style={{flex:1}}>
                        <Picker
                                selectedValue={this.state.index_group}
                                onValueChange={(v) => this.setState({index_group:v,index_subgroup:0})}>
                                {this.state.items.map((item, i) => (
                                        <Picker.Item key={i} value={i} label={item.name} />
                                ))}
                        </Picker>

                        <Picker
                                selectedValue={this.state.index_subgroup}
                                onValueChange={(v) => this.setState({index_subgroup:v})}>
                                {this.state.items[this.state.index_group].subs.map((item, i) => (
                                        <Picker.Item key={i} value={i} label={item.ClsSubGrName} />
                                ))}
                        </Picker>
                </View>
                )
        }
}

Notice that the issue does not occur if current item is the first in list or if you switch between groups with more than one item (e.g. if you add FooSub02 under Foo the issue should not happen anymore).

Here's an excerpt from my logs:

08-09 13:11:27.589  3658  3658 E unknown:ReactNative: Exception in native call
08-09 13:11:27.589  3658  3658 E unknown:ReactNative: java.lang.ArrayIndexOutOfBoundsException: length=1; index=3
08-09 13:11:27.589  3658  3658 E unknown:ReactNative:   at java.util.Arrays$ArrayList.get(Arrays.java:3854)
[ ...OMISSIS... ]
08-09 13:11:27.594  3658  3658 D AndroidRuntime: Shutting down VM
08-09 13:11:27.595  3658  3658 E AndroidRuntime: FATAL EXCEPTION: main

[dulmandakh]

Please use https://github.com/react-native-community/react-native-picker, and report issues there. Thank you

[bitsmanent]

Please use https://github.com/react-native-community/react-native-picker, and report issues there. Thank you

Sorry, I thought it was a builtin feature. Thanks!

[dulmandakh]

It was but moved out

[vyshakh]

@clamiax Looks like its a bug with version 0.60.4.
Workaround - add a key to picker

<Picker key="uniquekey">
... picker items
</Picker >

[bitsmanent]

@vyshakh I already solved this way: react-native-picker/picker#14 (comment)

Thanks!