expo-icon-handler v0.1.7

Expo Icon Handler

Module made specifically to work with Expo. Handles app icon change at runtime for iOS and Android based off of the icon list, provided before the build.

Install

Add the package to your npm dependencies

npm install expo-icon-handler

Note: currently only Expo projects are supported

Configure plugin

To add icons to switch to do the following:

1. Add desired icons to your assets folder
2. Modify your app.json file to contain icon's name and path (see example below). Make sure icon name matches icon file name.
3. From terminal, at your project's root, run npx expo prebuild --clean

Example for app.json for icon1.png

Notice how name is set to icon1, and path contains a file path to icon1.png. Those two must match for both iOS and Android configs to be generated properly.

{
  "expo": {
    ...
    "plugins": [
      [
        "expo-icon-handler",
        {
          "icons": [
            {
              "name": "icon1",
              "path": "./assets/icon1.png"
            }
          ]
        }
      ]
    ]
}

Usage

Use setAppIcon

Returns a boolean. True in case of success and false otherwise.

import {setAppIcon} from 'expo-icon-handler';

...

setAppIcon("icon1");

Use getAppIcon

Returns current app icon as a string. If current app icon is set to default, then "DEFAULT" is returned.

import {getAppIcon} from 'expo-icon-handler';

...

currentIcon: string = getAppIcon();

Development Notes

Notes for myself and anyone else who would like to modify to this repository or contribute to it.

Android Development

Note that Android module is written in Kotlin, and it's recommended to use Android Studio when working directly with it.

To open Android module in Android Studio:

1. Go to Android Studio
2. Open Existing Project
3. Go to /expo-icon-handler/example/android

iOS Development

Note that iOS module is written in Swift, and it's recommended to use Xcode when working directly with it.

To open iOS module in Xcode:

1. Go to Xcode
2. Open Existing Project
3. Go to /expo-icon-handler/example/ios/expoiconhandlerexample.xcworkspace

(note: it's .xcworkspace, not .xcodeproj)

How to compile plugin

This module contains custom plugins. Their code is written in .ts files and is located at plugin/src/ folders.

If you want to change a plugin's code, you need to modify its .ts part.

To apply changes made to the plugin, from the root of the project run:

npm run build plugin