While using React Native, don’t forget about the native part. Remember to theme the native views with your custom colours.
Have you ever created an app and noticed that blue blinking indicator shown above? What you are seeing is the iOS default accent colour, which is used in all of your native views.
An easy solution
Fixing it to match your app colour is very simple and requires almost zero knowledge of native development. All you have to do is go into your
/ios/projectname/ folder and open the
AppDelegate.m file. Once there, find the following lines:
Add the following line
_window.tintColor = yourCustomColor; just below the
backgroundColor one, this will signal your main application window to use this new accent color for all native views enclosed in it. The end result should look something like this:
That will pretty much solve it, your app is blinking your custom colour. If you don’t support multiple themes, you can stop here. But, most likely your app supports at least two (2) themes: light and dark mode.
Supporting multiple themes
Even though iOS has support for dynamic colours that will change depending if the app is running in dark or light mode, it won’t solve our issue. Your React Native app is not using this native API to theme them, neither it should; Supporting them won’t be compatible with your Android version.
In order to get around this, we need the ability to update your iOS key window (
_window in the previous code snippet) dynamically. We can achieve this with a custom module.
This is where