React-native: [TextInput] when use secureTextEntry=true in TextInput, can't modify textInput's text color

[MrSeaWave]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

react-native info

React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
      Memory: 2.15 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 26, 27, 28
        Build Tools: 26.0.3, 27.0.3, 28.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
      react-native: 0.57.4 => 0.57.4 
    npmGlobalPackages:
      react-native-cli: 2.0.1

package.json

{
  "name": "TemReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.0",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },
  "jest": {
    "preset": "react-native"
  }
}

Description

when I use secureTextEntry=true, I can't change the text color dynamically,

when I use secureTextEntry=false, it's my expect ,but I can't understand why secureTextEntry=true is wrong

Reproducible Demo

the code is

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

import React, { Component } from 'react'
import { TextInput, View } from 'react-native'

class TestTextInputSecureTextEntry extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }
  }
  render() {
    const { value } = this.state
    const color = value === '123456' ? 'green' : value==='1234' ? 'red' : 'black'
    console.log('this.state.value:',this.state.value)
    console.log('color:',color)
    return (
      <View style={{ backgroundColor: '#ccf', justifyContent: 'center', alignItems: 'center',flex:1 }}>
        <TextInput
          // selectionColor={color}
          style={{ color: color, borderBottomWidth: 1, borderColor: color,width:'100%' }}
          secureTextEntry={true}
          value={value}
          onChangeText={text => {
            this.setState({ value: text })
          }}
        />
      </View>
    )
  }
}

export default TestTextInputSecureTextEntry

[bartolkaruza]

This seems to be the default behaviour for UITextField at the native level. You can work around this if you really require it, by implementing your own 'bullet replacing' logic on a TextInput on JS side. The approach would be showing a transparent TextInput over a Text or something using a non-secure TextInput and keeping track of real and bulleted text separately. The IMO hacky workarounds at the native level do not look like something that will actually land on react native.

[ericlewis]

Fixed: #23524.

[web-bizz]

I've got same issue on the latest version(0.59.2). It seems it's not been fixed yet.

[todorone]

@ericlewis Fix You provided did not fix this issue, please reopen it as it's still relevant. Thanks.

[kelset]

Eric's fix is not in 0.59, but it will be present in 0.60.

[sostenesg7]

use: this.yourTextInputRef.forceUpdate()