How to implement Android 13 themed app icon in app.json file?

The official Android Studio document says that a separate app icon layer “monochrome” needs to be defined for a monochromatic app icon to use Android 13’s Themed Icons feature. How do we implement that in expo react native app’s app.json file? I believe it is not the same as adaptive icon’s foregroundImage and backgroundImage.

Hi @tomchangexpo,

Currently, the themed icons feature for Android 13 is not supported in the current version of Expo SDK. We have taken note of supporting this feature. Thanks for bringing this up!

1 Like

Hi Aman,

Thank you for your reply! Before the new EXPO sdk is available for this Themed Icons feature for Android 13, is there any work-around for this? Thanks!

Yes, you should be able to do this by writing a config plugin. Here’s a blog post explaining what needs to be done. You’ll need to write a config plugin that makes the necessary changes to the native project.

Use this for inspiration:

1 Like

Hi Michael,

Thank you for your post and suggestions! The example from Github is for using the Android configuration for adaptive icons, the current EXPO sdk already supports that in app.json file. I will try to see if adding “monochrome” in the code can make the Themed Icons feature work. Thanks again!

I am new to Config Plugin, but my concern is that since “monochrome” property is not under “expo” property in app.json and app.config.js files, I don’t know if it will work or not.

Hi Tom

Yes, the file I pointed you at is the part of the Expo code that does that.

The plugin I pointed you at does indeed get the icon paths from the android.icon or android.adaptiveIcon sections of app.json, which is different to how you would do it if you wrote your own plugin. I suppose they do it like that partly for historical reasons. i.e. the older Expo SDKs (before config plugins) expected the icons to be in those locations and every Expo app had them there. They could have made everybody add something like the following to app.json instead, but it’s probably best that they did not change the config unnecessarily:

  "plugins": [
    [
      "withAndroidIcons",
      {
        "icon": "./assets/icon.png",
        "adaptiveIcon": {
          "foregroundImage": "./assets/adaptive-icon.png",
          "backgroundColor": "#FFFFFF"
        }
      }
    ]
  ]

Anyway, if you wrote a config plugin you should do it similar to the above rather than trying to find the icon details in android.themedIcon or android.monochrome or something like that.

Hi Michael,

Thank you for your explanation and suggestion! I will try it.
Thanks again!

1 Like