Feature request: react-native-navigation support

[Tracklous]

💻 My environment

• react-native-bootsplash version: 0.1.1
• react-native version: 0.60.4
• Platform: Both
• OS version: IOS 12.3 / Android Pie
• Device: Iphone 8 simulator
• Simulator: yes
• Android Studio version: 3.4.x
• Xcode version: 10.3
• React-Native-Navigation: V3 Alpha 11

🕵️‍♂️ Issue is splash screen fluctuates once when JS screen gets mounted..

I followed all your steps but its still happening. Please let me know what to do. I'm using react native navigation. I'm guessing due to react-native-navigation this is happening. Please let me know how to deal with it. Looking forward for your response. Thanks!

[MoOx]

Seems to be a dup of #12

[zoontek]

No, it does not. react-native-navigation system is too complex and too different from classic RN native view handling.

[Tracklous]

Yah! but then how react-native-splash-screen works well with RNN also ?? Is your lib way diff. than react-native-splash-screen implementation ??

[zoontek]

@Tracklous Yes, the implementation is different. I'll take a look at react-native-navigation and see if I can create instructions for it.

[vorasudh]

Is there a solution for this yet? I am using React Native Router Flux which is based on React-Navigation.

I started using this library over react-native-splash-screen because README said no fluctuations.

[maxKimoby]

+1, Screen flashes white after hiding splash and loading Js. Using react-navigation

[zoontek]

@maxKimoby If it's happen with react-navigation (only JS lib), you surely missed a step in the install guide

[rabanos-rvc]

up

[vorasudh]

@maxKimoby If it's happen with react-navigation (only JS lib), you surely missed a step in the install guide

Which step do you think is missed?

[vinurs]

is there any solution for this

[zoontek]

@vinurs Didn't have the time to check, as I'm not using react-native-navigation. I would be happy if someone can help on this.

[kevinranks]

Hope someone can help with this!

[MatthewPattell]

Hello everyone.
Try my hot fix

Android 21+
IOS 9+

See README.md for details.

If it works, I will create PR

[rtman]

@MatthewPattell @zoontek any chance we can get a fix for this?

[ninjz]

@MatthewPattell Thanks, this hotfix worked for me. Please submit a PR!

[zoontek]

I studied the case a bit and the solution provided in #49 does not suit me: it creates a bunch of usages issues.
I'm closing this and added a warning in the README: 35cdf62

[zoontek]

I have not tested it yet, but version 2.0.2 should supports react-native-navigation just fine: https://github.com/zoontek/react-native-bootsplash/releases/tag/2.0.2

[olegdev]

Please provide some instructions of how to..
My AppDelegate.m with RNN looks like this:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>

@implementation AppDelegate

• (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

  return YES;
  }

• (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
  {
  #if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif
  }

@EnD

[arun057]

Any updates here?

[thobiasn]

Can you provide an updated example of how to configure AppDelegate.m while using react-native-navigation?

[DovletAmanov]

Is there any instructions to implement this lib alongside with react-native-navigation? Thanks in advance.

[mikepaszkiewicz]

@zoontek Is there a guide for how to do this in version 2.0.2? Thanks in advance!

[kiran-kumar011]

@zoontek does it supports @react-navigation/native and @react-navigation/stack.

let me know how to make this work with the above packages because i'm not using react-native-navigation.

[MoOx]

@kiran-kumar011 it just work with react-navigation without any particular setup (just follow the readme).

[todorone]

I have not tested it yet, but version 2.0.2 should supports react-native-navigation just fine: https://github.com/zoontek/react-native-bootsplash/releases/tag/2.0.2

Hi @zoontek

It's not clear how to initialize RNBootsplash. When using RNN, we don't have access to rootView, so we can't call:
[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

Can we make somehow rootView parameter optional to make it work with RNN?

If You can give a hint/direction where to move, i'd be super grateful.
Thanks.

[ghiculescualexandru]

@todorone Have you managed to initialize it?

[todorone]

@ghiculescualexandru Unfortunately, no. Seems it does not work well with RNN.

[zoontek]

@todorone @ghiculescualexandru Unfortunately react-native-navigation is not "standard" react-native. They don't expose their internally created RCTRootView.

There's an opened issue on their side: wix/react-native-navigation#6535
And also an open discussion about Android SplashsScreen API: wix/react-native-navigation#7363

It seems they have an (undocumented) splash screen implem on iOS:

• https://github.com/wix/react-native-navigation/blob/master/lib/ios/RNNSplashScreen.m
• https://github.com/wix/react-native-navigation/blob/master/lib/ios/ReactNativeNavigation.m#L65

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
[ReactNativeNavigation bootstrapWithBridge:bridge]; // <- should show their RNNSplashScreen

I personally recommend switching to react-navigation v6 + @react-navigation/native-stack (using react-native-screens). Native navigation without the clunkyness.