Text color is overridden to white when tested on a device with Android 10 in dark mode

user_1849833 0
Viewed 3119

In the following React Native (0.63.3) app, text color is black on the emulator as expected, but overridden to white when tested on a device with Android 10 in dark mode.

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {

  return (
    <View style={{flex: 1, backgroundColor: "#ccc"}}>
      <Text style={{color: "#000"}}>Test</Text>
    </View>
  );
  
};

export default App;

What should be done?

(It also overrides #333, #345 or similar dark shades to lighter colors. Border colors and more are overridden too but let's keep the question simple.)

react-native
2 Answers

Android Apps by default uses DayNight configuration that try to support both light and dark themes. android doc about dark themes . But it won't work well with theme overriding.

The solution is changing the app to only light mode.

Edit: android/app/src/main/res/values/styles.xml

replace this line:
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
with this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
user_43218670

Define default text color for android like so

Edit: android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
     <item name="android:textColor">#000000</item>
</resources>
user_118338450
Related