This library enables React Native developers to dynamically change the app icon at runtime for both iOS and Android platforms. It provides easy-to-use methods to retrieve the current app icon and switch between different icons based on user interaction or any logic within the app.
- Change app icon dynamically at runtime.
- Retrieve the current app icon.
- Cross-platform support (iOS and Android).
npm install react-native-dynamic-icon-changer
yarn add react-native-dynamic-icon-changerLink the native modules (if auto-linking is not enabled):
react-native link react-native-dynamic-icon-changerimport { changeAppIcon, getAppIcon } from 'react-native-dynamic-icon-changer';To change the app icon dynamically:
changeAppIcon('YourIconName')
.then((newIconName) => console.log(`Icon changed to: ${newIconName}`))
.catch((error) => console.error('Failed to change app icon:', error));-
YourIconNameshould match the icon name defined in the native configuration. - For iOS, it corresponds to the
CFBundleIconNamein theInfo.plistfile. - For Android, it corresponds to the alias name defined in
AndroidManifest.xml.
To retrieve the current app icon:
getAppIcon()
.then((currentIcon) => console.log(`Current app icon: ${currentIcon}`))
.catch((error) => console.error('Failed to get current app icon:', error));Upload your icon to appicon.co, select the necessary options, click the generate button, and download the result.
- Open your
Info.plistfile and define alternate icons:
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcon</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>AppIcon2</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcon2</string>
</array>
</dict>
<key>AppIcon3</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>AppIcon3</string>
</array>
</dict>
</dict>
</dict>-
add icons to your ios file
-
xCode > General > App Icons and launch Screen > Include all app Icon assets will be selected
-
cd ios pod update cd ..
- Open your
AndroidManifest.xmlfile and define activity aliases for alternate icons:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CHANGE_COMPONENT_ENABLED_STATE" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme"
android:supportsRtl="true">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity-alias
android:name=".MainActivityDefault"
android:enabled="false"
android:exported="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:targetActivity=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>
<activity-alias
android:name=".MainActivityIcon2"
android:enabled="false"
android:exported="true"
android:icon="@mipmap/ic_launcher_2"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round_2"
android:targetActivity=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>
<activity-alias
android:name=".MainActivityIcon3"
android:enabled="false"
android:exported="true"
android:icon="@mipmap/ic_launcher_3"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round_3"
android:targetActivity=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>
</application>
</manifest>
-
android > app > src > main > res add icons to your android file
-
cd android && ./gradlew clean && cd ..
-
Parameters:
-
iconName: The name of the icon to switch to. - Use "Default" for the primary icon.
-
-
Returns:
- A promise resolving to the name of the new icon or rejecting with an error.
-
Returns:
- A promise resolving to the name of the current icon or rejecting with an error.
Common errors include:
-
ACTIVITY_NOT_FOUND: The current activity is null. -
EMPTY_ICON_STRING: Icon name is not provided. -
ICON_ALREADY_USED: The icon is already active. -
ICON_INVALID: The specified icon name is invalid. -
IOS:NOT_SUPPORTED: Alternate icons are not supported on the device.
Here is a simple example demonstrating the usage:
import React, { useEffect, useState } from 'react';
import { View, Button, Text } from 'react-native';
import { changeAppIcon, getAppIcon } from 'react-native-dynamic-icon-changer';
const App = () => {
const [currentIcon, setCurrentIcon] = useState('');
useEffect(() => {
getAppIcon().then(setCurrentIcon).catch(console.error);
}, []);
const switchIcon = (iconName) => {
changeAppIcon(iconName)
.then(() => setCurrentIcon(iconName))
.catch(console.error);
};
return (
<View>
<Text>Current App Icon: {currentIcon}</Text>
<Button
title="Change iOS Icon to Default"
onPress={() => switchIcon('Default')}
/>
<Button
title="Change iOS Icon to AppIcon2"
onPress={() => switchIcon('AppIcon2')}
/>
<Button
title="Change iOS Icon to AppIcon3"
onPress={() => switchIcon('AppIcon3')}
/>
<Button
title="Set Android Icon to Default"
onPress={() => switchIcon('Default')}
/>
<Button
title="Change Android Icon to Icon2"
onPress={() => switchIcon('Icon2')}
/>
<Button
title="Change Android Icon to Icon3"
onPress={() => switchIcon('Icon3')}
/>
</View>
);
export default App;- Fork the repository.
- Create a new feature branch.
- Submit a pull request with detailed changes.
MIT License. See the LICENSE file for more details.
Rıdvan Üçdağ
https://github.com/ridvanucdag https://www.linkedin.com/in/ridvanucdag
