React-native-firebase: How configure and enable FCM in react-native using react-native-Firebase v6 which does not have support for notifications yet? - Documentation Missing

[yash-atreya]

Documentation Feedback

---

I didn't find any information on how to configure FCM for iOS to receive notifications(cloud messages) in all kinds of AppStates.

I have managed to configure Android to receive cloud messages for Background state but couldn't find any info on how to set it up for foreground?

I was finding tutorials to do the above but, all the tutorials are outdated and are using react-native-firebase v5 which has notifications support, hence I was not able to follow these tutorials.

Please point to some updated tutorials or add them in your docs.
Thank you.

[mikehardy]

In v6 I don't think there is much setup. You just need to hook the listener that is called when FCM are received while app is running if I understand correctly https://invertase.io/oss/react-native-firebase/v6/messaging/reference/module#onMessage

[yash-atreya]

In v6 I don't think there is much setup. You just need to hook the listener that is called when FCM are received while app is running if I understand correctly https://invertase.io/oss/react-native-firebase/v6/messaging/reference/module#onMessage

Thank you for the quick response.
I'm new at this, so I just had one more question,
Where should I put the listeners to listen for remote notifications in all AppStates(background, foreground) of both iOS and Android??
In the root/App.js ??

[mikehardy]

I think that gets app specific. I don't do redux but maybe it's in a store there and triggers on a state change? For ReSub it might be like that. I'd say where ever you handle application state and services that can do navigation, it'll be somewhere in there but no answer will fit everyone so you'll have to try things and do what works. I have a bootstrapper that starts a bunch of singleton services from index.js before it mounts the root view, and one of those listens while also having a handle to my navigator so it can do the needful.

[yash-atreya]

Okay thank you so much

[austinthetaco]

I just ran into the documentation issue. There is a bit in the cloud messaging with a broken link in the documentation. To learn how to display notifications to users, view the Notifications module. Clicking "notifications" leads to a 404.

So are you saying it's still possible to do notifications with v6? or should i rollback to v5?

[mikehardy]

The notifications module is not actually part of the underlying Firebase SDKs, so it wasn't strictly necessary to port it to v6 - even though it is of course useful. Cloud messaging is obviously a firebase thing and it is in v5 and v6. If you must have notifications there has been some success with people using react-native-firebase v6 + cloud messaging + react-native-push-notifications. Or you can stay on v5 for now. You can read all about it at #2566

[yash-atreya]

@mikehardy I added the listener in my App.js to receive notifications on iOS, its not working.
App.js: (Please correct me if I am wrong in my code)

...
const registerNotif = async () => {
  const isRegisteredForRemoteNotifications = await messaging()
    .registerForRemoteNotifications();
  const hasPermission = await messaging().hasPermission();
  if (hasPermission) {
    const fcmToken = await messaging().getToken();
  } else {
    try {
      await messaging().requestPermission();
    } catch {
      console.log('User Denied permission');
    }
  }
};
registerNotif();

const fcmListener = async () => {
  await messaging().onMessage(async remoteMessage => {
    console.log('remoteMessage: ', remoteMessage.data);
  });
};

fcmListener();
...

What are the steps to receive remote notifications from fcm on iOS ??

I have done the following:

1. Setup FCM properly with the correct certificates and bundle ID
2. Registered for remote notifications (as shown above)
   P.S I am not using any other notification library to display notification.

Do I need to add any native code in iOS to set it up??

[mikehardy]

how can you 'await' on that isRegisteredForRemoteNotifications call (as well as the next 2 awaits) without being inside a try?

how would the async-ness of registerNotif() matter if you aren't calling it inside an async function with try/await/catch, or using it as registerNotif().then(() => {/* stuff here */}?

registering the listener to receive messages is not an async thing, you just register. The registration is sync

Be careful with words, you are adding a listener to receive message ("FCM" or "Firebase Cloud Messages") not notifications. In firebase words, messages (from cloud, known by some as "push notifications") are just messages containing payload information. The information may be data only ("silent push") or notification only (at which point a notification will show, as a consequence of receiving the message, or data+notification. If you confuse the words it becomes hard to reason about things clearly.

[yash-atreya]

@mikehardy It worked. Thank you so much for all your help, and sorry for my stupid mistakes, But I had just one more query; I am still not able to display the cloud messages received in the foreground of android, how can I pull that off?

[mikehardy]

@yash1511 there are a bunch of ways, so I'm not entirely sure. There is information on the #2566 about how to integrate react-native-push-notifications with react-native-firebase in order to display local notifications in foreground for android, I would go there. I haven't done it personally, so can't offer actual help

[yash-atreya]

I was working on the friend request functionality for my react-native app, and I wanted to notify the user(sender) using a cloud message if the request was accepted. Its working successfully on Android and I am receiving the notification on the device, but its not working iOS.

This is my cloud function for accepting friend requests:

//======================ACCEPT REQUEST==========================//
exports.onAcceptRequest = functions.https.onCall((data, context) => {
  const targetId = data.targetId;
  const senderId = data.senderId;
  return admin
    .firestore()
    .collection('Friendships')
    .doc()
    .set({
      targetId: targetId,
      senderId: senderId,
      timeStamp: new Date(),
    })
    .then(() => {
      console.log('Befriended');
      notifySenderId(senderId);
      return null;
      //NOTIFICATION SENT TO uid2(senderId)
    })
    .catch(err => console.log('errrrrr', err));
});
function notifySenderId(senderId) {
  return admin
    .firestore()
    .collection('Users')
    .doc(`${senderId}`)
    .get()
    .then(doc => {
      var tokens = Object.keys(doc.data().fcmTokens);
      console.log('TOKENS: ', tokens);
      return tokens;
    })
    .then(tokens => {
      console.log('tokens: ', tokens);
      const payload = {
        notification: {
          title: 'Friend Request Accepted',
          body: 'Hi add me to a group',
          sound: 'default',
        },
      };
      return admin.messaging().sendToDevice(tokens, payload);
    })
    .then(() => console.log('notified senderId of Acceptance'))
    .catch(err => console.log('err notifying senderId', err));
}

On iOS the cloud function executes successfully on the backend(as shown in the functions logs below) but doesn't show notifications on the device even though I have allowed notifications in the settings.

I am not using any library to display the notifications. I expect FCM to display the notification message automatically(works on android).

Cloud Functions Log:

Help would be very much appreciated. Thank you.

EDIT: SOLVED IT!
I learned that fcmTokens could change over time, updating the token in the database solved my issue.

But I have a follow-up question that how do we keep track of the refreshed tokens to update them in the database??

[mikehardy]

onTokenRefresh is a method I think?

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues.
This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs.
Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.