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)
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.
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!