Android <Text> color becomes invisible when switching back to initial state

[syntag]

Description

This happens on react-native: 0.63.2 on Android.

color is visible initially, however, when you dynamically update a state to change the color of and then revert it back by changing the state, the text will become invisible. This did not happen on react-native: 0.62.2 and previous versions. Android forgets what its initial color was unless you explicitly set the default color.

I also thought it might be my default Android theme, but here is what I have for that:
/android/app/main/res/values/styles.xml

<resources>
 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 <!-- Customize your theme here. -->
 <item name="android:textColor">#000000</item>
 </style>
</resources>

React Native version:

System:
 OS: Windows 10 10.0.18363
 CPU: (12) x64 Intel(R) Core(TM) i7-8086K CPU @ 4.00GHz
 Memory: 33.62 GB / 63.93 GB
 Binaries:
 Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
 Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
 npm: 6.14.5 - ~\AppData\Roaming\npm\npm.CMD
 Watchman: Not Found
 SDKs:
 Android SDK: Not Found
 IDEs:
 Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6626763
 Languages:
 Java: 12.0.2 - /c/Program Files (x86)/Java/jdk-12.0.2/bin/javac
 Python: 2.7.14 - /c/Users/Steven/.windows-build-tools/python27/python
 npmPackages:
 @react-native-community/cli: Not Found
 react: 16.13.1 => 16.13.1
 react-native: 0.63.2 => 0.63.2
 npmGlobalPackages:
 *react-native*: Not Found

Steps To Reproduce

Example code:

let active = false;
<Text style={active ? { color: 'green' } : null}>Example</Text>

1. "Example" text is initially black (default color) and visible since active is false
2. Set active state to true to toggle text color to green.
3. Then set active state back to false, the text color is now invisible.

Expected Results

What I expect to happen is for the text to return back to its original color before the state was changed.

Snack, code example, screenshot, or link to a repository:

react-native (0.63.2):

import * as React from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';

export default function App() {
 const [active, setActive] = React.useState(false);

 return (
 <View >
 <Text style={active ? {color: 'green'} : null}>Example</Text>

 <TouchableOpacity onPress={() => setActive(!active)}>
 <Text>Toggle Active</Text>
 </TouchableOpacity>
 </View>
 );
}

[safaiyeh]

Thanks for the issue @syntag. This is odd behavior... seems to be introduced in 0.63. Thanks for the code snipet.

[hank121314]

Hi @safaiyeh and @syntag .
I have made a pr to fix this issue.
Would you please help me to test it?

[safaiyeh]

Awesome @hank121314! I'll check this out tomorrow. @ me if I don't give an update as I promised

[effektsvk]

@safaiyeh Hello, I believe I stumbled upon this issue as well, although for me it's happening with the tintColor prop on Image component. Any chance the PR is getting merged? Thanks. 🙏

edit: I tried to patch node_modules with the change in PR but it didn't help, so I guess this is a different issue.

[hank121314]

Hi @effektsvk !
I think this should be a related issue.
How did you patch node_modules with the change in PR?
Did you use building from source?
And also thanks for your testing!