Programmatically change the app icon in React Native.
Since iOS 10.3 Apple supports alternate App Icons to be set programmatically. This package integrates this functionality as React Native module. Android is not (yet?) supported.
$ npm install react-native-dynamic-app-icon
$ react-native link react-native-dynamic-app-icon
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-dynamic-app-icon
and add RNDynamicAppIcon.xcodeproj
libRNDynamicAppIcon.a
to your project's Build Phases
➜ Link Binary With Libraries
Alternate icons have to be placed directly in your Xcode project rather than inside an asset catalogue. The @2x
and @3x
naming convention is supported as usual.
info.plist
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>alternate</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcon_alternate</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>alternate2</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcon_alternate2</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>FILENAME</string>
</array>
</dict>
</dict>
</dict>
import AppIcon from 'react-native-dynamic-app-icon';
AppIcon.setAppIcon('alternate');
AppIcon.getIconName(result => {
alert( 'Icon name: ' + result.iconName );
});
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
.
Returns a promise which resolves to a boolean.
Returns a callback with an object containing the icon name. Example: {iconName: 'default'}
.