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

mrousavy commented 4 years ago

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 https://github.com/zoontek/react-native-bootsplash/issues/81.

There was a PR (https://github.com/zoontek/react-native-bootsplash/pull/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:

iOS demo android demo

bencIsTheGoat commented 4 years ago

+1 for this feature

stale[bot] commented 4 years ago

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 commented 4 years ago

still relevant.

TrustDec commented 3 years ago

+1 for this feature

danilobuerger commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@guyca yeah that could also be a solution.

aliraza-noon commented 3 years ago

@guyca start and stop could be more suitable IMO

a-eid commented 3 years ago

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

samzmann commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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