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

Question

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.)

Answer 1

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">