16

I am developing a react-native messaging app with Expo. Every time a user receives a new message, I send a notification from my server.

Is there any way to not display the notification if the app is currently open?

Right now I am using this as soon as the notification is received:

Notifications.dismissNotificationAsync(notification.notificationId);

But there is a 0.5 second delay where the notification has time to appear in the tray and trigger a sound before it gets dismissed. I would like to not show it at all.

Ryan Pergent
  • 4,432
  • 3
  • 36
  • 78

5 Answers5

8

When a notification is received while the app is running, using setNotificationHandler you can set a callback that will decide whether the notification should be shown to the user or not.

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

When a notification is received, handleNotification is called with the incoming notification as an argument. The function should respond with a behavior object within 3 seconds, otherwise the notification will be discarded. If the notification is handled successfully, handleSuccess is called with the identifier of the notification, otherwise (or on timeout) handleError will be called.

The default behavior when the handler is not set or does not respond in time is not to show the notification.

If you don't use setNotificaitonHandler, the new notifications will not be displayed while the app is in foreground.

So you can simply set setNotificationHandler to null when your app is initialized.


Notifications.setNotificationHandler(null);

See Documentaition

Amjed Ali
  • 371
  • 4
  • 10
  • 2
    Is there a way to customize setNotificationHandler based on the type of notifications? i.e. While chatting on a specific page, I want to be able to receive notifications and popup informing me about new user joining. However, I don't want to receive a popup to tell me that someone just posted a message on the chat page since I can see it. Thanks! – Vincent Sep 23 '21 at 03:14
  • 1
    I know this answer and comment are a year old and adding this comment is sort of necro-posting, but as this was still helpful to me today, I'm going to reply anyway. The `handleNotification` function has a notification object as a parameter which contains a date member as well as a request member containing the information on the notification which you can use to decide whether or not to show alert, sound and badge. – witheroux Dec 05 '22 at 22:18
3

The answer is yes to your question

Is there any way to not display the notification if the app is currently open?

The default behavior of Notification in Expo is not to show notification if the App is in foreground. You must have implemented Notifications.setNotificationHandler similar to the following code -

// *** DON'T USE THE FOLLOWING CODE IF YOU DON'T WANT NOTIFICATION TO BE DISPLAYED
// WHILE THE APP IS IN FOREGROUND! ***
// --------------------------------------------------
// Sets the handler function responsible for deciding
// what to do with a notification that is received when the app is in foreground
/*
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});
*/

If you don't use setNotificaitonHandler, the new notifications will not be displayed while the app is in foreground.

hafij
  • 208
  • 2
  • 10
0

Use below code snippet. It works on press notification.

_handleNotification = async (notification) => {
      const {origin} = notification;
      if (origin === ‘selected’) {
            this.setState({notification: notification});
      }
//OR
      if (AppState.currentState !== 'active') {
            this.setState({notification: notification});
      }

 }
Rakesh Medpalli
  • 416
  • 3
  • 11
-1

I assume you setup a simple FCM - Firebase cloud messaging And use that to push messages to the client? The official Expo guide has a section for receiving-push-notifications

MaTriXy
  • 1,659
  • 1
  • 20
  • 27
  • I am not sure how this code will stop the notification from appearing. Unless I am missing something, all it does is showing the content of the notification in a view on top of receiving said notification in the tray. – Ryan Pergent Jul 13 '19 at 18:04
  • Another option is not sending notifications at all and using a socket to transmit the needed data. – MaTriXy Jul 13 '19 at 20:34
  • Don't know if that documentation has been updated or not since this answer was written. But at least today that link describes setNotificationHandler which is how one is supposed to hide notifications in foreground. – Dennis Persson Sep 07 '21 at 14:58
  • https://docs.expo.dev/push-notifications/receiving-notifications/#foreground-notification-behavior direct link here – MaTriXy Nov 08 '21 at 07:50
-2

This is the actual workflow of FCM (weird can be called as a common issue) that it'll handle the notifications by itself when the application is in the foreground.

The solution which i did for my project was to create a custom notification JSON rather than using their default template which won't be parsed by FCM. 

{
"hello":" custom key and value",
"message":{
"SampleKey":"Sample data",
"data":{
"SampleKey" : "Sampledata",
"SampleKey2" : "great match!"},
 }}

In console you can add your own custom JSON objects, and when you get the notification parse the notification by using these objects, then you will be able to override that issue.

You can also add a channel for the request to categorize your notifications

this.createNotificationListeners  = firebase.notifications()
.onNotification((notification) => {
let{ hello,data,message} = notification;
});

See here

Manoj Perumarath
  • 9,337
  • 8
  • 56
  • 77