Application Icon is the Unique identification of the App. When the user wants to open an app, icon is the first thing which help him/her to identify the app. In this post, we will see how to Change App Icon in React Native using the Command Line Interface.
This example is perfectly tested for MAC or Ubuntu if you are a Windows user then you can follow our Example of React Native Change App Icon which is fully working and tested on all development platform. We tried to change the App Icon using the command line on Windows too but we are unable to do that.
In our previous example React Native Change App Icon explains how to manually set up your React Native app icons, which includes:
- Generate icons of different sizes
- Add them to your Android and iOS projects
But in this example we will do the same using the command line.
In an Ionic App development process, we could automate the icon updation process with a single command, why not have the same for React Native? So we started to find any way to do that and now we are here with RN ToolBox.
So let’s get started with the example.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the
react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
This will make a project structure with an index file named App.js in your project directory.
Installation of RN ToolBox
RN ToolBox will help you to set up your App Icon using Command Line Interface but for that, you need
node > 6 installed. you can check it using
After checking the node jump into your project
Install the generator using
npm install -g yo generator-rn-toolbox
To generate your icons, the
generator-rn-toolbox uses ImageMagick. Ubuntu user can skip this but for Mac users run
brew install imagemagick
Set the Icon for Android and iOS Application
After the installation of required tools we need an application icon. Min 200px x 200px size is recommended.
Now after making the icon we have to run the following command to setup the icon for our application
yo rn-toolbox:assets --icon <path to your icon>
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
Congratulation!! you have successfully updated your App Icon from the command line.
This is how you can change the App Icon using Command Line Interface. If you have anything else to share please comment below or contact us here.
Hope you liked it:)