【React Native】 React Native FirebaseでAndroidのプッシュ通知アイコンを設定する

相変わらず React Native Firebase に苦戦中ですが、進捗があったので備忘録としてまとめ。
タイトル通り、Android のプッシュ通知アイコンを設定する方法についてです。
iOS の場合は、アプリアイコンをそのまま使ってくれるのですが、Android の場合は別途設定しないと白い四角形または円形が表示されてしまうので、その対処法についてです。

参考にさせていただいた記事はこちらから。

How to change remote push notification icon for React Native(android) application – Stack Overflow
https://stackoverflow.com/questions/46344174/how-to-change-remote-push-notification-icon-for-react-nativeandroid-applicatio/46345663

 

まず、事前準備としてアイコンの PNG 画像を用意します。
この時、アイコン画像は白一色の透過画像で、アプリアイコンなどのロゴ画像を抜き出したものがいいと思います。
サイズは下記のとおりです。

  • mipmap-hdpi: 72 × 72
  • mipmap-mdpi: 48 × 48
  • mipmap-xdpi: 96 × 96
  • mipmap-xxdpi: 144 × 144
  • mipmap-xxxdpi: 192 × 192

なお、画像ファイル名はすべて同じ名前を設定してください。
私は「fcm_push_icon.png」にしました。
画像が用意出来たら、android\app\src\main\res ディレクトリ以下のそれぞれの mipmap フォルダに対応したサイズの画像を保存してください。

上記が完了したら、次に AndroidManifest.xml を開きます。
そうしたら、<application> タブ内に下記を追加します。

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/fcm_push_icon" />

android:resource="@mipmap/fcm_push_icon" の部分は、アイコン画像のファイル名に応じて適宜変更してください。
設定は以上です!

あとは、Android の実機でプッシュ通知のテスト送信を行ってみたところ、きちんと設定したアイコンが反映されていました!
他の記事では、通知色も設定しなければいけないという記述もありましたが…今のところ、アイコンの設定だけで大丈夫そうなので、こちらについては様子を見たいと思います。

 

以上、React Native Firebase で Android のプッシュ通知アイコンを設定する方法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG