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!