react-native-change-icon v5.0.0
- 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
2. Within this dictionary add another key for CFBundleAlternateIcons
3. 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, 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-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.
9 months ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago