Splash screen and app icon

Create a splash screen

To create a splash image, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.

Export the splash image as a .png

After creating a splash screen, export it as a .png and save it in the assets/images directory. By default, Expo uses splash.png as the file name. If you decide to change the name of your splash screen file, make sure to use that in the next step.

Note: Currently, only .png images are supported to use as a splash screen in an Expo project. If you use another image format, making a production build of your app will fail.

Add the splash screen in app config

Open the app config and add the local path as the value of splash.image property to point to your new splash image.

{
  "splash": {
    "image": "./assets/images/splash.png"
  }
}

You can test your new splash image by starting the development server with npx expo start and using a development build or Expo Go to preview it.

Note: In development mode, when you test your new splash screen, you will notice an information bar at the bottom of the screen. It displays the information about how much of the JavaScript code is downloaded on the device when preparing your app. It doesn't appear in production apps.

Change the background color

If you set a background color other than white for your splash image, you may see a white border around it. This is due to the splash.backgroundColor property that has a default value of #ffffff.

You can update this property's value to match your splash image's background color. For example:

{
  "splash": {
    "image": "./assets/images/splash.png",
    "backgroundColor": "#FEF9B0"
  }
}

Resize a splash screen (optional)

Any splash image you provide gets resized to maintain its aspect ratio and fit the resolution of the user's device.

You can use two properties for resizing: contain (default) and cover. These properties work similar to the resizeMode in React Native <Image>, as demonstrated below:

Applying this to an example:

{
  "splash": {
    "image": "./assets/images/splash.png",
    "resizeMode": "cover"
    "backgroundColor": "#FFFFFF"
  }
}

In the above example, the image is stretched to fill the entire width while maintaining the aspect ratio. This is why the logo on the splash image is larger when resizeMode is set to contain.

To learn more about the difference between contain and cover, see this blog post.

Create an app icon

To create an app icon, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.

Export the icon image as a .png

After creating an app icon, export it as .png and save it in the assets/images directory. By default, Expo uses icon.png as the file name. If you decide to use its file name, make sure to use that in the next step.

Add the icon in app config

Open the app config and add the local path as the value of icon property to point it to your new app icon:

{
  "icon": "./assets/images/icon.png"
}