Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput dynamic color #20131

Closed
mmamoyco opened this issue Jul 10, 2018 · 26 comments
Closed

TextInput dynamic color #20131

mmamoyco opened this issue Jul 10, 2018 · 26 comments
Labels
Bug Component: TextInput Related to the TextInput component. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mmamoyco
Copy link

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.

@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Jul 10, 2018
@evasyuk
Copy link

evasyuk commented Jul 10, 2018

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
Copy link

SK-DNS-NET commented Aug 24, 2018

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.

simulator screen shot - iphone 8 - 2018-08-24 at 16 23 33

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

@andreechristian
Copy link

andreechristian commented Oct 29, 2018

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
Copy link
Contributor

kelset commented Feb 7, 2019

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

@eXist-FraGGer
Copy link

It also does not change on 0.58.4

@kelset
Copy link
Contributor

kelset commented Feb 22, 2019

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

@eXist-FraGGer
Copy link

eXist-FraGGer commented Feb 22, 2019

@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
Copy link

@chrismcleod
Copy link

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
Copy link

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

@chrismcleod
Copy link

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

@mickmaccallum
Copy link

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
Copy link

any update on this issue?

@MoOx
Copy link
Contributor

MoOx commented Apr 3, 2019

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!

Untitled

@VladyslavKochetkov
Copy link

VladyslavKochetkov commented Apr 9, 2019

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
Copy link
Contributor

MoOx commented Apr 9, 2019

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

@Grom-S
Copy link

Grom-S commented Jun 3, 2019

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
Copy link
Contributor

kelset commented Jun 3, 2019

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
Copy link
Contributor

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

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

@sFrady20
Copy link

sFrady20 commented Jun 29, 2019

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
Copy link

vforvasile commented Oct 9, 2019

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
Copy link

stale bot commented Jan 7, 2020

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 7, 2020
@MoOx
Copy link
Contributor

MoOx commented Jan 7, 2020

Still not fixed afaik

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 7, 2020
@kelset
Copy link
Contributor

kelset commented Jan 7, 2020

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

@hramos hramos added Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. and removed Resolution: Needs Repro labels Jan 18, 2020
@stale
Copy link

stale bot commented Apr 17, 2020

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 17, 2020
@kelset
Copy link
Contributor

kelset commented Apr 20, 2020

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 😊

@kelset kelset closed this as completed Apr 20, 2020
@facebook facebook locked as resolved and limited conversation to collaborators Apr 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests