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

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!