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 here we learn “How to set AppIcon in react native Using CLI“.

Please follow these steps so you able to setup the splash and icon.

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:

It takes time

brew installs ImageMagick 

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).

https://www.itechinsiders.com/ - react native splash screen
https://www.itechinsiders.com/ – react native splash screen

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.

https://www.itechinsiders.com/ - react native splash screen CLI

https://www.itechinsiders.com/ – react native splash screen CLI

And you can find my post on medium as well click here , please follow me on medium as well.

So the topic  “How to set AppIcon in react native Using CLI” i s completed, “you can find the next issue list here.

And if any other query/issue then please comment.

Happy Coding Guyz

Related Post