Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native: display foreground notifications like background notifications with zo0r/react-native-push-notification

I have set up push notifications on my React-native app with zo0r / react-native-push-notification . It works on Android, and on iOS when the app is in background mode.

However, the notification does not display when the app is in foreground mode with iOS. I'm aware that I have to handle the notification when in foreground mode but I'd like to display them exactly the same way there are displayed when in background mode.

So I did the following:

import {PushNotificationIOS} from 'react-native';

PushNotification.configure({
...
   onNotification: function(notification) {
      if (notification.foreground) {
         PushNotification.localNotification(notification);
      }
      notification.finish(PushNotificationIOS.FetchResult.NoData);
   },
...
}

But nothing happens, the notification is still not displayed, what am I missing?

like image 221
Simon Avatar asked Mar 22 '20 12:03

Simon


People also ask

How do you handle notifications when an app in foreground in firebase react native?

So the basic idea is just add RemotePushController component above the ending root tag. That's it!!!! Now you are good to go. Now just run your react-native app again and try sending push notifications while your app is running in foreground.

How do I customize notifications in react native?

To customize the notification display and behavior, consider using a plugin called react-native-push-notification which allows granular configuration of Android local notifications. There is no need to configure or use the remote push notification aspects of this package.


1 Answers

I had to add some configuration inside the ios file AppDelegate.m

Following this gist did make it work.

My code look like:

onNotification(notification) {
  if (isIos) {
    if (
      notification.foreground &&
      (notification.userInteraction || notification.remote)
    ) {
      PushNotification.localNotification(notification);
    }
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  } else {
    if (notification.foreground) {
      PushNotification.localNotification(notification);
    }
  }
},

I also set popInitialNotification to true

like image 187
Simon Avatar answered Sep 29 '22 11:09

Simon