Today, many apps change their app icons programmatically from within the app. This adds to their interactive UI and helps enhance user experience.
Installing the Package
Creating App Icons 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
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.
For each of your app icon, you'll be adding an
activity-alias like this.
name in this should be the
package + MainActivity +
In the end, your
AndroidManifest.xml file will look like this:
You can create more
<activity-alias> tags to make more alternate icons.
First, go to the
ios/folder and do
Open your app in Xcode and add an
AppIconsgroup to your app.
Add all your 120x120 resolution image as
firstname.lastname@example.org 180x180 resolution image as
Icon files (iOS 5)to the Information Property List.
CFBundleAlternateIconsas a dictionary to the Icon files (iOS 5) as it is used for the alternative icons.
Add dictionaries under
CFBundleAlternateIconsnamed as your icon names in the
For each dictionary, these two properties
CFBundleIconFilesneed to be configured.
Set the type of
Stringand its value to
and set its first key,Item 0
toString` with the value of the icon name.
set the default icon name in
In the end, your
Info.plist icon changes will look like this:
How To Use This In Your App?
Use the following code:
We discussed how to change app icons dynamically in react-native without worrying about native code implementation.