Remove that blue color from your React Native applications
--
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 react-native-window-tint-color comes into play, this custom module will allow you to update the iOS key window colour to anything you wish for from your JavaScript environment. Giving you full control when to theme your app.
