HaneCa

React NativeでPush Notificationを実現する方法について紹介します。まず、今回、利用したモジュールは、react-native-push-notificationというモジュールです。

まず、通常通り、次のようなコマンドでモジュールをプロジェクトに追加します。

# npm i --save react-native-push-notification
# react-native link react-native-push-notification

2行目は、追加したモジュールの設定を各プラットフォーム(iOS / Android)のプロジェクトファイルに追加するためのコマンドになります。ただ、このモジュールは単にプロジェクトの設定を変更するだけでは利用できないため、このまま実行すると「Native module cannot be null」というエラーが発生すると思います。

そのため、手動で変更する方法について紹介します。基本的には、react nativeの公式サイトに書かれていることです。

１．React Native公式のPush Notification iOS用プロジェクトのインポート

まず、React Nativeプロジェクト・フォルダのiosフォルダ直下にあるxxx.xcodeprjファイルをクリックして、XCodeでプロジェクトを開きます。

次に、FinderでReact Nativeプロジェクト・フォルダ直下にあるnode_modules以下のreact-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeprojファイルをXCode上のプロジェクトのLibrariesディレクトリの直下にドラッグ＆ドロップします。

２．インポートしたプロジェクトとReact Nativeのプロジェクトをつなぐ

次に、インポートしたプロジェクトとReact Nativeのプロジェクトを繋ぎます。具体的には、左側のペインでプロジェクトを選択し、プロジェクトの設定を開きます。そして、Build Phasesを選択し、”Link Binary with Libraries”へ、左側のペインにある先ほど追加したプロジェクトのProductsディレクトリ配下にあるlibRCTPushNotification.aファイルをドラッグ＆ドロップします。

さらに、Build Settingsを選択し、Header Search Pathsに、”$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS”のパス(non-recursive)を追加する。

３．AppDelegate.mファイルを修正する

XCode上で、AppDelegate.mを次のように変更します。

まず、先頭に次の行を追加し、必要なヘッダファイルを読み込むようにします。

#import <React/RCTPushNotificationManager.h>

そして、@endより上の行に次の行を追加します。

// Required to register for notifications
 - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
 {
  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
 }
 // Required for the register event.
 - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
 {
  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
 }
 // Required for the notification event. You must call the completion handler after handling the remote notification.
 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
                                                        fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
 {
   [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
 }
 // Required for the registrationError event.
 - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
 {
  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
 }
 // Required for the localNotification event.
 - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
 {
  [RCTPushNotificationManager didReceiveLocalNotification:notification];
 }

以上で動作するようになります。

参考サイト

• react-native-push-notification
• Native module cannot be nullエラーについて
• Push Notificationのためのプロジェクトの変更方法について
• React Native Push Notification IOS