react-native-nchange-appicon v1.0.1
- Just upload your images from earlier, and checkmark both
iPhone
andAndroid
. - This will give you a
.zip
file with the files needed.
- You need to rename and sort these files slightly differently for both
iOS
andAndroid
.
Android 🤖
1. 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 themipmap-*
directories inside. Inside them place all your generated icons.
iOS 🍏
1. You will need the generated folder called AppIcon.appiconset
as this contains your icons.
2. Rename this folder a bit like above for Android using a naming convention such as <type>.appiconset
e.g. Dark.appiconset
3. 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
Android 🤖
1. Drag all of the mipmap
folders into android/app/src/main/res/
iOS 🍏
1. Drag all of the .appiconset
folders into ios/<app-name>/Images.xcassets
Android 🤖
1. 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, setandroid: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
.
<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 🍏
1. At the bottom of your Info.plist
insert a key for CFBundleIcons
- Note: For iPad, you need to add the key
CFBundleIcons~ipad
- 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.
- The
- In XCode, in your app's
General
settings, underApp Icons and Launch Screen
, set "App Icon" toDefault
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>
import { changeIcon, getIcon, resetIcon } from 'react-native-change-appicon';
// 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
When using react-native-push-notification
, 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.