How to add app icons and splash screen to your React Native application

To be able to push your build to the stores, you need to add app icons to the project, but in this article we gonna cover splash screen as well.

Preparation

First of all you need to create new blank project with react-native inint appIconSplashScreen .

To be able to add app icons and splash screen to the project, we need to create some assets. Let’s start from the app icons. For Android and IOS we need to have different sizes of the app icons prepared.

IOS

1. 40x40
2. 58x58
3. 60x60
4. 80x80
5. 87x87
6. 120x120
7. 180x180
8. 1024x1024

Note: Please be aware that App Store Icon, can’t be transparent nor contain an alpha channel. To check if your icon has alpha channel double click on the icon => on the top menu select 'File' => in opened menu select 'Export' . You will see this pop-up. If Alpha checkbox is checked, then your icon includes alpha channel. Simply uncheck the checkbox and save the icon.

Android

1. 48x48
2. 72x72
3. 96x96
4. 144x144
5. 192x192

Note: For Android you should have circular and square app icons prepared

Once you have all the icons sizes, you need to add them to the project. First IOS. To add app icons to the IOS app you need to open your project with Xcode. On the left menu you will see two directories: first with your project name and second — Pods . Open first directory and you will see other directory with your project name. Open it and there you will find Images directory. Click on it and on the right you will see AppIcon image set opened. Simply drag and drop your icons here.

Now Android. Open your project with IDE and go to your-project-name/android/app/src/main/res folder. You will see mipmap-... folders here. Replace icons in these folders with your icons.

That is it for app icons.

Now let’s add splash screen to the project. For this purpose, we need to add library react-native-splash-screen. Run yarn add react-native-splash screen from your project root and then cd ios && pod install. Now we gonna prepare next images sizes for the future splash screen:

IOS

1. 375x812
2. 750x1624
3. 1125x2436

Android

1. 375x812
2. 750x1624
3. 563x1219
4. 1125x2436
5. 1500x3248

Once you have these images, add them to the project. For IOS — open the project with Xcode. Go to the Images directory (like with app icons). You will see your app icons on the right and AppIcon image set.

At the bottom you will see + button. Press it and select Image Set . New image set will be added to the list. Name it logo .

Drag and drop your splash screen image here.

Now open projectName/ios/LaunchScreen.storyboard file and replace it’s code with the following

Now update your AppDelegate.m file.

Go to your-project-name/App and add

import SplashScreen from 'react-native-splash-screen';
//....some code....
function App(): JSX.Element {
  useEffect(() => {
    SplashScreen.hide();
  }, []);
//....other code....
}

Clean your project and start. That is it for IOS.

For Android open your project with IDE and go to your-project-name/android/app/src/main/res folder. You will see mipmap-... folders here.

Add your splash screen image to the folders:

1. mipmap-hdpi folder should include 563x1219 image size
2. mipmap-mdpi — 375x812
3. mipmap-xhdpi — 750x1624
4. mipmap-xxhdpi — 1125x2436
5. mipmap-xxxhdpi — 1500x3248

Now go your-project-name/android/app/src/main/res/drawable folder and add the file splash.xml with the following code

Go to your-project-name/android/app/src/main/res and add layout folder. Create file named launch_screen.xml in this folder with the following code

Go to your-project-name/android/app/src/main/com/packageName/MainActivity.java and update it with this code

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

right after package com.packageName (first line of the file). Then add next code

@Override
      protected void onCreate(Bundle savedInstanceState) {
          SplashScreen.show(this);  // here
          super.onCreate(savedInstanceState);
      }

right after public class MainActivity extends ReactActivity {

Now run react-native run-android form your project root.

That is it!

Feel free to check my repository for this changes https://github.com/AlinaRadyk/codemagic.