How to setup splash screen in react native expo

This post demonstrate that how you can configure splash screen and app icon in your react native expo project.

First you have to install the package of splash screen in your app

npx expo install expo-splash-screen

After it you have to go the official Figma template of the expo, Where you be able to make your own icon and splash screen for your app, After the customization export your icons from there and get it in you project then use it your icon section and splash icon

• Here this is the official link of that template : Figma template.

And it will get you into this page where you be able to customize splash screen and App icon as per your choice

Then you have to setup your app.json file and its should be look like this because from above version of expo 52 your splash screen configuration should look like this.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#232323",
          "image": "./assets/splash-icon.png",
          "dark": {
            "image": "./assets/splash-icon-dark.png",
            "backgroundColor": "#000000"
          },
          "imageWidth": 200
        }
      ]
    ],
  }
}

And here you can add your splash-icons you want .

Note:

If you try to see splash screen in your Expo Go app so it will not appear but the change in your **icon **should appear

app.json

"version": "1.0.0",
    "orientation": "portrait",


> "icon": "./assets/images/splash-icons/splash-icon-with-bg.png",
    "scheme": "guftaar",
    "userInterfaceStyle": "automatic",

• If you want to see splash screen so you have to make Apk file for android and iPA for Apple

• Moreover you can also add variations in your splash screen like animation and can control the time of it appearance

_layou-jsx

SplashScreen.setOptions({
    duration: 1000,
    fade: true,
  });

And at the end your result will look like this in your stimulator and Expo app