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? An app icon is what users see on their home screen and app stores. It’s a crucial part of your app’s identity. Step 1: Create an App Icon Use a 1024x1024 image. Save the file in .png format. You can use design tools like Figma, Photoshop, or Canva. Step 2: Export and Save the Icon Save the image as icon.png. Place it in the assets/images directory inside your project. Step 3: Configure the App Icon in the Expo Open your app.json or app.config.js file. Add the following under the expo object: { "expo": { "icon": "./assets/images/icon.png" } } Step 4: Test Your App Icon To see the changes, build and run your app: expo prebuild expo run:android # For Android expo run:ios # For iOS Final Thoughts Adding a splash screen and an app icon gives your app a professional look and enhances the user experience. Follow the steps above to implement them seamlessly in your React Native Expo app.

Mar 24, 2025 - 10:17

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?

An app icon is what users see on their home screen and app stores. It’s a crucial part of your app’s identity.

Step 1: Create an App Icon

Use a 1024x1024 image.
Save the file in .png format.
You can use design tools like Figma, Photoshop, or Canva.

Step 2: Export and Save the Icon

Save the image as icon.png.
Place it in the assets/images directory inside your project.

Step 3: Configure the App Icon in the Expo

Open your app.json or app.config.js file.
Add the following under the expo object:

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

Step 4: Test Your App Icon

To see the changes, build and run your app:

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

Final Thoughts

Adding a splash screen and an app icon gives your app a professional look and enhances the user experience. Follow the steps above to implement them seamlessly in your React Native Expo app.