# Give Your React-Native App a dynamic App Icon

Today, many apps change their app icons programmatically from within the app. This adds to their interactive UI and helps enhance user experience.

![really.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669618986507/rKtKiAgWF.gif?height=250 align="center")

In this blog, we'll try to change the app icon on the fly easily using this awesome npm package - `react-native-change-icon`.

## Demo

![finaldemo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669619412608/fskPU8ziJ.gif?height=500 align="center")

## Installing the package

You don't need to worry about the native code for changing the app icon as `react-native-change-icon` handles all of that for you.

Run this command in your CLI inside your project directory : `npm i react-native-change-icon` or `yarn add react-native-change-icon`

## Creating App Icons for your app

Go to `appicon.co` to generate your app icons by uploading a 1024x1024 resolution image.

![createAppIcon.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669104597367/iHoSn6C3N.gif align="center")

Just like above, you can create your other app icons as well.

> Note: *icon names must contain only* ***lowercase a-z****.*

## Setting up the dynamic app icon

### For Android:

1.  Adding the app icons As you now have your app icons, Go to `android ->app -> src -> main -> res -> mipmap-* directories:` and add all the icons you need.
    

Once you are done adding the icons, your folder will look similar to this.

![Screenshot 2022-11-22 at 1.47.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669105072586/1E2dr0F8I.png align="left")

2.  Updating `AndroidManifest.xml` file
    

For each of your app icon, you'll be adding an `activity-alias` like this.

```plaintext
<activity-alias
			android:name="com.dynamicappicon.MainActivitylogored"
			android:enabled="true"
			android:exported="true"
			android:icon="@mipmap/logored"
			android:targetActivity=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity-alias>
```

`name` in this should be the `package` + **MainActivity** + `{icon name}`.

In the end, your `AndroidManifest.xml` file will look like this:

```plaintext
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dynamicappicon">

    <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.dynamicappicon.MainActivitylogored"
			android:enabled="true"
			android:exported="true"
			android:icon="@mipmap/logored"
			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.dynamicappicon.MainActivitylogoblack"
			android:enabled="false"
			android:exported="true"
			android:icon="@mipmap/logoblack"
			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.

### 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.
    
3.  Add all your 120x120 resolution image as `image@2x.png` and 180x180 resolution image as `image@3x.png`.
    
4.  Open the `Info.plist` file.
    
5.  Add `Icon files (iOS 5)` to the Information Property List.
    
6.  Add `CFBundleAlternateIcons` as a dictionary to the Icon files (iOS 5) as it is used for the alternative icons.
    
7.  Add dictionaries under `CFBundleAlternateIcons` named as your icon names in the `AppIcons` group.
    
8.  For each dictionary, these two properties `UIPrerenderedIcon` and `CFBundleIconFiles` need to be configured.
    
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.
    
11.  set the default icon name in `Primary Icon` and `Newsstand Icon` -&gt; `Icon files` -&gt; `Item 0`.
    

*Here's how:*

![info.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1669570014432/spQWJ25y1.gif align="center")

In the end, your `Info.plist` icon changes will look like this:

![Screenshot 2022-11-22 at 11.24.02 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669139647077/xcDE9MNoa.png align="left")

## How to use this in your App?

Use the following code:

```plaintext
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
```

## Conclusion

We discussed how to change app icons dynamically in react-native without worrying about native code implementation.

![thankyou.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1669556522516/g_SSjEY0A.webp align="center")

Feel free to check out the working [example](https://github.com/sakshya73/dynamic-app-icon).

I hope this article helped you to learn something new! Please share your thoughts in the comment box.

Happy Learning!! 🙂