I finished my second React Native app, and on android emulator, it looked great. But soon after I published it to Google play store, I noticed a weird thing. It was not looking like the one from emulator. Colors were inverted and I didn’t knew why. So, if you are looking for a way to disable color inversion, you are in the right place.

why did I do this?

As clear from the above images, the image on the left is the one I want for my app, regardless of the device’s theme. Image on the right was the one, I got in my device on dark mode. It looked bad. So, I disabled the dark mode on devices. It will only show the Light Theme.

How did I prevent color inversion?

For this, you need to do couple of things.

1. Expo run:android

For the first step, you need to run expo run:android to get the android folder in your React Native app’s structure. We need the android folder to make some changes, in order for it to work (Believe me, I scratched my head for this).

Now, make sure you have android folder within your React Native Project.

2. Disable Dark Mode

Go to android -> app -> src -> main -> res -> values -> styles.xml and paste this code, within the style tag.

 <item name="android:forceDarkAllowed">false</item>

3. App.json

Make sure in app.json, the userInterfaceStyle is set to ‘light’.

 "userInterfaceStyle": "light"

4. UI Flag

Ensure that the uiMode flag is present in your android’s MainActivity in AndroidManifest.xml:

<activity
...
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">

5. Expo system ui

You will also need to install the native module expo-system-ui otherwise the userInterfaceStyle property will be ignored. You can also paste the following line of code, to check if the project is misconfigured.

expo config --type introspect

Conclusion

These are the few tips that I implemented in my own app. Now, I only get desired color for my app, regardless of the device’s theme. You can also implement these to force the dark background.