Changing React Native RootView Background Color

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 RootView background 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.

Got a question on what was covered? Hit me up on Disqus below or via twitter!