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

Description

This happens on react-native: 0.63.2 on Android.

<Text> color is visible initially, however, when you dynamically update a state to change the color of <Text> 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>
  );
}

[preflower]

Is there any progress on this issue

[safaiyeh]

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