Expo

Get Started
Guides

Receiving Notifications

You can now successfully send a notification to your app! If all you wanted was purely informational notifications, then you can stop here. But Expo provides the capabilities to do so much more: maybe you want to update the UI based on the notification, or maybe navigate to a particular screen if a notification was selected.
import React from 'react';
import { Text, View } from 'react-native';
import * as Notifications from 'expo-notifications';

// This refers to the function defined earlier in this guide, in Push Notifications Set Up
import registerForPushNotificationsAsync from './registerForPushNotificationsAsync';

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

export default class App extends React.Component {
  state = {
    notification: {},
  };

  componentDidMount() {
    registerForPushNotificationsAsync();

    Notifications.addNotificationReceivedListener(this._handleNotification);
    
    Notifications.addNotificationResponseReceivedListener(this._handleNotificationResponse);
  }

  _handleNotification = notification => {
    this.setState({ notification: notification });
  };

  _handleNotificationResponse = response => {
    console.log(response);
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Your expo push token: {this.state.expoPushToken}</Text>
        <View style={{ alignItems: 'center', justifyContent: 'center' }}>
          <Text>Title: {this.state.notification.request.content.title}</Text>
          <Text>Body: {this.state.notification.request.content.body}</Text>
          <Text>Data: {JSON.stringify(this.state.notification.request.content.data)}</Text>
        </View>
      </View>
    );
  }
}

Foreground Notification Behavior

Important Note: To set the behavior for when notifications are received while your app is foregrounded, use Notifications.setNotificationHandler. You can use the callback to set options like:
  • shouldShowAlert
  • shouldPlaySound
  • shouldSetBadge

On Android, users can set certain OS-level settings (usually revolving around performance and battery optimisation), that can prevent notifications from being delivered when the app is closed. One such setting is the "Deep Clear" option on OnePlus devices.

Event listeners added using addNotificationReceivedListener and addNotificationResponseReceivedListener will receive an object when a notification is received or interacted with, respectively. See the documentation for information on these objects.
There are two different subscriptions for this so that you can easily address cases where a notification comes in while your app is open and foregrounded, and cases where a notification comes in while your app is backgrounded or closed, and the user taps on the notification.