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.
react-native-splash-screen-pluing-that-used-to-work-in-version-x.x.x
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.”
WHAT?!!
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 componentDidMount()on App.js for this. This should load and display the splash component. At the same time, inside the componentDidMount() of 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.
Simple!
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.
Until later!