Changing the React Native RootView Background Color (for iOS and Android)

Colour pencils-1” by David Blaikie under cc license

While developing my React Native KeyGen Music Player app for iOS, I decided to create a custom 90’s retro theme. This required me to change the launch screen and RootView to match. Without modifying the RootView, my app launched with a white flash because the default RootViewbackground color is white. Clearly, this was very unpleasant.

Currently, React Native doesn’t allow you to configure the RootView background color through JavaScript, so in order to overcome this limitation, I had to configure the RootView via Objective-C.

Here’s how I did it.

Changing the RootView background color for iOS.

We begin this process by editing AppDelegate.m with XCode.

Next, we have to find the line where the RCTRootView instance is being allocated within AppDelegate.m. It should look very similar to the snippet below.

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"KGMP"
initialProperties:nil
launchOptions:launchOptions];

In order to set the background color to black, we must insert the following line below the above snippet.

rootView.backgroundColor = [UIColor blackColor];

The resulting code block should look like the following.

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"KGMP"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [UIColor blackColor];

Next, we run the project, and voilà! It works like a champ.

All that was needed for my application was blackColor. Your application might require a custom color to initialize with. For that, you can configure full RGBA (Red Green Blue Alpha) values using floats.

For example:

rootView.backgroundColor = [[UIColor alloc] initWithRed:.01f green:.75f blue:.54f alpha:1];

For more information on the UIColor class, check out Apple’s documentation here. Also, if you’re mostly used to working with Hex colors and need RGB values, check out this neat web utility: http://uicolor.io/.

Updating the RootView background color for Android

To make this type of change in your Android project (thank you @Roman for the comment), you’ll need to open the MainActivity.java located in app/java/com.domain/ for editing.

Search for the following line within the onCreate method.

mReactRootView = new ReactRootView(this);

Next, inject the following line below.

mReactRootView.setBackgroundColor( Color.parseColor("#000000") );

The updated code block looks like the following.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
/* Injected the below line */
mReactRootView.setBackgroundColor( Color.parseColor("#000000") );
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
        mReactRootView.startReactApplication(mReactInstanceManager, "ClubReadyApp", null);
        setContentView(mReactRootView);
}

Check out the Color Class documentation for more information on how to use it.


If you liked this article, please hit the recommend (❤) button below. Want more like this? Follow Modus Create: Front End Development. If you have a question on what was covered, comment below or hit me up on Twitter!