React-native-picker-select: [Android] Error while updating property 'color' in shadow node of type: AndroidTextInput

[ShaharyarMaroof]

Describe the bug

Passing color prop to textInputProps on android crashes the app.

com.facebook.react.bridge.JSApplicationIllegalArgumentException Error while updating property 'color' in shadow node of type: AndroidTextInput 
    ViewManagersPropertyCache.java:121 com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp
    ViewManagerPropertyUpdater.java:156 com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty
    ViewManagerPropertyUpdater.java:60 com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps
    ReactShadowNodeImpl.java:319 com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties
    UIImplementation.java:265 com.facebook.react.uimanager.UIImplementation.createView
    UIManagerModule.java:463 com.facebook.react.uimanager.UIManagerModule.createView
    Method.java:-2 java.lang.reflect.Method.invoke
    JavaMethodWrapper.java:372 com.facebook.react.bridge.JavaMethodWrapper.invoke
    JavaModuleWrapper.java:158 com.facebook.react.bridge.JavaModuleWrapper.invoke
    NativeRunnable.java:-2 com.facebook.react.bridge.queue.NativeRunnable.run
    Handler.java:873 android.os.Handler.handleCallback
    Handler.java:99 android.os.Handler.dispatchMessage
    MessageQueueThreadHandler.java:29 com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage
    Looper.java:214 android.os.Looper.loop
    MessageQueueThreadImpl.java:232 com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run
    Thread.java:764 java.lang.Thread.run

Caused by: java.lang.ClassCastException java.lang.String cannot be cast to java.lang.Integer 
    ViewManagersPropertyCache.java:294 com.facebook.react.uimanager.ViewManagersPropertyCache$BoxedIntPropSetter.getValueOrDefault
    ViewManagersPropertyCache.java:106 com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp
    ViewManagerPropertyUpdater.java:156 com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty
    ViewManagerPropertyUpdater.java:60 com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps
    ReactShadowNodeImpl.java:319 com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties
    UIImplementation.java:265 com.facebook.react.uimanager.UIImplementation.createView
    UIManagerModule.java:463 com.facebook.react.uimanager.UIManagerModule.createView
    Method.java:-2 java.lang.reflect.Method.invoke
    JavaMethodWrapper.java:372 com.facebook.react.bridge.JavaMethodWrapper.invoke
    JavaModuleWrapper.java:158 com.facebook.react.bridge.JavaModuleWrapper.invoke
    NativeRunnable.java:-2 com.facebook.react.bridge.queue.NativeRunnable.run
    Handler.java:873 android.os.Handler.handleCallback
    Handler.java:99 android.os.Handler.dispatchMessage
    MessageQueueThreadHandler.java:29 com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage
    Looper.java:214 android.os.Looper.loop
    MessageQueueThreadImpl.java:232 com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run
    Thread.java:764 java.lang.Thread.run

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

N/A

Additional details

• Device: Google Pixel Simulator; Samsung A6 Device
• OS: Android 9
• react-native-picker-select version: 6.3.3
• react-native version: 16.8.6
• react version: 0.60.6

Reproduction and/or code sample

      <RNPickerSelect
        style={pickerSelectStyles}
        placeholder={{
          label: `${placeholderText}`,
          value: null
        }}
        key={items.length}
        Icon={() => <PickerIcon color={color} />}
        textInputProps={{
          fontSize: Fonts.size.medium,
          padding: 0,
          margin: 0,
          fontFamily: 'TTCommons-Regular',
          maxFontSizeMultiplier: 1.1,
          color: isEmptyOrNil(value) ? '#C7C7CD' : Colors.black // this causes the issue on android
        }}
        useNativeAndroidPickerStyle={false}
        value={value}
        onValueChange={onValueChange}
        onDonePress={onDonePress}
        items={items}
        disabled={isDisabled}
      />

[lfkwtz]

what does Colors.black reference?

[ShaharyarMaroof]

black color code #000000

[lfkwtz]

what happens on the standard TextInput component?

[ShaharyarMaroof]

If I don't pass the color prop it works fine. But I need to change the color of the dropdown text, so I passed the color prop with the HEX code. For ios it runs correctly but on android I'm getting the exception and the app crashes.

[lfkwtz]

sounds like an upstream issue then

[ShaharyarMaroof]

@lfkwtz but if Im using a react-native text component, then it should also crash if I set color right? That works correctly. I don't know where java.lang.String cannot be cast to java.lang.Integer conversion is happening.

[lfkwtz]

You said the native TextInput crashes. This library is using it under the hood. Not sure about Text but that wouldn’t be relevant.

[ShaharyarMaroof]

okay, any work arounds I can use to set color on android?

[lfkwtz]

Like I said - it’s an upstream issue. I’d search around for setting color on TextInput. You’ll find more resources that aren’t tied to this library. Maybe try nesting within the style prop.

[ShaharyarMaroof]

cool, thanks!

[ShaharyarMaroof]

@lfkwtz as you suggested, setting the color prop through style on android fixes the issue. thanks!