twitter-icon-change.mp4
Update your apps icon on iOS using Apples alternate icons API.
yarn add @candlefinance/app-icon
- Supports the new React Native architecture
- Simple async API
- TypeScript support
- Mostly written in Swift
To add alternative icons to your iOS & Android 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 yourInfo.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.
- Add the icons to your Android project
- Create
activity-alias
, see the example app for reference or add the following to yourAndroidManifest.xml
.
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