App flashing white after launch screen on iOS 11?

Question

Since I updated my phone to iOS 11 I have noticed that my React Native app briefly (<0.5s) flashes to white between the launch screen and the first screen of the app. Thi

Answer 1

Ok, I think I found the issue. In AppDelegate.m, the rootView has a white background color as default, and when I start the app it transitions from: Launch screen -> rootView -> React Native view.

On iOS 10 I never saw the rootView flash by, but on iOS 11 there seems to be a short delay before the RN view is loaded. I'm not sure why this happens on iOS 11 and not 10, but you can solve this by either:

1. Set a background color on rootView to match the launch screen.
2. Set the launch screen as background of rootView. Here is a guide: https://peterminarik.tumblr.com/post/153039209421/how-to-fix-the-initial-white-flash-in-your-react

Answer 2

you may start to see a white screen flash between your splash screen and the display of your root application view. try this

set your launch screen as RCTRootView loading view

AppDelegate.m

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;

More info

https://facebook.github.io/react-native/docs/running-on-device#pro-tip