TextInput dynamic color

Environment

React Native Environment Info: System: OS: macOS Sierra 10.12.6 CPU: x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz Memory: 208.05 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.6.0 - /usr/local/bin/node Yarn: 1.3.2 - /usr/local/bin/yarn npm: 6.1.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2 IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 9.2/9C40b - /usr/bin/xcodebuild npmPackages: react: ^16.4.1 => 16.4.1 react-native: ^0.56.0 => 0.56.0 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Description

I have TextInput with dynamic changing color based on state.

<TextInput
                        style={[styles.input, {color: this.state.color}]}
                        value={this.props.value}
                        placeholder={this.props.inputProps.name}
                        onChangeText={(value) => {
                                if (this.props.onChangeText) {
                                    this.props.onChangeText(value);
                                }
                                this.setState({
                                    value: value
                                });
                                this.validate(value);
                            }
                        }
                    />

so when state changed textinput color not changing

 return this.setState({
            icon: valid ? "ios-checkmark-circle" : "ios-close-circle",
            color: valid ? SC_MAIN_COLOR : SC_ERROR_COLOR,
            valid: valid
        }, this.props.inputProps.onChangeValidity);

this worked before i upgraded from 0.49.5 to 0.56.0 If i manually change color on text input all is ok, so issue in dynamic color changing.

[evasyuk]

Have you tried to use Stylesheet.flatten(…) in order to find some workaround?

<Text style={StyleSheet.flatten([styles.textStyle,{color: 'red'}])}> Hello </Text>

const styles = StyleSheet.create({
   textStyle :{
      textAlign: 'center',   
      fontFamily: 'Arial',
      fontSize: 16
  }
  });

https://facebook.github.io/react-native/docs/stylesheet.html https://stackoverflow.com/questions/29363671/can-i-make-dynamic-styles-in-react-native

[SK-DNS-NET]

Same issue here. The Inspector of the Expo app displays the correct color attribute value of the TextInput component, but the rendering shows only the first color set.

Properties and style attributes of the TextInput component taken from react developer tools when text color is rendering in red:

{
  "placeholder": "000000.0",
   "value": "",
   "fontColor": "white",
   "placeholderColor": "#535353",
   "maxLength": 8,
   "fontSize": 34,
   "onChangeText": "[function onChangeText]",
   "style": [
     206,
     208,
     {
       "color": "white"
     }
   ],
   "allowFontScaling": true
 }

The screenshot of expo app on iOS simulator with inspector shows the TextInput component with the corresponding style attributes - red vs. white, style attributes vs. rendering.

Edit The dynamically set of attributes is running only one time.