How to set AppIcon in react native Using CLI
AppIcon is the Unique identification of any App. Each app need a unique app identification, when we set app icon using CLI it reflects both platforms (iOS/Android), if we set appIcon manually then we need to set it separately in both platform we are going to use RN ToolBox through CLI, so we follow these steps.
- Installation of RN ToolBox: RN ToolBox npm plugin use to set the appIcon for this we need node version node > 6 for checking node version we use the command node -v, if we have node module > 6 then we start this process.
- Command: npm install -g yo generator-rn-toolbox. To generate different size icons the generator-rn-toolbox uses ImageMagick. Ubuntu user can skip this but for Mac users run, so it’s important to install ImageMagick.
- Command: brew installs ImageMagick (it takes time).
- Then install Yeoman: npm install -g yo
- yo rn-toolbox:assets –icon images/AppIconName.png(app icon name)
- yo rn-toolbox:assets –splash ~/Desktop/background.png –(path your splash screen)android(for only android project )
- Use the tools:- Prepare a single icon file of 200*200px. If you donʼt have one ready just use the sample below.
- Navigate to your React Native app root folder and execute the following command: yo rn-toolbox: assets –icon <path-to-your-icon-file>
- Set the Icon for Android and iOS Application: After the installation of the required tools we need an application icon. Min 200px * 200px size is recommended.
- Now after making the icon, we have to run the following command to set up the icon for our application(see in below image).
You will be asked for the name of your react-native project, just copy and paste the name of your application. You will be asked to replace Contents.json file, input y and hit enter.
And if any other query/issue then please comment.
Happy Coding Guyz