Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

App flashing white after launch screen on iOS 11?

Tags:

react-native

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?

like image 201
j3491 Avatar asked Oct 29 '25 08:10

j3491


2 Answers

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
like image 154
j3491 Avatar answered Oct 31 '25 01:10

j3491


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

like image 27
Harshal Valanda Avatar answered Oct 31 '25 01:10

Harshal Valanda



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!