README
React Native Change Icon
Change Application Icon Programmatically.
- iOS
- Android
Getting started
$ yarn add react-native-change-icon
Automatic installation
$ react-native link react-native-change-icon
Usage
iOS
- Open your project in Xcode and create an App Icons group inside you app's group.
- Add all the app icons you need inside this group with names like icon@2x.png, icon@3x.png.
- Your directory structure in Xcode would look like:
- Open the Info.plist file.
- Add
Icon files (iOS 5)
to the Information Property List. - Add
CFBundleAlternateIcons
as a dictionary to theIcon files (iOS 5)
, it is used for alternative icons. - Add dictionaries under
CFBundleAlternateIcons
named as your icon names in App Icons group. - For each dictionary, two properties,
UIPrerenderedIcon
andCFBundleIconFiles
need to be configured. - Set the type of
UIPrerenderedIcon
toString
and its value toNO
. - Set the type of
CFBundleIconFiles
toArray
and set its first key,Item 0
's type toString
and its value to the corresponding icon names. - After all these steps, your Info.plist file should look like:
Android
- Add all the icons you need inside your project's
android/app/src/main/res/mipmap-*
directories:
- Modify your
AndroidManifest.xml
file's<application>
tag as following:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/checked"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity" />
<activity-alias
android:name="com.example.MainActivitychecked"
android:enabled="true"
android:icon="@mipmap/checked"
android:targetActivity=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>
<activity-alias
android:name="com.example.MainActivitycancel"
android:enabled="false"
android:icon="@mipmap/cancel"
android:targetActivity=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
You can create more <activity-alias>
tags to make more alternate icons.
Note that the name in %
is the icon name.
NOTE: Steps 3 & 4 only required for React-Native Version < 60
- Open the
MainApplication.java
file. - Pass
BuildConfig.APPLICATION_ID
tonew ChangeIconPackage()
inside thegetPackages()
function.
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new ChangeIconPackage(BuildConfig.APPLICATION_ID))
return packages;
}
Note that all the icon names must be in lowercase and only limited to alphabets a-z
Now you can use the following code to change application icon:
import { changeIcon } from 'react-native-change-icon';
// Pass the name of icon to be enabled
changeIcon('iconname');
changeIcon
function returns a promise. The promise is resolved only when the icon is changed.
Please refer to the example app for demo on implementation