How to Add a Splash Screen to a React Native App (iOS and Android)

How to add a splash screen to a React Native app (#iOS and #Android):  #ReactJS #JavaScript

  • How to Add a Splash Screen to a React Native App (iOS and Android)I’m often asked about that last mile of developing a React Native app (actually getting it into the app store).
  • There’s more to it than just building your app and sending it off to Apple/Google — you’ve got to add icons, splash screens, write descriptions, and more before sending it off for review.In this tutorial we’ll be working in the platform IDEs and writing a bit of native code.
  • The Phonegap repo has a guide on the various size splash screens your app should include but in this tutorial we’ll use Image Gorilla by Ape Tools to generate all the necessary sizes for our splash screen (as well as icons, but we won’t use those in this tutorial).
  • Once Image Gorilla completes and you download and extract the zip file you’ll see multiple directories, we’re only interested in the Android and iOS ones.Adding Splash Screens (iOS)First open the project in Xcodeopen scroll down to “Launch Images Source” and click “Use Asset Catalog…”and press “Migrate” when prompted.
  • You might have to mess with it a bit to take care of all of them.If you run your application now you should see the new splash screen in use.Note: I had to delete the app from the simulator before re-building the app for the splash screen to work.Adding Splash Screens (Android)Much of these instructions are pull from this article.

I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google — you…

@ReactiveConf: How to add a splash screen to a React Native app (#iOS and #Android): #ReactJS #JavaScript

I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google — you’ve got to add icons, splash screens, write descriptions, and more before sending it off for review.

In this tutorial we’ll be working in the platform IDEs and writing a bit of native code. Don’t worry, I’ll walk you through everything. The final code is available on Github.

Some of this can be a bit intimidating (it was to me). I find video walk throughs when using foreign programs very helpful.

Devices come in all shapes and sizes, therefore our splash screen images need to come in a variety of sizes as well. The Phonegap repo has a guide on the various size splash screens your app should include but in this tutorial we’ll use Image Gorilla by Ape Tools to generate all the necessary sizes for our splash screen (as well as icons, but we won’t use those in this tutorial).

To use Image Gorilla you want to create a 2048×2048 PNG — I’m using an image from my upcoming free React Native video course (sign up for updates).

Once Image Gorilla completes and you download and extract the zip file you’ll see multiple directories, we’re only interested in the Android and iOS ones.

and put the following code in that file. Make sure to keep the first line the same as whatever is created for your app, it’s app specific.

With all of this completed you should see the following (extremely briefly) when building the app.

You may be wondering why we go through the work of tapping into native code to set up splash screens. It’s because this is the right way to do it, especially on Android. We’re using the standard process on iOS and we’re using the recommended way on Android. The splash screens are available immediately and then the app opens — we shouldn’t manually make a user wait while looking at a splash screen, you can set up loading inside of your app (think about the way the Facebook app works).

How to Add a Splash Screen to a React Native App (iOS and Android)