React Native Change Icon
Programmatically change the application icon.
---
Supported Platforms
yarn add react-native-change-icon
npm i react-native-change-icon
---
How to Use
---
1.
Make your Icons
I'd suggest exporting them around `1024px` or higher.
---
2.
Generate Icons
Use a service such as https://www.appicon.co/ in order to generate the platform specific icon files.
- Just upload your images from earlier, and checkmark both `iPhone` and `Android`.
- This will give you a `.zip` file with the files needed.
---
3.
Prepare Icon Files
- You need to rename and sort these files slightly differently for both `iOS` and `Android`.
**Android 🤖**
1. Simply just rename them to something appropriate - typically this follows the naming convention `ic_launcher_.png` e.g. `ic_launcher_dark.png`
- Make sure to keep them within the folder structure they are in `mipmap-hdpi`... etc.
2. Create a single `android` directory with all the `mipmap-*` 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 `.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`
---
4.
Import the Icons
**Android 🤖**
1. Drag all of the `mipmap` folders into `android/app/src/main/res/`
**iOS 🍏**
1. Drag all of the `.appiconset` folders into `ios//Images.xcassets`
---
5.
Setup Environments
**Android 🤖**
1. 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 light icon we will use `.MainActivityLight`
2. You'll have to remove the `LAUNCHER` intent filter from the main `` as we have added the launcher in `.MainActivityDefault`.
```xml
```
**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.
4. 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.
```xml
Dark
CFBundleIconFiles
Dark
UIPrerenderedIcon
```
---
6.
Use the Icons
You can now use your icons and switch between them within React Native 🎉
```javascript
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.
