React-native not receiving push notifications, using Firebase Cloud functions

Question

Note: I am testings on a real device

I am trying to send push notifications to my react-native app using Firebase Cloud Functions.

Below is my Cloud Function:

const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp(functions.config().firebase);

exports.sendNewMessageNotification = functions.database.ref('users').onWrite(event => {
    const getValuePromise = admin.database()
                                 .ref('users')
                                 .orderByKey()
                                 .limitToLast(1)
                                 .once('value');

    return getValuePromise.then(snapshot => {

        const payload = {
            notification: {
                title: 'Dot notification',
                body: 'A new user has been added',
            }
        };

        return admin.messaging()
                    .sendToTopic('secret-chatroom', payload);
    });
});

The above cloud function is being executed without any error:

Below is my Notification listener in my app:

import * as Type from '../actions/types';
import FCM, { FCMEvent,
              NotificationType,
              WillPresentNotificationResult,
              RemoteNotificationResult } from 'react-native-fcm';
import { Platform } from 'react-native';
import { takeLatest, put, call } from 'redux-saga/effects';


function* listenToNotifications() {
    FCM.requestPermissions();
    FCM.getFCMToken()
       .then(token => {
           console.log(token) //being logged
       });
    FCM.subscribeToTopic('secret-chatroom');

    FCM.on(FCMEvent.Notification, async (notif) => {
        console.log(notif); //not being logged
        alert('Notification recieved');

        if (Platform.OS === 'ios') {
            switch (notif._notificationType) {
                case NotificationType.Remote:
                    notif.finish(RemoteNotificationResult.NewData); //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
                    break;
                case NotificationType.NotificationResponse:
                    notif.finish();
                    break;
                case NotificationType.WillPresent:
                    notif.finish(WillPresentNotificationResult.All); //other types available: WillPresentNotificationResult.None
                    break;
              }
            }
    });

    FCM.on(FCMEvent.RefreshToken, token => {
        console.log(token);
    });
}


export default function* appNotificationsSaga() {
    yield takeLatest(Type.LISTEN_TO_NOTIFICATIONS, listenToNotifications);
}

FCM.getFCMToken value is being logged, but I am not receiving any notifications when cloud function is executed. Can someone please tell what I am doing wrong?

Answer 1

You are not receiving notification probably because firebase is not integrated properly in your application. The steps to integrate properly are given below:

react-native-firebase library did not work for me .Integrating firebase to react native application using react-native-fcm succeded in receiving push notifications.

1.Install react-native-fcm: npm install react-native-fcm --save

2. From firebase console, for Android: download google-services.json file and place it in android/app directory. for iOS: download GoogleService-Info.plist file and place it in /ios/your-project-name directory (next to your Info.plist)

3.Configure the project using : cd ios && pod init

4.Edit the newly created Podfile: pod install

5.Edit AppDelegate.h:

    @import UserNotifications;

    @interface AppDelegate:UIResponder<UIApplicationDelegate,UNUserNotificationCenterDelegate>

    @interface AppDelegate : UIResponder <UIApplicationDelegate>

6.Edit AppDelegate.m:

#import "RNFIRMessaging.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

[FIRApp configure];
[[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];

return YES;

}

-(void)userNotificationCenter:(UNUserNotificationCenter *)center 
willPresentNotification:(UNNotification *)notification 
withCompletionHandler:(void (^) . 
      (UNNotificationPresentationOptions))completionHandler
 {
    [RNFIRMessaging willPresentNotification:notification 
     withCompletionHandler:completionHandler];
 }

#if defined(__IPHONE_11_0)

- (void)userNotificationCenter:(UNUserNotificationCenter *)center 
  didReceiveNotificationResponse:(UNNotificationResponse *)response 
   withCompletionHandler:(void (^)(void))completionHandler
{
    [RNFIRMessaging didReceiveNotificationResponse:response 
     withCompletionHandler:completionHandler];
}

#else

