react-native-change-icon

React Native Change Icon

Programmatically change the application icon.

Supported Platforms

yarn add react-native-change-icon
npm i react-native-change-icon

How to Use

1. Make your Icons

I'd suggest exporting them around `1024px` or higher.

Example Icon Files

2. Generate Icons

Use a service such as https://www.appicon.co/ in order to generate the platform specific icon files.

• Just upload your images from earlier, and checkmark both iPhone and Android.
• This will give you a .zip file with the files needed.

3. Prepare Icon Files

• You need to rename and sort these files slightly differently for both iOS and Android.

Android 🤖

• Simply just rename them to something appropriate - typically this follows the naming convention ic_launcher_<type>.png e.g. ic_launcher_dark.png
  • Make sure to keep them within the folder structure they are in mipmap-hdpi... etc.
• Create a single android directory with all the mipmap-* directories inside. Inside them place all your generated icons.

Example Android Icon Sets

iOS 🍏

• You will need the generated folder called AppIcon.appiconset as this contains your icons.
• Rename this folder a bit like above for Android using a naming convention such as <type>.appiconset e.g. Dark.appiconset
• You will also need to edit the Contents.json to change and references from Assets.xcassets/AppIcon.appiconset to what you have renamed the file now e.g. Images.xcassets/AppIcon.appiconset

Example iOS Icon Sets

4. Import the Icons

Android 🤖

• Drag all of the mipmap folders into android/app/src/main/res/

iOS 🍏

• Drag all of the .appiconset folders into ios/<app-name>/Images.xcassets

5. Setup Environments

Android 🤖

• Add an alias for each of your new icons within the AndroidManifest.xml (within <application>).
  • Make sure these have the properties as shown below.
  • Create an alias for .MainActivityDefault as well but for this, set android:enabled="true".
  • For the name prefix it .MainActivity... followed by the name you will use to reference your icon. e.g. for our light icon we will use .MainActivityLight
• You'll have to remove the LAUNCHER intent filter from the main <activity> as we have added the launcher in .MainActivityDefault.

Example AndroidManifest.xml

<activity-alias 
	android:name=".MainActivityLight"
	android:enabled="false"
	android:exported="true"
	android:icon="@mipmap/ic_launcher_light"
	android:targetActivity=".MainActivity">
	<intent-filter>
		<action android:name="android.intent.action.MAIN" />
		<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity-alias>

iOS 🍏

• At the bottom of your Info.plist insert a key for CFBundleIcons
• Within this dictionary add another key for CFBundleAlternateIcons
• Finally then within this dictionary you can add in the keys for you new icons
  • The key is the name you will reference from within code.
  • Set the first array item to the name of the .appiconset we created earlier.
• In XCode, in your app's General settings, under App Icons and Launch Screen, set "App Icon" to Default and check the "Include all app icon assets" checkbox below.

Example Info.plist

<key>Dark</key>
<dict>
	<key>CFBundleIconFiles</key>
	<array>
		<string>Dark</string>
	</array>
	<key>UIPrerenderedIcon</key>
	<false/>
</dict>

6. Use the Icons

You can now use your icons and switch between them within React Native 🎉

import { changeIcon, getIcon, resetIcon } from 'react-native-change-icon';

// Pass the name of icon to be enabled
changeIcon('Dark');
changeIcon('Light');

// Get the icon currently enabled
getIcon();

// Reset the Icon to the default
resetIcon();

All functions are typed and return a promise that either resolves successfully, or will reject with the error that has occurred.