question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Splash screen appears below JS content when using react native navigation

See original GitHub issue

I started using [RNSplashScreen showSplash]; and it was working great, however, I didn’t know that this method is blocking the thread with a while loop. This caused for some listeners and callbacks (for example, branch) to not be called only after hiding the splash screen.

After understanding this, I started using [RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];. However, it appeared for a second but when setting the rootScreen using RNN it disappeared because the JS content appears on top of it.

In order to fix it, I did this:

_window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
_window.backgroundColor = [UIColor clearColor];
_window.userInteractionEnabled = NO;
_window.rootViewController = rootViewController;
rootViewController.view.userInteractionEnabled = NO;

[RNSplashScreen showSplash:@"LaunchScreen" inRootView: rootViewController.view];
  
[_window setHidden:NO];

And now I see the splash screen until using hide();.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:9

github_iconTop GitHub Comments

4reactions
Rotemycommented, Mar 11, 2020

Yes I created a new ui view controller.

Here is my full code

// The only way to show the splash screen over the JS ui and without blocking the thread
  rootViewController = [UIViewController new];

  _window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  _window.backgroundColor = [UIColor clearColor];
  _window.userInteractionEnabled = NO;
  _window.rootViewController = rootViewController;
  rootViewController.view.userInteractionEnabled = NO;

  [RNSplashScreen showSplash:@"LaunchScreen" inRootView: rootViewController.view];

  [_window setHidden:NO];
  
  t = [NSTimer scheduledTimerWithTimeInterval: 2.0 target: self selector: @selector(onHideSplashScreen) userInfo: nil repeats:YES];
 
  return YES;
- (void)onHideSplashScreen  {
  // I want to die for implementing this like that, but I don't have a choice right now :(
  if (rootViewController.view.subviews.count == 0) {
    [t invalidate];
    t = nil;
    [[[UIApplication sharedApplication] delegate] setWindow:mainWindow];
  }
}

and the LaunchScreen in this case is a xib that looks the same as the LunchScreen.storyboard I set up in the settings of the project

0reactions
pedrobadmcommented, Aug 17, 2022

I have this problem here, but happens only on Android, anyone can help me?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Splash screen appearing when navigating between views ...
The splash screen worded fine at the beginning but I changed it in between and the splash screen now appears when navigating between...
Read more >
Building a splash screen in React Native - LogRocket Blog
Learn how to build a splash screen in React Native for both iOS and Android apps, and edit its features, like background color....
Read more >
How to Add a Splash Screen to a React Native App (iOS and ...
First open the project in Xcode. ... Then go ahead and add the three images you downloaded earlier. They'll automatically attach themselves to...
Read more >
How to add a Splash Screen and an App Icon in React Native
Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen ...
Read more >
Using Hermes - React Native
Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found