8000 GitHub - howincodes/expo-dynamic-app-icon: πŸ€– Programmatically change the app icon in Expo.
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

howincodes/expo-dynamic-app-icon

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 @howincodes/expo-dynamic-app-icon

Easily change your app icon dynamically in Expo SDK 52!

πŸš€ What's New in v2:

✨ Android icon change without app restart! ✨ Seamless icon updates while the app stays running ✨ Improved stability and performance

🎁 Features:

βœ… Reset icon to default βœ… Support for round icons βœ… Different icons for iOS and Android βœ… Dynamic icon variants for iOS (light, dark, tinted) βœ… iOS icon update with or without alert popup βœ… Simple API to get and set the app icon

DemoπŸš€

dynamic-icon-demo-5


πŸ“¦ Installation

npx expo install @howincodes/expo-dynamic-app-icon

πŸ”§ Setup

Add the plugin to your app.json:

"plugins": [
  [
    "@howincodes/expo-dynamic-app-icon",
    {
      "defaultLight": {
        "ios": "./assets/ios_icon_light.png",
        "android": {
          "foregroundImage": "./assets/android_icon_light_fg.png",
          "backgroundColor": "#FFFFFF"
        }
      },
      "defaultDark": {
        "ios": "./assets/ios_icon_dark.png",
        "android": {
          "foregroundImage": "./assets/android_icon_dark_fg.png",
          "backgroundColor": "#121212"
        }
      },
      "legacyRed": {
        "ios": "./assets/ios_icon_red.png",
        "android": "./assets/android_icon_red_legacy.png" // Legacy string format still supported
      },
      "dynamicTheme": {
        "ios": {
          "light": "./assets/ios_icon_themed_light.png",
          "dark": "./assets/ios_icon_themed_dark.png",
          "tinted": "./assets/ios_icon_themed_tinted.png"
        }
        // Android can also use the adaptive format here if desired
      }
    }
  ]
]

Note on Android Adaptive Icons: For Android, you can now provide an object with foregroundImage (path to your foreground asset) and backgroundColor (hex string) to generate proper adaptive icons. If you provide a direct string path, it will be treated as a legacy icon.


πŸ“œ Android Setup

Run the following command:

expo prebuild

Then, check if the following lines have been added to AndroidManifest.xml. The android:icon and android:roundIcon attributes will point to different resources based on your configuration:

For Adaptive Icons (example: defaultDark):

<activity-alias
  android:name="expo.modules.dynamicappicon.example.MainActivitydefaultDark"
  android:enabled="false"
  android:exported="true"
  android:icon="@mipmap/ic_launcher_adaptive_defaultdark"
  android:roundIcon="@mipmap/ic_launcher_adaptive_defaultdark"
  android:targetActivity=".MainActivity">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity-alias>

For Legacy Icons (example: legacyRed):

<activity-alias
  android:name="expo.modules.dynamicappicon.example.MainActivitylegacyRed"
  android:enabled="false"
  android:exported="true"
  android:icon="@mipmap/legacyred"
  android:roundIcon="@mipmap/legacyred_round"
  android:targetActivity=".MainActivity">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity-alias>

πŸš€ Usage

Set App Icon

import { setAppIcon } from "@howincodes/expo-dynamic-app-icon";

/**
 * Change app icon to 'red'
 */
setAppIcon("red");

/**
 * Reset to default icon
 */
setAppIcon(null);

βœ… Available Parameters:

setAppIcon(
  name: IconName | null,
  isInBackground?: boolean
)
Parameter Type Default Description
name IconName | null null The icon name to switch to. Pass null to reset to the default icon.
isInBackground boolean true - true: Icon changes silently in the background (no alert on iOS).
- false: Immediate change, with system alert on iOS.

βœ… Returns:

  • "DEFAULT" if reset to the original icon.
  • The new icon name on success.
  • false if an error occurs.

Get Current Icon

import { getAppIcon } from "@howincodes/expo-dynamic-app-icon";

// Get the current app icon name
const icon = getAppIcon();
console.log(icon); // "red" (or "DEFAULT" if not changed)

⚠️ Notes:

  • Android limitations: Android does not support icon changes while the app is running in the foreground. To work around this, the icon is changed when the app enters the Pause state (background).

  • ⚠️ Pause state can also trigger during events like permission dialogs. To avoid unwanted icon changes, a 5-second delay is added to ensure the app is truly in the background.

  • To disable the delay and apply the icon change immediately (with the risk of it running during permission dialogs or other pause events), set:

    setAppIcon("red", false);
    • On iOS, isInBackground: false triggers the system alert immediately.
    • On Android, it applies the icon change right away without waiting.

β˜• Support the Original Author

A huge shoutout to outsung for the original package! πŸŽ‰

If you find this useful, consider buying him a coffee:

Buy Me A Coffee

🌐 About Us

This package is maintained by HowinCloud – delivering powerful cloud-based solutions for modern app development.

πŸ”₯ Enjoy building dynamic and customizable apps with Expo! πŸš€

About

πŸ€– Programmatically change the app icon in Expo.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 63.4%
  • Kotlin 23.2%
  • JavaScript 6.0%
  • Swift 5.4%
  • Ruby 2.0%
0