3

I've been searching for a while now and I have not found anything on how to add a launch/splash screen to my android app with react-native.

I've seen many examples of how to do this for iOS, but I also need it to work with android. I'd love something that can work cross-platform but if that is not possible with current react-native, I can implement it for both. I've also seen a way to do it with java, but I would really prefer not tainting my app with java code, trying to keep as much as I can written in react.

Would anyone know how this could be done?

Ryan Wilson
  • 1,743
  • 3
  • 15
  • 26
  • 1
    Possible duplicate of [How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)](http://stackoverflow.com/questions/33390013/how-to-create-some-kind-of-splash-screen-launching-screen-which-disappears-afte) – Jesús Carrera Jan 08 '17 at 19:05

1 Answers1

2

Splash screens are a built-in feature of iOS apps - you can't not have a splash screen on iOS.

However, generally Android apps don't have them. The apps that do tend to simulate it by having an image that displays for a couple of seconds when they first start.

That's pretty easy to do in react-native (use a setTimeout with setState({showSplashScreen:false}) or similar. Wrap it in a check for Android, and you're there.

EDIT: As the OP points out in the comments, this causes a 'white flash' while the app is loading, so it looks like for now the best solution is to use a plugin or custom Java code.

Ben Clayton
  • 80,996
  • 26
  • 120
  • 129
  • Thanks for the input, but whenever I do that it shows a white screen for a split second then the image. I do know there has to be a way to do it correctly because I have seen it in many apps. For example, the Weather Underground app doesn't show any white, as soon as you click it you see the image, also with Shazam and plenty others I have seen. However I have notice that the Facebook and Instagram apps (I assume they are using react-native since Facebook wrote it) show the white for a moment then load. So this could be an issue or something with react-native. – Ryan Wilson Feb 11 '16 at 20:35
  • Ah. Good point about the 'white flash' - most likely due to react native's async rendering. In that case your best best is most likely an android-only plugin, or to 'taint' your code with Java. – Ben Clayton Feb 11 '16 at 20:42
  • By the way, Facebook doesn't yet use react-native for the main Facebook app. I believe the other apps you mentioned are written in Java with the Android SDK too. – Ben Clayton Feb 11 '16 at 20:43
  • Ah, well good to know. I thought this much, I'm trying to keep it as much react-native as I can but from everything I've seen, looks like I might need to use some java if I want this splash screen. I appreciate the help though. – Ryan Wilson Feb 11 '16 at 20:59
  • The Facebook F8 app uses a splash screen for iOS and none for Android. On iOS, the splash screen is followed by a blank white screen for a moment before moving on to the main screen. On Android, there is a blank white screen on startup before the main screen. I've implemented a splash screen on my Android app and I get similar behaviour of splash screen => white screen => main screen... so I'm wondering if that white screen is _not_ a screen that's rendered by my app that I can control. – Ryan H. Jul 08 '16 at 16:54