Dynamically change app launcher icon in React Native
Tags: reactnative, javascript, programming, tutorial
Published: 2023-07-17 05:01:32

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnir8af2or169pvktans.png)

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 <activity-alias> 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ii8h2cp76lqraap7z079.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwlv03c3irp1r1zeivus.png)

4. Open the `Info.plist` file.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph37qay8fs58klx84mys.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7ivb01ipfjcta5nu4eg.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r3jfkd5yydf6rl1jwf7.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoj1uvczmekk6qdvvnik.png)

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17fg2jbcphgb7iciqmvj.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sspubzceyozfruofbyxq.png)

> 👨‍💻 **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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zn584odw7gnnf48sp74.gif)

Please check out the [demo project](https://github.com/Rushit013/RNDynamicIcon) 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 :)_