React Native

How to set AppIcon in react native Using CLI

Posted On
Posted By Neha Dwivedi

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

Related Post

leave a Comment

Latest Post

React Native

How to set a dynamic/responsive square grid in react native

Read More
Posted On
React Native

How to generate the release build in react native android

Read More
Posted On
React Native

How to set AppIcon in react native Using CLI

Read More
Posted On
React Native

How to setup crashlytics in react native

Read More
Posted On