Related pickers crashes the app #25998
Description
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
- Run the code below
- Select
Bar > BarSub02then go back toFoo
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