How to Create a Splash Screen and App Icon in a React Native Expo App

A splash screen and an app icon are essential for branding and providing a smooth user experience in your mobile app.

In this guide, we’ll walk through the steps to create and add a splash screen and app icon to a React Native Expo app.

Adding a Splash Screen

What is a Splash Screen?

A splash screen is the first screen users see when they open your app. It stays visible while the app loads in the background. This helps enhance the user experience by giving a polished look to your app startup process.

Step 1: Create a Splash Screen Image

• Use a 1024x1024 image for better quality.
• The image format should be .png.
• Use a transparent background if needed.
• You can create one using design tools like Figma, Canva, or Adobe Illustrator.

Step 2: Export and Save the Image

• Save the splash screen image as splash-icon.png.
• Store it in the assets/images folder inside your project.

Step 3: Configure the Splash Screen in Expo

• Open your app.json or app.config.js file.
• Add the splash screen configuration inside the expo object:

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

Step 4: Test Your Splash Screen

Do not use Expo Go for testing, as it has its splash screen, which might interfere. Instead, create a preview or production build using:

expo prebuild
expo run:android  # For Android
expo run:ios      # For iOS

Adding an App Icon

What is an App Icon?