react-native-trustee-change-icon
v1.0.3
Published
Change application icon programmatically in React-Native.
Downloads
72
Maintainers
Readme
React Native Trustee Change Icon
Change Application Icon Programmatically.
- [x] iOS
- [x] Android
Getting started
yarn i react-native-trustee-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 [email protected], [email protected].
- 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:exported="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:exported="true"
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>
</application>
</manifest>
You can create more <activity-alias>
tags to make more alternate icons.
Note that the name in should be "com.{package_name}.MainActivity%", where %
is the icon name.
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, getIcon } from 'react-native-trustee-change-icon';
// Pass the name of icon to be enabled
changeIcon('iconName');
// Get the icon currently enabled
getIcon();
changeIcon
function returns a Promise<string>
. The promise is resolved only when the icon is changed.
getIcon
function returns Promise<string>
with the name of the selected icon or "default" if default icon is selected.
Please refer to the example app for demo on implementation