Marketing Tool: Shows potential for A/B testing different icon designs.
Installation
Install react-native-change-icon into your react native project using
yarn add react-native-change-icon or npm i react-native-change-icon
Generate your AppIcons using AppIconGenerator
- Sample Icons are in the
./images folder import into the app icon generator and generate app icons for iPhone and Android( you can create for all operating systems)
App Generator
Android
- Open generated zip folder, navigate to android folder and rename all icons to desired name
App Icon rename
ios
- Open the generated zip folder, navigate to ios folder and rename the
AppIcon.appiconset to desired icon name
App Icon rename
- Edit Contents.json and change the
Assets.xcassets/AppIcon.appiconset to new Icon name e.g. Images.xcassets/HarpIcons.appiconset
REPEAT ABOVE STEPS FOR ALL OTHER ICONS
Android: Drag all of the mipmap folders into android/app/src/main/res/
Android folder
ios : Drag all of the .appiconset folders into ios//Images.xcassets
ios folder
Environment Setup
Android
- Add an alias for each of your new icons within the AndroidManifest.xml (within ).
- Make sure these have the properties as shown below.
- Create an alias for .MainActivityDefault as well but for this, set android:enabled="true".
- For the name prefix it .MainActivity... followed by the name you will use to reference your icon. e.g. for our HarpIcons icon we will use .MainActivityHarpIcons
Android Manifest
ios
- At the bottom of your Info.plist insert a key for CFBundleIcons.
- Within this dictionary add another key for CFBundleAlternateIcons
- In XCode, in your app's General settings, under App Icons and Launch Screen, set "App Icon" to Default and check the "Include all app icon assets" checkbox below.
- 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.
Infoplist
Usage
To use the changeIcon functionality, simply import it along with any other required methods from the library:
import { changeIcon, getIcon, resetIcon } from 'react-native-change-icon';
// Pass the name of icon to be enabled
changeIcon('HarpIcons');
That's it! You can now seamlessly change icons based on your implementation logic.
Troubleshooting and Common Issues
When implementing react-native-change-icon, especially in an Expo-managed project, you might encounter some challenges. Here are solutions to common problems:
Accessing Native iOS and Android Files in Expo
Problem: Expo-managed projects don't have direct access to native iOS and Android files by default.
Solution: Use the prebuild command to generate native projects:
expo prebuild
This command creates ios and android folders in your project, allowing you to modify native files as needed for icon changing functionality.
Note: After running prebuild, your project becomes an Expo "bare" workflow project. Be sure to commit these changes to version control.
Testing Production Builds on iOS
Problem: Testing icon changing in a production environment on iOS requires a release build.
Solution: Use the following command to create and run a release build on an iOS device:
npx expo run:ios --configuration Release --device
This command:
Builds your app in release configuration
Installs it on a connected iOS device
Allows you to test icon changing functionality in a production-like environment
Testing Production Builds on Android
Problem: Testing icon changing in a production environment on Android requires a release APK.
Solution: Follow these steps to create and test a release APK
- Navigate to the android directory in your project:
cd android
- Run the Gradle task to assemble the release APK:
./gradlew assembleRelease
- The APK will be generated in
android/app/build/outputs/apk/release/app-release.apk
Install the APK on your Android device or emulator to test the icon changing functionality in a production environment.