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. 🚀

If you found this guide helpful, feel free to share it! Happy coding! 😊

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.