[TextInput][iOS 11] - Does not change the text color without focus.

Is this a bug report?

Yes, it seems like a Bug to me. Similar to #15650 and #14645

Changing the style has no effect. Only after the user focuses on the field does the color change.

iOS 9 works. iOS 10 not tested yet. iOS 11 not works.

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 6.11.3 Yarn: 1.0.2 npm: 5.4.2 Watchman: 4.9.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: EAP AI-171.4333198 AI-171.4333198

Packages: (wanted => installed) react: 16.0.0-alpha.12 => 16.0.0-alpha.12 react-native: 0.48.4 => 0.48.4

The problem also exists in RN 0.46.4.

Steps to Reproduce

Create a component that contains a TextInpt and two Buttons that change the color.

class Example extends Component {
    state = {
        color: '#ff0000'
    }
    render() {
        const style = { color: this.state.color };
        return (
            <View style={{ marginTop: 20 }}>
                <TextInput style={style} value='Some Text Here' />
                <Button onPress={() => this.setState({ color: '#0000ff' })} title="Blue" />
                <Button onPress={() => this.setState({ color: '#ff0000' })} title="Red" />
            </View>
        )
    }
}

Expected vs Actual Behavior

[shergin]

Not sure that we can fix this. I hope it will be fixed by Apple soon.

http://www.openradar.me/33104437 https://stackoverflow.com/questions/46178078/ios-11-public-beta-9-uitextfield-textcolor-cant-be-changed-when-no-keyboard

[douglasjunior]

Changing the font size also “force” the color update.

class Example extends Component {
    state = {
        color: '#ff0000',
        fontSize: 28
    }
    componentDidMount() {
        Splash.hide();
    }
    render() {
        return (
            <View style={{ marginTop: 20 }}>
                <TextInput style={{ color: this.state.color, fontSize: this.state.fontSize }} value='Some Text Here' />
                <Button onPress={() => this.setState({ color: '#0000ff', fontSize: 28, })} title="Blue" />
                <Button onPress={() => this.setState({ color: '#ff0000', fontSize: 28.05 })} title="Red" />
            </View>
        )
    }
}