react-native-dynamic-icon v1.0.1
react-native-dynamic-icon
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 info.plist
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.
CFBundleIcons
is a dictionary that defines what your primary icon is (CFBundlePrimaryIcon
) and what your alternate icons are (CFBundleAlternateIcons
)- 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
CFBundlePrimaryIcon
: theCFBundleIconFiles
array and theUIPrerenderedIcon
boolean.
Notes:
- You can rename
icon_type_1
andYourImageName
icon_type_1
is what you pass toReactNativeDynamicIcon.setIconName
YourImageName
is the name of your image file
- Add more entries under
CFBundleAlternateIcons
if 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.
<key>CFBundleIcons</key>
<dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>icon_type_1</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>YourImageName</string>
</array>
<key>UIPrerenderedIcon</key>
<true/>
</dict>
</dict>
</dict>
3. Installation
$ 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
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-dynamic-icon
and addReactNativeDynamicIcon.xcodeproj
- In Xcode, in the project navigator, select your project. Add
libReactNativeDynamicIcon.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd + R
)
4. Usage
import ReactNativeDynamicIcon from 'react-native-dynamic-icon'
// Setting an alternate icon
ReactNativeDynamicIcon.setIconName("icon_type_foobar")
// Setting default
ReactNativeDynamicIcon.setIconName("__default__")
Todo
- get alternateIconName
Resources
Apple's Docs
Method | What it does |
---|---|
supportsAlternateIcons | A Boolean value indicating whether the app is allowed to change its icon. |
alternateIconName | The name of the icon being displayed for the app. |
setAlternateIconName | Changes the app's icon. |
Other sites
Source | What's to learn |
---|---|
hackingwithswift.com | How to change your app icon dynamically |
steventroughtonsmith | AlternateIconTest github example |