Throwing multiple exceptions when opening View on Android

[monotv]

Versions: Android 7

"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-textinput-effects": "^0.4.1"

First exception:

Exception in native call
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'backgroundColor' in shadow node of type: AndroidTextInput

Then:

Error while updating prop backgroundColor
com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but had type `string'

This finally crashes the app:

FATAL EXCEPTION: main
Process: com.xxx, PID: 30962
com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 94
detail: View tag:100
children(0): [
],
viewsToAdd(1): [
[0,94],
]

Android expects colors as int yet somewhow it is passed as a string it seems.

Looks like there is an issue with Animations in Android: https://github.com/facebook/react-native/issues/13984

[halilb]

Thanks for reporting @monotv.

I just tested this on a Android 7 device using the Example project. All text inputs are working fine.

Could you also test it with the Example project so we can make sure this is related with the library. The project is using react-native version 0.50.0 btw.

[csotiriou]

same here. Android 5.0, React Native 0.55.

[Dantalion]

Also crashing with unknown view tag exception for me. Android 7.0 RN 0.55

[vinceprofeta]

@Dantalion & @csotiriou Still an issue?

[winadiw]

crashing in RN 0.56

[halilb]

What's the output of crash @winadiw?

[wizebin]

I encountered this same issue and did some troubleshooting

Primarily it seems to be a user error, in my case I was passing the backgroundColor prop to a hoshi component which does not use the backgroundColor prop, this is because I was trying several different components before settling on the hoshi

Passing the prop backgroundColor to the TextInput react native component causes a crash on android.

Changing the library code fixes this, but is not necessary, like so:

const {
  label,
  style: containerStyle,
  inputStyle,
  labelStyle,
  maskColor,
  borderColor,
  borderHeight,
  inputPadding,
  height: inputHeight,
  backgroundColor,
  ...restOfProps,
} = this.props;
const { width, focusedAnim, value } = this.state;
const flatStyles = StyleSheet.flatten(containerStyle) || {};
const containerWidth = flatStyles.width || width;

return (
  <View
    style={[
      styles.container,
      containerStyle,
      {
        height: inputHeight + inputPadding,
        width: containerWidth,
      },
    ]}
    onLayout={this._onLayout}
  >
    <TextInput
      ref={this.input}
      {...restOfProps}

This adds backgroundColor and ...restOfProps to the initial retrieval of props, then spreads that into the TextInput component instead of ...this.props

I can submit a PR to fix this if you'd like, but it seems likely that the user could simply stop passing backgroundColor in

[halilb]

Thanks for finding out the problem @wizebin. I'd like to merge that patch if you could create a PR. I agree that it sounds like a user error but I'd like to eliminate it as people keep experiencing that.

[AfanasievN]

Any progress on that? )