サイト管理者
React Native
expoReactNativeReactNavigationニフティクラウド

ReactNativeのPush通知実装＋画面遷移（ちょっと特殊な方法かも？）

React Native
この記事は約5分で読めます。

個人的な備忘録

  • ReactNativeのPush通知を実装する方法について簡単にまとめる
  • ReactNativeでPush通知を実装するのが難しく3ヶ月くらいかかった。。
    （まぁそれは私が日本語・英語読めないガバガバエンジニアのせいなんだけど）

　環境

expo sdk 40
react-native 0.63.4
mBaas ニフティクラウドモバイルバックエンド
プッシュ通知ライブラリ　expo-push-notification "~0.8.2"
画面遷移ライブラリ　react-navigation ５系

なんでそんな時間かかった？

  • Expoで開発していたが、ExpoではPush通知を受信する際に必要なSDKが入れられないためEjectを行った。
  • firebase を利用した実装記事が多すぎてexpoのPush通知ライブラリ+二フクラの組み合わせの実装記事が少なかった。（あったとしても3,4年前）
  • Expoライブラリのバグ問題でPush通知が取得できて押下しても、そこから任意の画面に遷移してくれなかった。
  • Expoのバグを修正したSDKが最近リリースされたから
  • classからfunctionalに変更したから

Expo eject

Expoと二フクラの組み合わせ

  • ニフティクラウドモバイルバックエンドの公式サイトにReactNativeと二フクラの実装記事は存在したが情報が古く、 ライブラリも手入れされていないため、そのまま使用することを断念。
    https://blog.mbaas.nifcloud.com/entry/11331

Expo push-notificationライブラリのバグ

ここで初めてPush通知受信を確認！！！！！！！

だけどAndroidだけのタスクキル状態でPush通知が受信できない問題が発生

フォアもバックもタスクキルも全部動けよおおおおおおおおおおおおおああああああ

というような絶望的に悲しくなってさらに調査・・・・・・

Hooksに変えて実装してみたら・・・・

Androidのタスクキル状態でも通知きたぁぁぁぁぁぁぁぁうわぁぁぁぁぁぁぁぁやたぁぁぁぁぁぁぁ

これでAndroidは大丈夫だし、iOSはクラスコンポーネントの時に動作確認してるから大丈….

iOSでタスクキル状態画面遷移しなくなったよぉぉぉぉぉぉぉぉあああああぁぁぁぁぁぁ

後輩のつよつよエンジニアくんに相談したところ

  • 無能ワイ　　「なぁ。。。。後輩くん。。。。通知が通知してくれないんや。。。。。助けてクレメンス。。。。」
  • 後輩くん　　「ちょっとわかんないですね。。。あ、もしかしたらnavigationのライブラリを最新版にしたら行けるんじゃないですかね？」
  • 無能ワイ　　「いやいやいやww　ライブラリ更新しただけじゃな変わるわk……」
  • ios端末くん　「OK!!!! 画面遷移するやでシュババババババババ」
  • 無能ワイ　　「………」
  • 後輩くん 　「にっこり」

タスクキルされても通知は確認できていたので、画面遷移のライブラリの問題ということがわかりました。嬉しかったけど悲しかったです。（泣）

結論

  • 以下の手順でPush通知＋画面遷移できました
Expo  ⇨ eject 
class ⇨ functionalへ変更
useLastNotificationResponse　⇨ functionalでのみ利用可能
navigationライブラリ ⇨　最新

あとは、ニフクラ側で遷移先の情報がない通知を送った場合のアプリ側で切り替え処理を書かないと落ちちゃいますね。。

もしこれを読んだ方で、Expo ejectしなくても出来たよって方がいらしたらコメントお待ちしております。

参考資料