react-native-nchange-appicon v1.0.1
- Just upload your images from earlier, and checkmark both
iPhoneandAndroid. - This will give you a
.zipfile with the files needed.
- You need to rename and sort these files slightly differently for both
iOSandAndroid.
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
androiddirectory 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
.MainActivityDefaultas 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
LAUNCHERintent 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
keyis the name you will reference from within code. - Set the first array item to the name of the
.appiconsetwe created earlier.
- The
- In XCode, in your app's
Generalsettings, underApp Icons and Launch Screen, set "App Icon" toDefaultand 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>.javaThe 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.