Dec 19, 2022

Give Your React Native App a dynamic App Icon

Setting up a dynamic app icon for react native application using react-native-change-icon
Sakshya Arora
Sakshya AroraSenior Software Engineer - III
lines

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

Interactive UI

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

Mobile app UI demo

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:

Or

Creating App Icons for Your App

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

Creating app icon for your app

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.

Adding app icons in Android

2. Updating AndroidManifest.xml file

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

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

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

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 Arrayand set its first key,Item 0toString` with the value of the icon name.

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

Here's how:

Adding dynamic icons for iOS

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

Dynamic app icons iOS results

How To Use This In Your App?

Use the following code:

Conclusion

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

Adding dynamic app icons is easy to conclude with

Feel free to check out the working example.

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

Happy Learning!! 🙂

Hire our Development experts.