Dynamically change app launcher icon in React Native

Have you ever used Tinder? if yes then can notice their app icon has a pink base color, but when a user upgrades to the gold membership, the icon changes to reflect that subscription level without requiring a new app download.

Today we’ll be exploring a cool npm package called react-native-change-icon that allows us to effortlessly switch up our app icon. Exciting, right? Let’s dive in and see how we can use it!

🛠️ Installation

To get started, let’s open up your CLI and head over to your project directory. Once you’re there, go ahead and run this command:

npm i react-native-change-icon

Or

yarn add react-native-change-icon

🤖 Implementation for Android

Now that you have your app icons, let’s head to the “android” directory of your project, followed by android ->app -> src -> main -> res -> mipmap-* directories, and add all the icons you require.

When you’re finished adding the icons, take a look at your folder; it should appear something like this.

To update your AndroidManifest.xml file, simply add an activity-alias for each of your app icons like this!

<activity-alias
     android:name="com.rndynamicicon.MainActivitylogo_1"
     android:enabled="false"
     android:exported="true"
     android:icon="@mipmap/logo_1"
     android:targetActivity=".MainActivity">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
</activity-alias>

Your package name and MainActivity name will be followed by the app icon name in this section. When you’re finished, your AndroidManifest.xml file will have a similar appearance to this.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

 <uses-permission android:name="android.permission.INTERNET" />

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/logored"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity" />
     <activity-alias
         android:name="com.rndynamicicon.MainActivitylogo_1"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/logo_1"
         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.rndynamicicon.MainActivitylogo_2"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/logo_2"
       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 have the flexibility to create even more alternate icons by simply adding more tags.

Note:

1. If you are using any deep links inside the app, then please put them in all the activity alias.
2. Only one activity alias should be enabled initially, otherwise, it will create multiple launcher icon at the time time of app launching.
3. Should enable the default activity alias which we want to show on the first time of app launching.
4. If you want a different name with each launcher icon then you can also change the label name in each activity alias.

🍏 Implementation for iOS

1. First, go to the ios/ folder and do pod install.
2. Open your app in Xcode and add an AppIcons group to your app.

1. Add all your images as image@2x.png and image@3x.png.

1. Open the Info.plist file.

2. Add Icon files (iOS 5) to the Information Property List.

1. Add CFBundleAlternateIcons as a dictionary to the Icon files (iOS 5) as it is used for the alternative icons.

1. Add dictionaries under CFBundleAlternateIcons named as your icon names in the AppIcons group.

1. For each dictionary, these two properties UIPrerenderedIcon and CFBundleIconFiles need to be configured.

1. Set the type of UIPrerenderedIcon to String and its value to NO.

2. Set the type of CFBundleIconFiles to Array and set its first key ,Item 0 to String with the value of the icon name.

1. set the default icon name in Primary Icon and Newsstand Icon -> Icon files -> Item 0.

👨‍💻 JS side

After these steps, we have the ability to change the icon in the JS code of our application. Let’s import the library:

import { changeIcon, getIcon } from 'react-native-change-icon';

changeIcon('iconname');        // pass the icon name to change the icon 

getIcon();                     // to get the currently active icon

Well, that’s it. 🎉 Run the code to see it in action.🥳

Output

Please check out the demo project on GitHub for more information

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Happy Coding :)