How we added an animated Splash Screen to our React Native app

Dominik García
Mar 31 · 3 min read

At Getsafe we are always looking for improvements to make our app’s experience more delightful for our users. As a user seeing that a screen is not changing makes 2 seconds feel like 2 hours, therefore a small change such as adding an animation using Lottie to the Splash Screen makes those 2 seconds a little bit more enjoyable. It took a little bit of effort to get there, but we think the result was worth it (if you don’t feel like reading all the details, scroll all the way down for the result)

The challenges

The main challenge was to find a solution that was good enough for both iOS and Android. iOS does not support animated Splash Screens, therefore we had to go around this. Since the Splash Screen logic needed to be handled inside the JavaScript code, we also needed to be careful so that when a user is redirected when launching the app, the transition from one screen to the other should be handled while the Splash Screen is still visible. This was the biggest technical challenge given that at that point we did not have a way to know when every piece of data was loaded and every redirection had already happened, we just navigated the user to a different screen and hid the Splash Screen.

The solution

First, we changed the native Splash Screen to just be an image with the same background color as the animation and we hid it as soon as JavaScript took control. After doing some experimentation we found that the best solution for us was to use a Modal to show the SplashScreen with the animation and close it once everything was loaded and every redirection had already happened.

This is how the solution looks like:

The Splash Screen modal is rendered alongside the rest of the app inside the root component.

The Init.js screen is only meant to dispatch the init method, therefore it does not need to render anything, because the Splash Screen is always visible when this component is rendered.

Finally, the Splash Screen is rendered using a React Native Modal. We wanted the animation to play at least once before it is hidden, so that the transition does not look weird to the user.

As you can see, it does not require a lot of effort to make your app more enjoyable for your user. To be able to make this as enjoyable as possible, be sure to still improve your app load time, it does not matter how many animations you add, if it takes more than 30 seconds to open your app, your users will definitely get frustrated.

The result

We are very proud of how our Splash Screen looks right now, personally, I just keep reopening the app to see it again. This is what it looks like!

Getsafe

Insurance at your fingertips.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store