Android <Text> color becomes invisible when switching back to initial state #29717
Description
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>- "Example" text is initially black (default color) and visible since
activeis false - Set
activestate to true to toggle text color to green. - Then set
activestate 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>
);
}