[ENHANCEMENT] Add support for custom SplashScreens (like react-native-bootsplash)

[mrousavy]

Enhancement

Currently the only way to create SplashScreens is by modifying the native files (LaunchScreen.storyboard on iOS, and some theme switching magic on Android). While this works perfectly fine, it looks very stiff and some small animations would make the app feel more alive.

A solution for this would be to use the library react-native-bootsplash, which has a cool custom animation for removing the SplashScreen. Unfortunately, react-native-navigation does not support this library, see zoontek/react-native-bootsplash#81.

There was a PR (zoontek/react-native-bootsplash#49) which would add react-native-navigation support, but it was closed because it had some issues which could only be resolved via native code changes in react-native-navigation. (Specifically because it required usage of android:windowTranslucentStatus and android:windowBackground, and that would cause some issues)

Alternative

Alternatively, a pure react-native-navigation support for SplashScreens would also make a lot of sense. Example:

Navigation.setSplashScreen({
  source: '../splash.png',
  animations: {
    content: {
      // fade out
    },
    translateY: {
      // short slide out
    }
  }
});

Since the library already plays with the launch screen (see ReactNativeNavigation.m line 63, or RNNSplashScreen.m), I would guess it isn't that big of a change. For the animations, the existing animation API can be used, and some additional properties could be implemented with small changes (e.g. delay the hiding of the splashscreen for some amount of time so the JS view can load in the background)

---

And let's be honest, SplashScreen animations do make a huge difference:

[bencIsTheGoat]

+1 for this feature

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[mrousavy]

still relevant.

[TrustDec]

+1 for this feature

[danilobuerger]

The way I see it: there are a lot of splash screen libraries out there (react-native-bootsplash, react-native-splash-screen, expo-splash-screen, etc.). So obviously there is a need from the community for a solution to the problem. Then it depends on how we see a splash screen in relation to navigation (the goal we are trying to solve). If a splash screen is part of navigation then we should provide a "perfect" solution to the problem. If it's not, we should provide better integration points for those libraries. I don't see an advantage for us to reinvent the wheel. What could we do that others can't? A deeper integration? I can't think of anything right now. So I view our solution as a basic crutch to get from the mandatory (iOS) launch screen to a fully displayed rn view. The way we do that is to just display the content from the launch screen until everything from rn is ready (assuming waitForRender). I don't think we should improve on that but rather allow developers to turn this part off and plug in a solution that fits their need in the process.

A sample solution on iOS would be to extend our delegate and accept optional methods (start / stop of splash screen). If those methods are implemented, we turn RNNSplashScreen off.

[guyca]

If we want to make things really easy and avoid messing with native code - we can read a configuration closure declared in package.json and control the splash screen accordingly.

// in package.json
react-native-navigation: {
  showNativeSplashScreen: false // don't show RNNSplashScreen
}

Or do we actually need both start and stop methods?

[danilobuerger]

@guyca yeah that could also be a solution.

[aliraza-noon]

@guyca start and stop could be more suitable IMO

[a-eid]

it would be really cool to also control when to hide/show the splash screen.

[samzmann]

Is there a current solution/workaround for this? Im trying to setup react-native-bootsplash and running into issues which lead me here.

[a-eid]

@Lavielle you currently have to do it your self, once you setRoot ( or any any other action that shows something on the screen ), RNN hides the splash screen automatically.

[lukebrandonfarrell]

Splash screen support is something we should definitely consider for react-native-navigation. This is our go to library for all our projects, but configuring the splash screen to be "perfect" is still a huge bottleneck. Let me know where I can help out, I'd be willing to research for making a PR.

[guyca]

@lukebrandonfarrell You're welcome to join us on Discord to consult and coordinate this effort. We'd be happy to provide assistance.

[kylegillen]

Would be great to have animatable transitions.

Any progress on this? 😊

[randomBrainstormer]

+1 for this feature

[Yasir5247]

Any progress on this? 😊

[a-eid]

any updates on this ?

[TrustDec]

我已经收到你的邮件啦~,表着急,待我仔细查看

[ghiculescualexandru]

Is there any chance to make this feature available?

[JimTeva]

Would love this