Add a splash screen in React Native Expo Apps

The splash screen is a screen which is the first screen shown when your app is launching.

Create a splash screen image

Created a Splash screen using Adobe XD, board size is 1242px width and 2436px height

I am using Adobe XD to create a splash screen image, you may choose any design tool to create one.

Export the selected board from Adobe XD

Adding your image to your project

Now, let’s export the splash screen as PNG in your assets folder of your project.

open app.json file in your code editor

Open your project in a code editor and open the app.json file and change the image path to “./assets/imagename.png”, Now reload the app and you will see the splash screen image while the app is loading.

SplashScreen while app is reloading

Well, you may still see some white in the background or at the top and bottom. Let’s fill it with the splash screen color, for that let’s go back into app.json file:

Change the backgroundColor property as the image background

Reload the app again to check.

That’s all!!

My next post will be about adding custom fonts to your react native expo app.

Thank You for reading.