Handling Remote Push Notifications from OneSignal in React Native

Two weeks ago I published a post covering every step you have to take to set up push notifications, via OneSignal, for React Native (iOS and Android). But the post stopped at the point of delivery — what if you want to do something for the user when they open the app up via the push notification? What if they opened the push notification while in the app? That’s what I plan to cover today.

Before proceeding with this post be sure to have OneSignal set up for your platform(s).

Accessing the Notification

Before we can actually do anything with the notification we need to access the content of said notification. When using react-native-onesignal we’re going to leverage the opened event, which we can listen to by using OneSignal.addEventListener. Make sure you remove the listener as well!

App.js

componentDidMount() {
  OneSignal.addEventListener('opened', this.onOpened);
}

componentWillUnmount() {
  OneSignal.removeEventListener('opened', this.onOpened);
}

onOpened = ({ notification }) => {
  console.log('notification', notification)
}

Full file.

We get a host of information on the notification, including:

• Whether or not it was shown to the user
• The pull message payload (title, body, badge number, etc). This is where the things you’d be interested in would be located.
• How the message should be displayed
• Whether the notification was silent or not

Let’s actually do something with those…

Handling the Notification

Let’s say we’ve got a chat app where a user can be in multiple rooms. Whenever the user is mentioned a push notification is sent to them to notify them. If the user is not in the app then we’ll defer to the device’s normal push notification (displaying, at least, the title and the message). However, if they’re in the app they won’t see this notification but we do want to show them the title and message. How would we go about that?

Also, as one more requirement, if the user opened the app by pressing the push notification we don’t want to show them that notification in app AND we want to route them directly to that room.

First let’s format the message so we know what we’re working with.

So now we’ve got an idea of what the data will look like. Let’s write some code. We’re going to use react-native-root-toast to show the notification in the app. Here’s the plan:

App.js

onOpened = ({ notification }) => {
  if (notification.isAppInFocus) {
    // TODO: Toast Notification
  } else {
    // TODO: Go to the room
  }
};

We’re making use of isActive to determine what experience the user should have.

Active Experience

Let’s add in the “active” experience since it’s a bit easier. We’re simply going to show the user the the notification.

App.js

import Toast from 'react-native-root-toast';

...

onOpened = ({ notification }) => {
  if (notification.isAppInFocus) {
    Toast.show(notification.payload.body);
  } else {
    // TODO: Go to the room
  }
}

Full file.

Inactive Experience

So what if the user clicks the notifications when our app is in the background? I’m going to proceed as if we were using react-native-router-flux (I’ve got a tutorial on how to use it). So looking back to our spec we know that in this instance we don’t show the user the message (they already saw it from the notification) but we do want to bring them to the proper room.

App.js

handleNotification(message, data, isActive) {
  if (isActive) {
    Toast.show(message);
  } else {
    Actions.room({ name: data.room });
  }
}

onOpened = ({ notification }) => {
  if (notification.isAppInFocus) {
    Toast.show(notification.payload.body);
  } else {
    Actions.room({ name: notification.payload.additionalData.room });
  }
}

You can see that it’s very simple to access the custom data we’re passing from our push notification to give the user a custom experience and save them time.