Change your iOS react native app icon.
The following readme is mostly background info copied from hackingwithswift.com. Check their site out!
1. Add alternate icons to your Xcode project
To get started, we need some icons. These should be placed loose in your project or in a group, rather than inside an asset catalogue. Remember to use the @2x and @3x naming convention to ensure iOS automatically picks the correct icon for users' devices.
2. Modify your project's
Go to your project navigator, right-click your
Info.plist file, and choose "Open As > Source Code". This will reveal the raw XML behind your plist.
Defining the icons for your app is done with a very specific set of property list keys and values. To be quite clear,
CFBundleIcons is a dictionary containing the key
CFBundleAlternateIcons, which is a dictionary containing the key
YourImageName, which is another dictionary containing the icon files and gloss effect settings.
CFBundleIconsis a dictionary that defines what your primary icon is (
CFBundlePrimaryIcon) and what your alternate icons are (
- The primary icon key itself is a dictionary that lists its icon files (
CFBundleIconFiles), which is an array containing the filenames for your primary icon, and whether iOS should apply gloss effects to it (
UIPrerenderedIcon). Yes, that latter setting has been dead since iOS 7 but it still loiters around.
- The alternate icons key is also a dictionary, but this time the keys of its children are the names of images you want to use. This doesn’t need to be their filename, just however you want to reference each icon in your code.
- Each icon name is another dictionary, which contains the same two keys as
CFBundleIconFilesarray and the
- You can rename
icon_type_1is what you pass to
YourImageNameis the name of your image file
- Add more entries under
CFBundleAlternateIconsif you want more than one alternate icon.
- Note: Do not put the @2x or @3x parts into your plist, and don’t add the .png either.
$ npm install react-native-dynamic-icon
(a) Mostly automatic installation
$ react-native link react-native-dynamic-icon
(b) Manual installation
- In Xcode, in the project navigator, right click
Add Files to [your project's name]
- Go to
- In Xcode, in the project navigator, select your project. Add
libReactNativeDynamicIcon.ato your project's
Link Binary With Libraries
- Run your project (
Cmd + R)
// Setting an alternate iconReactNativeDynamicIcon// Setting defaultReactNativeDynamicIcon
- get alternateIconName
|Method||What it does|
||A Boolean value indicating whether the app is allowed to change its icon.|
||The name of the icon being displayed for the app.|
||Changes the app's icon.|
|Source||What's to learn|
|hackingwithswift.com||How to change your app icon dynamically|
|steventroughtonsmith||AlternateIconTest github example|