Push notifications (expo-notifications) in React Native - Mini App: Build & Ship

Build: Push Notification Demo

This screen registers the device for push notifications using expo-notifications and shows the device token. It also listens for incoming notifications and displays their content.

Target UI

-------------------------
| Push Notification Demo |
-------------------------

Device Token:
[________________________]

Last Notification:
Title: 
Body: 

[Request Permission Button]

Request permission to send push notifications when user taps the button

Get and display the Expo push token after permission is granted

Listen for incoming notifications and display their title and body on screen

Use expo-notifications package for all notification handling

Starter Code

React Native

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';

export default function PushNotificationDemo() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    // TODO: Add notification listeners here

    return () => {
      // TODO: Remove notification listeners here
    };
  }, []);

  async function registerForPushNotificationsAsync() {
    // TODO: Request permissions and get token
  }

  return (
    <ScrollView contentContainerStyle={{ padding: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>Push Notification Demo</Text>
      <Text style={{ marginBottom: 5 }}>Device Token:</Text>
      <Text selectable style={{ marginBottom: 20 }}>{expoPushToken || 'No token yet'}</Text>

      <Text style={{ marginBottom: 5 }}>Last Notification:</Text>
      <Text>Title: {notification ? notification.request.content.title : ''}</Text>
      <Text>Body: {notification ? notification.request.content.body : ''}</Text>

      <View style={{ marginTop: 30 }}>
        <Button title="Request Permission" onPress={registerForPushNotificationsAsync} />
      </View>
    </ScrollView>
  );
}

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button, ScrollView, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';

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

export default function PushNotificationDemo() {
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(null);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    // Listener called when a notification is received while app is foreground
    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    // Listener called when user interacts with a notification
    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      // Could handle response here if needed
    });

    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);

  async function registerForPushNotificationsAsync() {
    let token;
    if (!Constants.isDevice) {
      alert('Must use physical device for Push Notifications');
      return;
    }
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    setExpoPushToken(token);

    if (Platform.OS === 'android') {
      Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        importance: Notifications.AndroidImportance.MAX,
        vibrationPattern: [0, 250, 250, 250],
        lightColor: '#FF231F7C',
      });
    }
  }

  return (
    <ScrollView contentContainerStyle={{ padding: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>Push Notification Demo</Text>
      <Text style={{ marginBottom: 5 }}>Device Token:</Text>
      <Text selectable style={{ marginBottom: 20 }}>{expoPushToken || 'No token yet'}</Text>

      <Text style={{ marginBottom: 5 }}>Last Notification:</Text>
      <Text>Title: {notification ? notification.request.content.title : ''}</Text>
      <Text>Body: {notification ? notification.request.content.body : ''}</Text>

      <View style={{ marginTop: 30 }}>
        <Button title="Request Permission" onPress={registerForPushNotificationsAsync} />
      </View>
    </ScrollView>
  );
}

This app screen uses the expo-notifications package to handle push notifications.

When the user taps the "Request Permission" button, the app asks for permission to send notifications. If granted, it fetches the Expo push token and shows it on screen.

The app also sets up listeners to detect when a notification arrives while the app is open (foreground). It updates the screen to show the notification's title and body.

On Android, it creates a notification channel for proper notification behavior.

This setup helps you test push notifications and see the device token needed to send notifications from a server or Expo push service.

Final Result

Completed Screen

-------------------------
| Push Notification Demo |
-------------------------

Device Token:
ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]

Last Notification:
Title: Hello
Body: This is a test notification

[Request Permission Button]

User taps 'Request Permission' button to allow notifications and get device token

When a push notification arrives while app is open, the title and body appear under 'Last Notification'

Stretch Goal

Add a button to send a test local notification immediately

💡 Hint

Use Notifications.scheduleNotificationAsync with trigger: null to show a notification right away