\
Even the smallest of details matter for an app to be successful.

## **What is a Splash Screen**

You have made a great app and of course, why not publish it right? But if you open your expo app and see the default boring splash screen provided by Expo, you ……… “Wait, What’s a Splash screen first of all?”

\
Seeing the Image above you would have probably got an idea of what I am talking about. 

\
Basically, when we start an app, It requires some time to run or load the fonts/assets and the app is not immediately available. So, a splash screen is basically the screen that the user sees while the app is in a loading state.

## **What About the Device Sizes?**

No Problem, Expo has got us covered. In the case of iOS devices, we can go with 1242 pixels wide and 2436 pixels tall -- this is the width of the iPhone 8 Plus (the widest iPhone) and the height of the iPhone X (the tallest iPhone). But In the case of Android, screen sizes vary greatly with the massive variety of devices on the market. One strategy to deal with this is to look at the most common resolutions and design around that — [you can see a list of devices and their resolutions here](https://material.io/resources/devices/). You can see the [expo doc](https://docs.expo.dev/guides/splash-screens/) where I have copied the above info😁😁

## Configuring the Splash Screen

You can configure your splash screen in the app.json file and read about all the properties from the expo guide below:

1. [splash.image](https://docs.expo.dev/guides/splash-screens/#splashimage) (Note: Splash screen image has **no** background)
2. [splash.backgroundColor](https://docs.expo.dev/guides/splash-screens/#splashbackgroundcolor)
3. [splash.resizeMode](https://docs.expo.dev/guides/splash-screens/#splashresizemode)

## **Icons**

When you publish your app, the app icon is what people see on the App Store/Play Store and also on the user’s home screen.

## **Icon Size**

As suggested by Expo, we can use 1024x1024 on both Android and iOS devices. And also make sure the icon must be exactly square, i.e. a 1023x1024 icon is not valid.

## Configuring the Icons for Android

In Android, we have to do some extra configuration beyond specifying the icon in app.json. You can learn more about all those settings [here](https://docs.expo.dev/guides/app-icons/#android) and why we need them. Basically, you need to provide the 2 separate layers:

* `android.adaptiveIcon.foregroundImage` (generally `assets/adaptive-icon.png` )
* `android.adaptiveIcon.backgroundImage`

  \

 ![](https://cdn.hackernoon.com/images/iHKErLv7KAegkfw3m5jwsrsy3J63-m6037s8.png)

Again, read more about these 2 layers [here](https://docs.expo.dev/guides/app-icons/#android).

## **Creating Icons and Splash Screen**

I will be adding Icons and splash-screen to the [WhatsApp-Clone Project](https://medium.com/codex/whatsapp-clone-react-native-part1-8054ba362884). For Creating the icons, you can use “Canva”, “AdobeXD” and so on. But I created it with the [Figma template](https://www.figma.com/community/file/1020369500490206655) as explained in the expo docs. If you wanna know how to create icons, see [this video](https://www.youtube.com/watch?v=mVOFvLSiJ_s). But Below 👇 are the icons that I created with Figma.

\
 ![](https://cdn.hackernoon.com/images/iHKErLv7KAegkfw3m5jwsrsy3J63-vu137j9.png)

See the icon I created ☝☝in [Figma](https://www.figma.com/file/8X0imjzODqOT7WILFpPaDA/Expo-App-Icon-%26-Splash-(Community)?node-id=1%3A1357) above. Also, [download the Icons here](https://drive.google.com/drive/folders/1X1htNrVEctFOnyxX5gi3Y1AFirzNf_VL?usp=sharing) if you don't want to go to Figma.

## **Replacing the Files and Reviewing the Entire App.json File**

After downloading the assets, just go to your project `assets` folder and replace the 3 files which I have highlighted. The files you download would be named automatically to their specific name so NO WORRIES! Delete the old files if you want. You could also delete the `assets/favicon.png` file because that is used for the web and our app is not for the web.

\
 ![](https://cdn.hackernoon.com/images/-t6237qt.png)

Below 👇 is the whole App.json file with all the configurations as described above:

\
```javascript
{
  "expo": {
    "name": "Whatsapp Clone",
    "slug": "Whatsapp-Clone-React-Native",
    "platforms": ["ios", "android"], 
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}
```

\
## **Final Output**

 ![](https://cdn.hackernoon.com/images/-53337gd.gif)

So, Easy right!…. That’s how easily you can add icons and a Splash screen to your app. Hope you enjoyed this article. Till next time.

\
*Stay Safe; Stay Healthy*

## Thank You

\
*First published [here](https://decodebuzzing.medium.com/adding-a-splash-screen-and-icons-to-a-expo-app-in-5-minutes-157b389dac12)*

Google

YouTube

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Mobile

2022 - HackerNoon Contributor of the Year - React

2022 - HackerNoon Contributor of the Year - Redux

2022 - No No No Nodejs

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to Design a Splash Screen With Expo and React Native

How to Design a Splash Screen With Expo and React Native

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@decodebuzzing

RELATED STORIES