CODEWITHSUNDEEP
react-native
j3491
j3491

Reputation: 495

App flashing white after launch screen on iOS 11?

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. This is extra noticeable since my app has a dark background and a dark launch screen.

I first thought I might have forgotten a view with a white background somewhere, but when I created a whole new app and set the launch screen to red and the background of the default App.js (Welcome to React native...) to red, this is very noticeable as well.

Just to be clear, this is happening with packaged release builds. I would accept some lag in debug builds when loading from the remote packager, but I didn't have this issue with release builds before.

Anyone else having this annoying problem?

Upvotes: 4

Views: 4633

Answers (2)

Harshal Valanda
Harshal Valanda

Reputation: 5451

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

Upvotes: 5

j3491
j3491

Reputation: 495

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

Upvotes: 8

Related Questions