【React Native】「react-native-push-notification」を使ってアプリにローカルプッシュを実装する

今回は、React Native で Firebase Cloud Messaging などを使わずに、ローカルのプッシュ通知を送る方法についてです。

使用したライブラリの GitHub はこちら。

GitHub – zo0r/react-native-push-notification: React Native Local and Remote Notifications
https://github.com/zo0r/react-native-push-notification

 

実装手順は、まず下記コマンドでライブラリをインストールします。

npm install --save react-native-push-notification

インストール作業は以上です。
なお、私の環境では、先に react-native-firebase を追加していたため、これ以上の設定は追加しなくても動作しましたが、場合によっては、プラットフォーム毎に設定が必要な可能性もありますのでご注意ください。

では、コードを実装していきます。
まずローカルプッシュ通知を送信したいページで下記を追加します。

import PushNotification from 'react-native-push-notification';

あとは、プッシュ通知を送信したいタイミングで下記を実行すればOKです!

PushNotification.localNotification({
  title: [タイトル],
  message: [メッセージ内容],
  smallIcon: 'fcm_push_icon',
});

こちらを実行すると、ローカルプッシュ通知が即座に送信されます。

なお、4行目の smallIcon は Android の設定で、プッシュ通知のアイコンを設定しています。
こちらの画像ファイルは、android\app\src\main\res ディレクトリの各 mipmap ディレクトリ以下に追加したアイコン画像のファイル名を指定します。
私の場合、プッシュ通知のアイコン画像のファイル名を fcm_push_icon.png にしているので、上記のように指定しました。

実際に Android で実行してみたところ、問題なくローカルプッシュが送られてきました!
アイコンもばっちり反映されていました。

 

以上、React Native で「react-native-push-notification」ライブラリを使ってアプリにローカルプッシュを実装する方法についてでした。
ご参考になれば幸いです。

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

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

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

CTR IMG