Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
December 1, 2015

Changing React Native RootView Background Color

Application Development

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!

Posted in Application Development
Share this

Jay Garcia

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

Related Posts

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

  • Using ES2016 Decorators in React Native
    Using ES2016 Decorators in React Native

    *picture courtesy of pixabay Decorators are a popular bit of functionality currently in Stage 1…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top