React-native: TextInput dynamic color

[mmamoyco]

Environment

React Native Environment Info:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) 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.

[andreechristian]

I am also encountering this issue. The text input cannot have it's style changed mid typing. I tried to apply 'key' to TextInput but since i am using uncontrolled input, i lost all of the input value.

[kelset]

Can anyone create a repro that shows the issue on latest (0.58.4)?

[eXist-FraGGer]

It also does not change on 0.58.4

[kelset]

@eXist-FraGGer perfect, can you create a repro for it?

[eXist-FraGGer]

@kelset Hm, not today, maybe at the end of next weekend.
I'll try, but I can't promise, because I don't have enough time.
This happens in my current project and of course, I can't share it

[CatapultJesse]

Unable to repro: https://snack.expo.io/@jkcooper/rn20131---textinput-dynamic-color

[chrismcleod]

Repro:

import { useState } from 'react';
import { TextInput } from 'react-native';

export const Test = () => {
  const [ color, setColor ] = useState('red');
  return (
    <TextInput
      style={ { color, borderWidth: 1, padding: 16 } }
      onBlur={ () => setColor('blue') }
    />
  );
};

[CatapultJesse]

@chrismcleod Can you repro in a non-hooks version? v0.59 is not officially released yet

[chrismcleod]

@CatapultJesse I tried the idiomatic equivalent using classes and it worked, so I was not able to reproduce using classes.

[0x7fs]

Perhaps this can be revisited now that 0.59.0 is out? I'm still having this issue / am able to reproduce with @chrismcleod's code.

[cinder92]

any update on this issue?

[MoOx]

I just faced this issue.
Here is an (not so easy) repro https://snack.expo.io/@moox/rn20131---textinput-dynamic-color
I faced this in my current - not public - app in both non secure & secure field. But could not reproduce with non secure field (I am using reasonml on top of rn so it might be a reason with an undefined or something...)
Hope this is enough to help!

[VladyslavKochetkov]

Just ran into this too using hooks

--EDIT--
Fixed it doing an effect onChangeText to update state, and setting the value with that value

--EDIT 2--
For some that don't want to use the update prop for performance reasons this will work just fine
inputRef.current.setNativeProps({text: inputRef.current._lastNativeText})

[MoOx]

(Issue label "needs repro" can probably be removed or replaced by "backlog" ^^)

[Grom-S]

Is there any workarounds? I need to change color of the password field, in case of an error. Any other way to do it?

[kelset]

Can anyone post a repro (not a Snack for now, it's still using Expo 32 = RN 57) using the first 0.60 RC?

[isaaclem]

I've created a very simple repro, basically conditionalStyle seems to be always returning false value?

@kelset @MoOx
https://snack.expo.io/ryXHyeWJH

[sFrady20]

This looks like it's only true for uncontrolled TextInput components

I was looking at the example provided by @CatapultJesse and i removed the value field from the text component and was able to repro.
example (working): https://snack.expo.io/@jkcooper/rn20131---textinput-dynamic-color
repro (broken): https://snack.expo.io/SyK61DEgr

Also on my own app, adding even just "value = 'test'" as a prop on my textInput solved the problem. as well as a controlled value from state

[vforvasile]

inputRef.current.setNativeProps({text: inputRef.current._lastNativeText})

It worked for me if I changed the text by adding a space after the actual text:

inputRef.current.setNativeProps({ text: '${inputRef.current._lastNativeText} ' });

[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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[MoOx]

Still not fixed afaik

[kelset]

I know it's a longshot, but has anyone tested this with the 0.62 RC0?

[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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[kelset]

Hello there 👋 this issue seems to have been inactive for a long time. Because of this, it's likely that the issue is not a high priority anymore or it has been solved by OP; for these reasons, we'll close it.

But please, if it's actually still an issue with 0.62 please open a new issue that follows the template and provides a repro 😊