virajpsimformsolutions / app-icon

Update your apps icon with React Native using Apple's alternate icons API.

twitter-icon-change.mp4

Update your apps icon on iOS using Apples alternate icons API.

Installation

yarn add @candlefinance/app-icon

Features

• Supports the new React Native architecture
• Simple async API
• TypeScript support
• Mostly written in Swift

Prerequisites

To add alternative icons to your iOS & Android app you need to:

iOS

1. 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.

2. 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.

Android

1. Add the icons to your Android project
2. Create activity-alias, see the example app for reference or add the following to your AndroidManifest.xml.

Usage

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);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT