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

[jainkuniya]

hi @clamiax I tried to reproduce, but can't reproduce

 "@react-native-community/picker": "^1.0.0",
 "react": "16.8.6",
 "react-native": "0.60.4"

My steps were:

Select Bar > BarSub02 then go back to Foo

[bitsmanent]

@jainkuniya Thanks for taking a look.

I'm still experiencing the issue and I also tried on a real device with the exact same effect (I made my first attempts on an emulator). Here is the relevant part my logs. I don't know how to investigate further since I don't get any other useful error message.

EDIT: I inadvertently closed the issue before posting this comment.

[bitsmanent]

@jainkuniya I noticed that the line about picker was missing in my package.json. I also noticed that I was using react-native-picker instead of @react-native-community/picker. Not sure what the difference really is.

Anyway, after I ran the following commands the issue got solved:

npm uninstall react-native-picker
npm install --save @react-native-community/picker

Now everything is working properly. Thanks for your help and time.