Update your apps icon with React Native using Apple's alternate icons API.
Update your apps icon on iOS using Apples alternate icons API.
yarn add @candlefinance/app-icon
To add alternative icons to your iOS app you need to:
Add the icons to your Xcode project, simply create a new folder and add your icons in at 2x (120 x 120) and 3x (180 x 180) sizes. See the example app for reference.
Update your Info.plist
to include the names of your icons. See the example app for reference or add the following to your Info.plist
:
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>Icon-1</string> <!-- Default icon -->
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>AppIcon-2</key> <!-- Alternate icon name that you can set when calling the API below -->
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>Icon-2</string> <!-- Alternate icon name must match the icon file name from first step -->
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
</dict>
For more info check out the this tutorial by Paul Hudson.
Check out the example app for a full working example.
import { getIconName, setIconName } from '@candlefinance/app-icon';
const [icon, setIcon] = React.useState('default');
// Get icon name
getIconName()
.then((name) => {
setIcon(name);
})
.catch(console.error);
// Set icon name or no argument to reset to default
setIconName('AppIcon-2')
.then((name) => {
setIcon(name);
})
.catch(console.error);
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT