Before pushing the app to the Store, we will need to create the App Launcher Icon (the icon of the application on the user’s device). App code using React Native will be able to push to both Google Play (Android) and App Store (iOS), so I will guide how to create App Launcher Icon for both operating systems.
1. App Launcher Icon for iOS
Step 1
First we need to have a pre-designed icon image with a size of 1024×1024 pixels (or larger also).
Next, you can use the Icon Set Creator tool (on the App Store) to create icon sets of different sizes for different types of iOS devices.
Drag and drop photos, select Platform and image storage folder is done
Or you can visit the website https://makeappicon.com , upload photos (JPG or PNG) and enter email to receive the icon set on both iOS and Android.
Upload photos to the website
Preview Icon preview, enter email to receive the icon set
Step 2
Turn on XCode, open React Native project (file [project] .xcworkspace in ios folder).
Navigate to Images.xcassets folder, then drag and drop the icon set created from step 1 ( AppIcon.appiconset folder) or click the plus icon in the lower left corner, select import.
Done, rebuild the app to see the results!
1 minute of advertising: The icon above is homemade for the Master Mind X game app written in React Native, you guys try it out and give comments in the comment, if you support 5 stars, the better
2. App Launcher Icon for Android
Step 1
Doing the same as on iOS, we also need an icon image with a minimum size of 1024×1024 pixels. Then use the following website to create the icon set: Android Assets Studio
Step 2
Unzip the downloaded icon set, including the res folder containing the format: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, …, each folder contains the file ic_launcher (the default name). Copy (overwrite) the entire directory into android> app> src> main> res .
Note that many android devices use circular icons, so we create one more round icon set (Circle) and copy as above, the default icon name will be ic_launcher_round .
The icon name is already declared in the AndroidManifest.xml file
Import Icons
Note : According to Google’s recommendations, it should be designed for Android icons in the form of a full square (no need to be rounded), no shading, because when pushing the app to the Store, Google will apply those effects to itself. homogeneous. So with the square icons, you can always use the icon set created from https://makeappicon.com , but if created from the Android Assets Studio page, remove the Effect section (leave None).
Further reference: https://developer.android.com/google-play/resources/icon-design-specification