So, I’m learning React Native these days. Why? Firstly, it’s React-driven, which I quite like on the web front (why not Vue or something else? I guess I’ll write a post about that, too).
One of the most key requirements in mobile apps is for a splash screen. Even if the app load is instant, I as a designer would say adding a splash screen makes sense for two reasons:
- You never know when the internal or external conditions of the device will change and the app will load slowly (no storage, no network, slow network, etc.).
- If you aren’t Amazon or Google, a splash screen can be a great reinforcer of the brand image (assuming you’re not in the face all the time, of course).
So, how do I add a splash screen to React Native? Like a true engineer, my first method was to fire up the browser and make a search for the solution! To my surprise, what it threw up wasn’t solutions or strategies, but a heap of plugins old and new.
Stuff like that. And equally exasperating usage instructions to boot: “This plugin doesn’t work with XYZ but works with ABC. Also, once you’re done installing it, make sure you’ve updated PQR and downgraded STU.”
I couldn’t understand what was bothering me more — the ecosystem fragmentation or the cumbersome usage. Most tutorials say I must target Android API 23 because nothing newer is supported. Really? 😢😢
Regardless, here’s how I think a splash screen can be introduced easily.
Make a component named
Splash.js or something and load it first as soon as the app is ready. I think it should be possible to use the
App.js for this. This should load and display the splash component. At the same time, inside the
Splash.js, I’d add a
setTimeout() or something for 1.5 seconds, which will redirect to the
Home component as soon as it runs out.
I have a feeling this may not be the fastest way to load a splash screen. Maybe these plugins do something more than just hooking into
componentDidMount() of the
App component? Maybe they accept a splash screen as a pure image and are able to display it even before the app is created fully in memory?
I will write about my experience once I’ve done this, but I think this simple approach should take us far.