Custom App Loading screen

Expo SDK
1

I’m trying to figure out how to customize the loading screen image.

I see documentation for https://docs.expo.io/versions/v18.0.0/sdk/app-loading.html but this doesn’t say much as far as customization.

I’ve also tried replacing the loading.png in the directory which seems to only allow for an icon to be replaced as opposed to a full screen image.

Is there anyone who can point me in the right direction? Thanks!

2

You can set a full screen image with the following property (backgroundImage):

.....
"loading": {
    "backgroundColor": "#FFFFFF",
    "backgroundImage": "./assets/icons/splash.png",
    "icon": "./assets/icons/loading.png"
  },
.....

This can be configured is in app.json or exp.json depending what version of Expo you have:
https://docs.expo.io/versions/v18.0.0/guides/configuration.html

Hope that helps.

3 Likes
3

That was exactly what I needed. Thanks so much!

4

How can i put a Spinner on it ? I tried to put a GIF, but it doesn’t work…

5

The spinner automatically is generated as far as I’m aware. That’s not something you’ll have to add yourself.

6

I tried it but the background image doesnt take over the whole view. How can i make it happen ?

You can see in the image below that there is white background top and bottom.

36 PM
36 PM654×1192 831 KB 

"sdkVersion": "21.0.0",
"version": "0.0.5",
"orientation": "portrait",
"primaryColor": "#D76500",
"icon": "./icon3.png",
"loading": {

    "hideExponentText": false,
    "backgroundImage": "./icon3.png",
  },
7

@harryp loading configuration has been replaced by splash recently, check out: https://docs.expo.io/versions/latest/guides/splash-screens.html
You can specify a resizeMode for your background image to fill the screen.