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

[douglasjunior]

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

[ghost]

Not a solution, but adding multiline={true} seems to work. Any better workaround for this issue?

[shergin]

@joelandplus This is probably because multiline TextInput uses UITextView under the hood, whereas single line one uses UITextField.

[RomualdPercereau]

For now you can setState a new placeholder color to "force" the reload of the color.

[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>
        )
    }
}

[DiMaNacho]

original:

fontSize: 16

after event:

fontSize: 16.05

x.05 is the minimum value you need to force the color update.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.