Search code examples
androidreact-nativeexpobackground-color

React native app has inverted colors on some phones

I start alpha tests of my reat natvie app and one of the testers reported to me that on his phone the app is looking like in dark mode:

enter image description here enter image description here

I am really surprised because my application does not have any dark mode functionality implemented and should look like this:

enter image description here enter image description here

Tester is using Xiaomi mi10 lite phone.

Most of my app screens has on top SafeAreaView with style like that:

  container: {
    flex: 1,
    backgroundColor: colors.secondaryColor,
  },

Where secondaryColor is '#abf0d1', sometimes backgroundColor is white like on second screenshot. Does anyone have any idea what this color-inverting thing could be caused by?

Solution

  • This is because MIUI 12+ version has an advanced feature in Dark mode for Individual apps, This feature turns the Light theme app with no dark theme support to a Dark theme layout by inverting the layout colors.

    If your app is only supporting Light theme you can prevent Force Dark mode by,

    add a new property to your main AppTheme in res/values/ resources styles.xml

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:forceDarkAllowed">false</item> // <-- add this 
  ...