Add animation to iOS mobile app launch screen in React Native
For an iOS mobile app I was working on, I added an animation during the launch flow, and I love how it turned out!
The app client wanted the text-based logo for the app to show first, then an animation of the graphic logo to show right after.
It actually plays while the shoes and their images on the home screen are loading, so it’s a good, UX-driven use of that time. 💪🏾
Solution
Apple/iOS does not allow the first boot screen to be animated unfortunately. It must be a static image.
So the trick that many apps use to do this is show a static image first (or a blank screen), and then actually show the animated image/video right after, as soon as the app is done initially loading up.
Here is an example of this being done in the Netflix mobile application launch flow:
Tutorial
This app was built using React Native, which made achieving this a bit more complex.
Step 1: Create "boot" screen
Add the initial boot screen background and image using Xcode's storyboard builder.
Find/create a Launch.storyboard file, add the logo image to the center of it. Then add contraints to limit the size of the image, as well as force it to be centered horizontally and veritically on all devices.
Step 2: Create "splash" screen
Add a new “splash screen” to the mobile app via the React application. Set it to show first once the app loads up (after the boot screen)
Helpful code examples:
Step 3: Add timed animation to splash screen
In the splash screen, add in the animated video or GIF, and add timed logic to navigate to the home screen after it’s done playing.
Step 4: Fix "white flash" issue
After all the steps above, you'll likely notice that when React Native loads the application, a white screen shows.
You can use a NPM package/library called react-native-bootsplash to fix that issue. Follow the instructions in the README file to install and implement it.
Video tutorial:
Final thoughts
I think this animated launch flow in this app turned out great! It adds a new user experience while hidding some of the initial data load.
Let me know what you think, and if you have any questions!
