React Native Launch/Splash Screen best practices?

Question

I hope everyone is safe during these times. I have been working on React-Native for quite some time now and I still seem to be facing issues with the launch and splash screen.

As per my requirements I need to have a launch screen and then a splash screen, the behavior is that if you haven't opened the app yet on your phone it will show you the launch screen and then the splash screen (two separate assets).

I have built two assets with the same dimensions and have used a package called react-native-splash-screen to achieve this behavior but even with the same dimensions for the assets my launch screen and splash screen end up rendering differently.

The package uses .xib files for iOS and I feel like Storyboard would be a better fit for this use case, but even when using storyboard I am having trouble making my asset scale across devices (it could be good for iPhone 11 but not good with iPhone 8 for example), I did use constraints but to be honest even after trying many times I can't seem to get it perfect.

I know launch screens and splash screens are in most apps out there today, but can someone help me or point me in the right direction to implement this with the best practices especially with React-Native?

Thank you very much.

Answer 1

I have been researching the same topic myself. There is a newer package available that uses storyboards instead. It is called react-native-bootsplash. If you are going to stick with using a package, I would reccommend this one instead because it is more recently maintained.

Answer 2

You can follow this article to add splash screen this is correct way to implement splash screen splash-screen-in-react-native i used this way in all of my apps