AndroidTextInput throws error when color style is set to null

Description

I have written a small component under “Reproduction” to describe this.

If you have a special style which is pushed onto a base style on a TextInput field, where the base style doesn’t explicitly specify a “color” attribute but the special style does, then if the component re-renders from [ baseStyle, specialStyle ] to just [ baseStyle ] due to a setState() the following error is thrown. This happens only on the Android platform.

Error while updating property 'color' of a view managed by: AndroidTextInput

Reproduction

import React, { Component } from 'react'

import {
    StyleSheet,
    TextInput
} from 'react-native'

export default class Test extends Component {

    constructor(props) {
        super(props)
        this.state = {
            text: '',
            special: false
        }
    }

    render() {
        let style = [ styles.baseStyle ]
        if(this.state.special) style.push(styles.specialStyle)
        return <TextInput
                    style={ style }
                    value={ this.state.text }
                    onChangeText={ (text) => this.setState({
                        text: text,
                        special: !this.state.special
                    }) } />
    }
}

const styles = StyleSheet.create({
    baseStyle: {
        height: 50,
        // color: 'blue' <-- uncomment this code to make the problem go away
    },
    specialStyle: {
        color: 'red'
    }
})

Additional Information

• React Native version: $ react-native --version react-native-cli: 1.0.0 react-native: 0.35.0
• Platform: Android
• Operating System: macOS Sierra

[brentvatne]

I was able to reproduce with the above example. I enabled spy mode on the MessageQueue and checked logs to see what the issue was, it appears to be that the color cannot be set to null.

// After entering the first letter, a, we apply the "special" style and the text color becomes red
10-30 13:35:19.623 20202 20379 I ReactNativeJS: JS->N : UIManager.updateView([4,"AndroidTextInput",{"color":-65536,"text":"a"}])

// After entering the second letter, a again, we remove the "special" style and the text color becomes null
10-30 13:35:25.447 20202 20379 I ReactNativeJS: JS->N : UIManager.updateView([4,"AndroidTextInput",{"color":null,"text":"aa"}])

So, the easiest repro case is just to set the color on TextInput to null

[grabcode]

We’ve experienced the same issue, and the work around is to define the color and only conditionally change the value.

Context

react-native 0.52.2 Not working on Android only

Examples

Not working

<TextInput
  { ...someProps }
  style={[
    styles.address,
    !editable && { color: '#fff' }
  ]}
/>

Working

<TextInput
  { ...someProps }
  style={[
    styles.address,
    { color: !editable ? '#fff' : '#000' }
  ]}
/>