ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

Expoでadaptive Iconに対応する

androidのアイコンが悲しい感じになっていたのでadaptive Iconに対応しました。

↓現在のアイコン

f:id:wheatandcat:20190811235817p:plain:w300

adaptive Icon

developer.android.com

androidにはadaptive Iconという規格があって、こちらで設定する白色の背景色を消すことができます。

docs.expo.io

Expoでは、以下で設定できます

■app.json

{
  "expo": {
    ....(略)

    "android": {
      "package": "com.wheatandcat.peperomia",
      "versionCode": 7,
      "adaptiveIcon": {
        "backgroundColor": "#006835",  ← 追加
        "foregroundImage": "./assets/icon-fg.png" ← 追加
      }
    }

上記のアダプティブ アイコンドキュメントに記載してありますが、foregroundImageのサイズはキャンパスサイズは「108 x 108 dp 」でアイコンのサイズ「 72 x 72 dp 」で設定してあげます

画像は以下のような感じです(背景色の黒は透過設定する)

実際にビルドすると、こんな感じ

f:id:wheatandcat:20190812000940p:plain:w300

良い感じになりました