Supported Platforms
yarn add react-native-change-icon
npm i react-native-change-icon
I'd suggest exporting them around `1024px` or higher.
Use a service such as https://www.appicon.co/ in order to generate the platform specific icon files.
iPhone
and Android
..zip
file with the files needed.
iOS
and Android
.Android š¤
ic_launcher_<type>.png
e.g. ic_launcher_dark.png
mipmap-hdpi
... etc.android
directory with all the mipmap-*
directories inside. Inside them place all your generated icons.iOS š
AppIcon.appiconset
as this contains your icons.<type>.appiconset
e.g. Dark.appiconset
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
Android š¤
mipmap
folders into android/app/src/main/res/
iOS š
.appiconset
folders into ios/<app-name>/Images.xcassets
Android š¤
AndroidManifest.xml
(within <application>
).
.MainActivityDefault
as well but for this, set android:enabled="true"
..MainActivity...
followed by the name you will use to reference your icon. e.g. for our light icon we will use .MainActivityLight
LAUNCHER
intent filter from the main <activity>
as we have added the launcher in .MainActivityDefault
.<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 š
Info.plist
insert a key for CFBundleIcons
CFBundleIcons~ipad
CFBundleAlternateIcons
key
is the name you will reference from within code..appiconset
we created earlier.General
settings, under App Icons and Launch Screen
, set "App Icon" to Default
and check the "Include all app icon assets" checkbox below.<key>Dark</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>Dark</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
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.
react-native-push-notification and notifee
When using react-native-push-notification
or notifee
, notifications won't work as we are using activity-alias
.
To fix this, you need to create a Java file for each of the activity-alias
in your AndroidManifest.xml
.
The file should be placed alongside you MainActivity.java
. Example:
android/app/src/main/java/com/myapp/MainActivity<KEY>.java
The content of this file should be:
package com.myapp;
public class MainActivity<KEY> extends MainActivity {}
Replace <KEY>
with the icon name used in the manifest. Replace com.myapp with your android app structure.