React-native with Firebase FCM not working-CodePudding

I have done the following changes:

How is send notifications, using firebase-admin and getting successful result:

admin.messaging().sendToDevice(
        "token as string",
        {
        notification: {
            title: 'title here',
            body: 'body here'
            }
        },
        {
            priority: "high",
            contentAvailable: true,
            timeToLive: 2419200
        });

React-native code, this is when the application is in the foreground:

useEffect(() => {
    checkToken().then((token) => {
      console.log(token);
      // write to db
    });
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      console.log(remoteMessage);
    });
    return unsubscribe;
  }, []);

I have the GoogleService-Info.plist file in the ios folder, I have uploaded the APNs in the firebase console teamid appid.

Following changes in AppDelegate.m:

#import <Firebase.h>
....
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

[FIRApp configure];

I am not receiving any notification while the app runs in the foreground, there must be something wrong with the way I am sending (probably I have the wrong options) or, what I have in react-native is wrongly configured, not sure. I am trying to do it only for IOS for now.

Any info or solution would be helpful.

CodePudding user response：

React native firebase do not show notification when the app is in foreground, so what I have done is, I am using a different library to handle foreground notification. I am using react-native-push-notification.\

For Android

import PushNotification from 'react-native-push-notification';
import PushNotificationIos from '@react-native-community/push-notification-ios';

useEffect(() => {
    checkToken().then((token) => {
      console.log(token);
      // write to db
    });
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      PushNotification.localNotification({
        message: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        bigPictureUrl: remoteMessage.notification.android.imageUrl,
        smallIcon: remoteMessage.notification.android.imageUrl,
      });
    });
    return unsubscribe;
  }, []);

For iOS: For iOS you have to install @react-native-community/push-notification-ios
Also follow all the native installation steps as suggested in document. Then write the following code

PushNotification.configure({
    onNotification: (notification) => {
      if (notification) {
        console.log(notification);
      }
    },
  });

  useEffect(() => {
    // To display notification when app is in foreground
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      PushNotificationIos.addNotificationRequest({
        message: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        bigPictureUrl: remoteMessage.notification.android.imageUrl,
        smallIcon: remoteMessage.notification.android.imageUrl,
      });
    });

    return unsubscribe;
  }, []);

CodePudding user response：

1st you need to get the messaging permission

async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  
    if (enabled) {
      console.log('Authorization status:', authStatus);
    }
}

Then you need to create a channel:

const createFCMChannel = async () => {
    const channelId = await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
    });
};

You can just call this method which will call "displayNotification" from notifee

function onMessageReceived(message) {
    notifee.displayNotification(message.notification);
}

you can use these methods in useEffect when your app starts:

useEffect(() => {
    createFCMChannel();
}, []);

useEffect(() => {
    requestUserPermission();
    messaging().onMessage(onMessageReceived);
    messaging().setBackgroundMessageHandler(onMessageReceived);
}, []);