React Native Alterning App Icon
Dynamically change the App Icon on iOS in your React Native App.
Table of Contents
Install
$ yarn add react-native-altering-app-icon
or with npm
$ npm i react-native-altering-app-icon
Link Package
$ react-native link react-native-altering-app-icon
Add alternate icons
- Create a folder within your Xcode project. (
NameOfYourProject/NameOfYourApp/AlteringIcons
). - Add the icons you want to change between to that folder. Follow the usual naming convention (
iconanme@2x.png, iconname@3x.png
). - If you create the folder from the finder, make sure to create a folder reference in Xcode.
info.plist
Adjust your Copy the following to your info.plist
and adjust it as needed. Omit the file extension (and @2x
) part, Xcode will pick them accordingly. You can add more alternate icons by copying the an alternate block.
<key>CFBundleIcons</key>
<dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>default</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcons/Icon-60</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>alternate</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcons/Icon-60_alternate</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcons/Icon-60</string>
</array>
</dict>
</dict>
</dict>
Usage
; DynamicIcons // Returns false on Android ; DynamicIcons; // Key you set in your in your info.plist DynamicIcons; // Switch back to the default Icon DynamicIcons;
Api
switchAppIcon(key: string)
To change the app icon call this method with one of the alternate app icons keys specified in your plist.info
. To reset to the default app icon pass null
.
dynamicAppIconSupported()
Returns a promise which resolves to a boolean. Always false on android
getIconName(callback(result))
Returns a callback with an object containing the icon name. Example: {iconName: 'default'}
.