CODEWITHSUNDEEP
iosfirebasereact-nativepush-notificationreact-native-firebase
Ugo Marinelli
Ugo Marinelli

Reputation: 1039

React-native-firebase: Push notifications not always working on iOS

I implemented an app in react-native that send push notifications via Firebase. Most of the time, it is working well, but sometimes, the push notifications are not received by the device (mostly iOS 13 devices).

For the devices receiving my push notifications correctly, onNotification is triggered everytime (foreground and background).

For the devices not receiving my push notifications, onMessage is triggered (only on foreground).

package.json 

"react-native-firebase": "^5.6.0"

Podfile

pod 'Firebase/Core', '~> 6.19.0'
pod 'Firebase/Functions', '~> 6.19.0'
pod 'Firebase/Messaging', '~> 6.19.0'
pod 'Firebase/Auth', '~> 6.19.0'

To test out my push notifications, I am sending it via POSTMAN, using the firebase API, with the current Payload: 

{
"to" : "my_FCM_token",
"priority" : "high",
"notification" : {
    "body" : "Body TEST",
    "title": "TEST Notification",
    "vibrate": 1,
    "sound": 1
},
"data" : {
    "key" : "value"
}
}

Note that it always returns me a success

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // FIREBASE CONFIG
    [FIRApp configure];

    // SETTING ROOT VIEW CONTROLLER
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                               moduleName:@"MyModule"
                                        initialProperties:nil];
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    [RNSplashScreen show];
    return YES;
 }

App.js

async componentDidMount() {

  firebase.messaging().hasPermission().then(enabled => {
    if (enabled) {
      firebase.messaging().getToken().then(token => {
        global.token = token;
      })
    } else {
      firebase.messaging().requestPermission()
        .then(() => {
          alert("Permission Accepted", error)
        })
        .catch(error => {
          alert("Permission Denied", error)
        });
     }
  });

  this.initialNotificationListener = firebase.notifications().getInitialNotification().then((notificationOpen: NotificationOpen) => {
    alert("Getting initial Notification")
  });

  this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen: NotificationOpen) => {
    alert("onNotificationOpened triggered")
  });

  this.notificationListener = firebase.notifications().onNotification((notification: Notification) => {
    alert("onNotification triggered")
  });

  this.onMessageListener = firebase.messaging().onMessage(async (remoteMessage) => {
    alert("onMessage triggered")
  });
}

componentWillUnmount() {
  this.notificationOpenedListener();
  this.notificationDisplayedListener();
  this.notificationListener();
  this.initialNotificationListener();
  this.onMessageListener();
}

Any help would be appreciated, thank you :)

Upvotes: 3

Views: 13224

Answers (1)

Ugo Marinelli
Ugo Marinelli

Reputation: 1039

I finally made it working with a new fix that was published with react-native-firebase .

Here are the steps to follow :

1) You must upgrade to react-native-firebase v6 with this tutorial: https://rnfirebase.io/migrating-to-v6

2) In your package.json add : 

"@react-native-firebase/app": "6.4.0-rc4",
"@react-native-firebase/messaging": "6.4.0-rc4"

3) In your App.js, here add these listeners : 

  // When a user tap on a push notification and the app is in background
  this.backgroundNotificationListener = messaging().onNotificationOpenedApp(async (remoteMessage) => {
     alert("Background Push Notification opened")
  });

  // When a user tap on a push notification and the app is CLOSED
  this.closedAppNotificationListener = messaging().getInitialNotification().then((remoteMessage) => {
    if (remoteMessage) {
      alert("App Closed Push Notification opened")
    }
  });

  // When a user receives a push notification and the app is in foreground
  this.onMessageListener = messaging().onMessage(() => {
     alert("Foreground Push Notification opened")
  });

You can find more information on the listeners here : https://rnfb-docs.netlify.com/messaging/notifications#handling-interaction

And here is the discussion that solved my issue: https://github.com/invertase/react-native-firebase/pull/3339

Upvotes: 5

Related Questions