浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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 のプッシュ通知アイコンを設定する方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)