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

React

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.

normal

Here’s how I did it.

Changing the RootView background color for iOS.

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

step1

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.

tada

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!

  • Roman

    On Android can be done too in a similar way:

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

    Documentation for Color Class: http://developer.android.com/intl/es/reference/android/graphics/Color.html

    • 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.graphics.Color;
        import android.view.View;

        @Override
        public void setContentView(View view){
        super.setContentView(view);
        getWindow().getDecorView().setBackgroundColor(Color.BLACK);
        }

        • 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

    MainActivity.java has changed. The following works for RN > 0.21 :

    @Override
    protected ReactRootView createRootView() {
    ReactRootView mReactRootView = super.createRootView();
    mReactRootView.setBackgroundColor(0xFF000000);
    return mReactRootView;
    }

  • cooperka92

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

    “`

    @drawable/splashScreen

    “`

    • 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?


Like What You See?

Got any questions?