Changing the application icon.

If you are working on publishing your first React Native App on Google Play Store there are a lot of things to explore and learn in Google Console but today I would like to write about Application Icon. Before releasing your app in Google Console you have to fill out several sections: App content, Policy status and more. In the “Main store listing” section you need to upload your app icon which is gonna be shown in the Google Play Store. Unfortunately this icon is only for the Play Store, it is not the App icon that is going to be installed on the user’s phone home screen after downloading the app . Most likely a user will see the default icon on his device.

Default icons (with React Native Cli and with Expo Cli)

Default icon depends on how did you created your project. There are 2 popular ways how you can create the project in react native, using Expo CLI or React Native CLI.

1. If you created your project with Expo Cli using

npm install -g expo-cli ;

npm init your-project-name

the file responsible for your app configuration (icons, displayed app name, version and more) is app.json. Open it and find the following lines of code:

"android": {
    "adaptiveIcon": {
       "foregroundImage": "./assets/my_icon.png",
       "backgroundColor": "#FFFFFF"
},

Change the value of "foregroundImage" (add a file with your custom app icon to assets folder and reference to it).

I also recommend to change following lines in the same way . (Splash is the icon/image the user sees during your app opening)

  "icon": "./assets/icon.png",
  "splash": {
     "image": "./assets/splash.png",

2. If you created your project with React Native Cli using

npm install -g react-native-cli ;

npx react-native init your-project-name

the file responsible for your app configuration (icons, displayed app name and more) is AndroidManifest.xml. It is located in android folder:

android / app / src / main

Open in and find the following lines of code:

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"

The default icons are located in:

android / app / src / main / res

There are 5 mipmap folders, each of them contain the default icon in a different sizes (for different screen dimensions)

Add files with your custom app icons (or switch the default ones) and reference to it in AndroidManifest.xml file.

Also it is good to know that acceptable files is only the squared sizes !