- (void)userNotificationCenter:(UNUserNotificationCenter *)center 
  didReceiveNotificationResponse:(UNNotificationResponse *)response 
  withCompletionHandler:(void(^)())completionHandler
{
    [RNFIRMessaging didReceiveNotificationResponse:response 
    withCompletionHandler:completionHandler];
 }

#endif

 //You can skip this method if you don't want to use local notification
-(void)application:(UIApplication *)application 
didReceiveLocalNotification:(UILocalNotification *)notification {

[RNFIRMessaging didReceiveLocalNotification:notification];

 }

- (void)application:(UIApplication *)application 
didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo 
fetchCompletionHandler:(nonnull void (^) . 
(UIBackgroundFetchResult))completionHandler{

[RNFIRMessaging didReceiveRemoteNotification:userInfo 
fetchCompletionHandler:completionHandler];
}

7.Add the path of header files into XCode:

Open XCode. Press CMD+1 or click the XCode project. Go to Build Settings, selecting All and Combined. Search Header Search Path in the searchg tab. Make sure there is a line of $(SRCROOT)/../node_modules/react-native-fcm/ios. If no, just add it.

8.Add GoogleService-Info.plist:

Make sure the file is not just moved into the folder. You need to Right Click the project folder in XCode and Add File to . Select Copy if needed in the Options page while selecting the file.

9.Shared Library Settings:

Make sure you see Pods.xcodeproj under Library folder if you are using Pod install method. Make sure you see RNFIRMessaging.xcodeproj under Library folder. If you don't see any of these files, please add them by Right Click the Library folder and Add File to to add them back. Pods.xcodeproj should be under ios/Pods/, and RNFIRMessaging.xcodeproj should be under node_modules/react-native-fcm/ios. Make sure you see libRNFIRMessaging.a under Link Binary With Libraries under Build Phases tab. If no, drag the file under RNFIRMessaging.xcodeproj under Library folder into there.

10.Add Capabilities Select your project Capabilities and enable: Push Notifications Background Modes > Remote notifications.

FirebaseAppDelegateProxyEnabled This instruction assumes that you have FirebaseAppDelegateProxyEnabled=YES (default) so that Firebase will hook on push notification registration events. If you turn this flag off, you will be on your own to manage APNS tokens and link with Firebase token.

Answer 2

First of all, you will not receive the notification on an emulator, so make sure you have debugged remote device with internet connection.

Second, follow the react-native-fcm detail and there are two approaches

Pod approach:

Make sure you have Cocoapods version > 1.0

Configure the project:

cd ios && pod init

(In case of syntax errors, open YOURApp.xcodeproj/project.pbxproj and fix them.)

Edit the newly created Podfile, you can find it in ios folder->Podfile add the + lines into the file

# Pods for YOURAPP
+ pod 'Firebase/Messaging'
target 'YOURApp' do
+ pod 'react-native-fcm', :path => '../node_modules/react-native-fcm'
...
end

Install the Firebase/Messaging pod:

pod install

If this approach does not work you can follow the

Non-Cocoapod approach

1. Download the Firebase SDK framework from Integrate without CocoaPods. Import libraries, add Capabilities (background running and push notification), upload APNS and etc etc etc...
2. Put frameworks under ios/Frameworks folder
3. Follow the README to link frameworks (Analytics+Messaging)

Shared steps (THIS SHOULD BE FOR BOTH APPROACHES)

Edit AppDelegate.h:

+ @import UserNotifications;
+
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>
Edit AppDelegate.m:

+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];

    return YES;
 }

+
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
+ {
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
+ }
+
+ #if defined(__IPHONE_11_0)
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
+
+ //You can skip this method if you don't want to use local notification
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
+   [RNFIRMessaging didReceiveLocalNotification:notification];
+ }
+
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+ }

Add Capabilities now when you want to build your app in Xcode make sure to turn push notification on in your capabilities settings and integrate it with your apple developer account. Then try to run the application on your device and it should run fine.

Select your project Capabilities and enable:
Push Notifications
Background Modes > Remote notifications.

This should make the push notifications works, its long steps but its done for one time :)