Endurative

How to implement app icon and splash screen in react native

This guide explains how to correctly generate, configure, and integrate app icons and a splash screen for your React Native Android project.

1. App Icon Setup

Required Image

  1. Size: 1024 × 1024 px
  2. Format: PNG (square, no rounded corners)

Generate Icons

  1. Use https://icon.kitchen
  2. Select React Native (Android/iOS)
  3. Upload your 1024x1024 image
  4. Download the generated ZIP
Note: If you already have a built-in app icon, you can also use the React Native Pro Splash Generator for generating both icons and splash screens.

Place Icons in Project

  1. Extract the ZIP file.
  2. Copy the mipmap-* folders (e.g., mipmap-hdpi, mipmap-mdpi, etc.).
  3. Paste them into your project: android/app/src/main/res/
  4. Replace existing files when prompted.
Your app icon will now display on the home screen and task switcher.

2. Splash Screen Setup

Required Image

  1. Size: 4096 × 4096 px
  2. Format: PNG (center your logo, fill background)

Generate Splash Assets

  1. Use React Native Pro Splash Generator Use Image Gorilla
  2. Upload your image
  3. Select Android
  4. Download the ZIP file

Place Icons in Project

  1. Extract the ZIP file.
  2. Paste them into your project: android/app/src/main/res/
  3. Replace existing files when prompted.

3. Configure Splash Screen in Android

Step 1. Install Splash Screen Library

npm install react-native-splash-screen

Step 2. Modify MainActivity.kt

Path: android/app/src/main/java/com/yourprojectname/MainActivity.kt

Add imports:

import android.os.Bundle
import org.devio.rn.splashscreen.SplashScreen

Update onCreate:

override fun onCreate(savedInstanceState: Bundle?) {
SplashScreen.show(this) // Show splash before onCreate
super.onCreate(null)
}

Step 3. Create Splash Layout XML

Path: android/app/src/main/res/layout/launch_screen.xml

If layout/ doesn’t exist, create it.

Example: launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#121928">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/screen"
android:scaleType="centerCrop"
android:layout_centerInParent="true" />
</RelativeLayout>