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.
Make sure in app.json, the userInterfaceStyle is set to ‘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
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.