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

December 1, 2015
RNbackgroundcolors (1)

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.

white blip

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

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

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:

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

    protected void onCreate(Bundle savedInstanceState) {
        mReactRootView = new ReactRootView(this);
        /* Injected the below line */
        mReactRootView.setBackgroundColor( Color.parseColor("#000000") );
        mReactInstanceManager = ReactInstanceManager.builder()
                .addPackage(new MainReactPackage())

        mReactRootView.startReactApplication(mReactInstanceManager, "ClubReadyApp", null);


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!

jay copy
Jay Garcia is co-founder and managing director at Modus Create. He is a U.S. Air Force veteran with 20 plus years of technology and consulting experience in leading RIA development for companies around the world. He is co-organizer of the NoVa.JS and NYC.JS meetups, and is actively involved in the software communities that provide business frameworks and technologies, which enable rich mobile and desktop web experiences.

  • Roman

    On Android can be done too in a similar way:

    mReactRootView = new ReactRootView(this);
    mReactRootView.setBackgroundColor( Color.parseColor(“#000000”) );

    Documentation for Color Class:

    • ModusJesus

      Thank you so much, @disqus_BE6sPQutCH:disqus. I’m going to update the article to include this information.

      • vanna

        The information in the article seems incomplete. You have to override some additional methods to handle lifecycle of mReactRootView and mReactInstanceManager or else the application will crash on start (experienced with latest RN 0.21). The following works like a charm :

        import android.view.View;

        public void setContentView(View view){

        • ModusJesus

          The information in this article was written pre- React Native .21. It’s not incomplete.

      • vanna

        For RN > 0.21 the original issue is resolved on both platform with Navigator and sceneStyle={{backgroundColor: “black”}}

        • ModusJesus

          Thanks @disqus_Bm0OUKaPu4:disqus! yes. This was published 1/1/2015, well before .21 :)

  • vanna has changed. The following works for RN > 0.21 :

    protected ReactRootView createRootView() {
    ReactRootView mReactRootView = super.createRootView();
    return mReactRootView;

  • Andrey Nikishaev
  • cooperka92

    This guide is out of date for Android. Now you can simply set your AppTheme in styles.xml:




    • Sibelius Seraphini

      this is not working

      • Kevin

        @sibeliusseraphini:disqus to use this method you need to create your splash screen first at `res/drawable/splashScreen.xml`.

        • Gerard Balanza

          What do you put in the splashScreen.xml file in order to not be white loading or white transitions?

What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.


We're Hiring!

Join our awesome team of dedicated engineers.