React-native: Picker.Item with element value crashes (re-opening #17812)

[simonbuchan]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 6.12.3
Yarn: 1.3.2
npm: 3.10.10
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3

Steps to Reproduce

After react-native init, replace App.js with:

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Picker>
          <Picker.Item label="foo" value={<Text>Boom</Text>} />
        </Picker>
      </View>
    );
  }
}

Expected Behavior

I would like to get the element to render from Picker#onValueChange.

Actual Behavior

When testing in android emulator, crashes on startup (i.e. closes and shows "ProjectName has stopped" dialog)

> adb logcat *:S ReactNativeJS
--------- beginning of system
--------- beginning of main
02-25 20:55:25.190 27763 27818 I ReactNativeJS: Running application "ReactNativePickerItemCrash" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
02-25 20:55:25.276 27763 27818 E ReactNativeJS: RangeError: Maximum call stack size exceeded.
02-25 20:55:25.276 27763 27818 E ReactNativeJS:
02-25 20:55:25.276 27763 27818 E ReactNativeJS: This error is located at:
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in AndroidDialogPicker (at PickerAndroid.android.js:107)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in PickerAndroid (at Picker.js:160)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in Picker (at App.js:8)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in View (at App.js:7)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in App (at renderApplication.js:35)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in View (at AppContainer.js:102)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in View (at AppContainer.js:122)
02-25 20:55:25.276 27763 27818 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
02-25 20:55:25.528 27763 27818 E ReactNativeJS: { [Error: C++ exception in 'nativeFlushQueueImmediate'
02-25 20:55:25.528 27763 27818 E ReactNativeJS:
02-25 20:55:25.528 27763 27818 E ReactNativeJS: Malformed calls from JS: field sizes are different.
02-25 20:55:25.528 27763 27818 E ReactNativeJS:
02-25 20:55:25.528 27763 27818 E ReactNativeJS: [[19,29],[2,2],[["RangeError: Maximum call stack size exceeded.\n\nThis error is located at:\n    in AndroidDialogPicker (at PickerAndroid.android.js:107)\n    in PickerAndroid (at Picker.js:160)\n    in Picker (at App.js:8)\n    in RCTView (at View.js:71)\n    in View (at App.js:7)\n    in App (at renderApplication.js:35)\n    in RCTView (at View.js:71)\n    in View (at AppContainer.js:102)\n    in RCTView (at View.js:71)\n    in View (at AppContainer.js:122)\n    in AppContainer (at renderApplication.js:34)",[[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"],"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false",["file"],["isValidArgument"],"isValidArgument",["methodName"],[2251],2251,["lineNumber"],[67],67,["column"],["file","methodName","lineNumber","column"],["http://10.0.
02-25 20:55:25.574 27763 27818 E ReactNativeJS: RangeError: Maximum call stack size exceeded.
02-25 20:55:25.574 27763 27818 E ReactNativeJS:
02-25 20:55:25.574 27763 27818 E ReactNativeJS: This error is located at:
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in AndroidDialogPicker (at PickerAndroid.android.js:107)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in PickerAndroid (at Picker.js:160)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in Picker (at App.js:8)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in View (at App.js:7)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in App (at renderApplication.js:35)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in View (at AppContainer.js:102)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in RCTView (at View.js:71)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in View (at AppContainer.js:122)
02-25 20:55:25.574 27763 27818 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
--------- beginning of crash

Reproducible Demo

From the previous issue, https://snack.expo.io/BJ7CILeUM but Snack behavior is a little different, it complains about missing a render() method, but converted to using a component class, the error shows:

Device: (21:2525) Error: C++ exception in 'nativeFlushQueueImmediate'

Exception creating JSON string: JSON.stringify cannot serialize cyclic structures. (<unknown file>:21)

This error is located at:
    in AndroidDialogPicker
    in t
    in t
    in RCTView
    in Unknown
    in WrappedComponent
    in t
    in r
    in RCTView
    in RCTView
    in t

[hramos]

According to the source code, Picker.Item's value should be an integer or a string. It has no mention of an element being supported here.

Closing as this appears to be working as intended.

[simonbuchan]

Crashing the app is working as intended?

[hramos]

I've already pointed out the error in your code. I think that speaks for itself.

[simonbuchan]

Are you for real right now? If you threw an exception, sure. If you rendered garbage, sure. If you did literally anything other take down the entire app so hard it can't even send a crash report, sure.
I think the fact that I had to spend like an hour reducing this test case speaks for itself.