Prevent white edges during orientation change

Question

I reproduce this issue with the most minimal React-Native app:

render() {
  return View({style: {
    flex: 1,
    backgroundColor: \'black\'
  }})
}
         


        

Answer 1

In the RootView of your app, the default background color is white. You can change this to another color by using the following steps:

In this example we'll set the background color to black on iOS.

Open AppDelegate.m located in PROJECT_DIR/ios/Appname/ for editing.

Locate snippet that looks similar to the following:

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

Add the following line of code immediately after the previous snippet:

rootView.backgroundColor = [UIColor blackColor];

The resulting code block should look like the following:

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

rootView.backgroundColor = [UIColor blackColor];

BAM! RootView background color is set on iOS!

This information and more is available from this blog post: Changing the React Native RootView Background Color (iOS and Android) by Jay Garcia. (I believe the Android information in this post may be out of date, which is why I didn't include steps for Android).

Hope this helps!