react-native-change-icon
v5.0.0
Published
Change application icon programmatically in React-Native.
Downloads
28,001
Readme
- 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 🤖
- 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.
- Make sure to keep them within the folder structure they are in
- Create a single
android
directory with all themipmap-*
directories inside. Inside them place all your generated icons.
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 fromAssets.xcassets/AppIcon.appiconset
to what you have renamed the file now e.g.Images.xcassets/AppIcon.appiconset
Android 🤖
- Drag all of the
mipmap
folders intoandroid/app/src/main/res/
iOS 🍏
- Drag all of the
.appiconset
folders intoios/<app-name>/Images.xcassets
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, 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 🍏
- At the bottom of your
Info.plist
insert a key forCFBundleIcons
- 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-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.