Push Notifications in React Native

# CHAPTER 23

Push Notifications in React Native #

1. Introduction #

2. Learning Objectives #

• Install and configure expo-notifications.

• Differentiate between Local and Remote push notifications.

• Request explicit Notification permissions from the OS.

• Retrieve the device's unique Expo Push Token.

• Trigger an immediate Local Notification.

3. Local vs Remote Notifications #

• Local Notifications: The app itself triggers the alert based on a timer (e.g., an alarm clock app or a daily reminder). No internet required.

• Remote Push Notifications: A backend server (like Node.js) sends a message to Apple/Google's servers, which beams the alert down to the specific phone over the internet (e.g., "Bob liked your post!").

4. Installation and Setup #

npx expo install expo-notifications

First, we must configure how the app behaves when a notification arrives while the user is actively using the app (foreground).

import * as Notifications from 'expo-notifications';

// Tells the OS to show a popup alert and play a sound even if the app is open!
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

5. Triggering a Local Notification #

import React from 'react';
import { View, Button } from 'react-native';
import * as Notifications from 'expo-notifications';

export default function ReminderScreen() {
  
  const scheduleNotification = async () => {
    // Call the scheduling API
    await Notifications.scheduleNotificationAsync({
      content: {
        title: "Pizza is ready! 🍕",
        body: "Take it out of the oven before it burns.",
        data: { recipeId: 42 }, // Hidden data payload!
      },
      trigger: { seconds: 5 }, // Fire 5 seconds from now
    });
    
    alert("Notification scheduled!");
  };

  return (
    <View style={{ flex: 1, justifyContent: &#039;center&#039;, alignItems: &#039;center&#039; }}>
      <Button title="Remind me in 5 seconds" onPress={scheduleNotification} />
    </View>
  );
}

6. The Holy Grail: Remote Push Notifications #

1. 1. Ask the OS for permission to send notifications.

1. 2. If granted, ask Expo to generate the Push Token.

1. 3. Save that token to your database (Firestore) attached to the user's profile.

import { useEffect, useState } from 'react';
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

export default function App() {
  const [expoPushToken, setExpoPushToken] = useState('');

  useEffect(() => {
    registerForPushNotificationsAsync().then(token => {
      setExpoPushToken(token);
      console.log("MY TOKEN:", token); // Send this to your backend!
    });
  }, []);

  async function registerForPushNotificationsAsync() {
    let token;
    
    // 1. Check existing permissions
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    
    // 2. If not granted, prompt the user with a popup!
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    
    // 3. If they hit "Deny", stop execution.
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    
    // 4. Success! Fetch the unique token.
    token = (await Notifications.getExpoPushTokenAsync()).data;
    
    // Android requires setting up a Notification Channel
    if (Platform.OS === 'android') {
      Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        importance: Notifications.AndroidImportance.MAX,
      });
    }

    return token;
  }
}

7. Testing Remote Notifications #

1. 1. Copy the ExponentPushToken[xxxxx] generated in your console from the code above.

1. 2. Open your web browser and go to: expo.dev/notifications

1. 3. Paste your token into the tool, type a title and message, and hit Send Notification.

1. 4. Lock your physical phone screen. The notification will instantly buzz your device over the internet!

8. Visual Learning: The Remote Architecture #

[ Your Node.js Server ]
      | (Sends Title, Body, and target Push Token)
      v
[ Expo Notification Servers ]
      | (Translates request to Apple/Google format)
      |
    /   \
(APNs)  (FCM)
   |      |
[ iOS ] [ Android ]

9. Common Mistakes #

• Testing on Emulators: Push notifications rely heavily on physical device hardware IDs. While Android emulators *can* sometimes receive notifications, iOS Simulators cannot receive remote push notifications at all. You MUST test this feature using the Expo Go app on a physical iPhone or Android device.

10. Best Practices #

• Handling Taps: When a user taps a notification on their lock screen, your app opens. You should use the addNotificationResponseReceivedListener API to intercept the notification payload, read the hidden data: { recipeId: 42 } object, and automatically route the user directly to the Details Screen for recipe 42!

11. Practice Exercises #

1. 1. What Expo API method is utilized to schedule an offline alarm to trigger on the device exactly 10 minutes from execution?

1. 2. What unique alphanumeric string must be generated on the device and transmitted to your backend database to enable remote server-to-device messaging?

12. MCQs with Answers #

13. Interview Questions #

• Q: Contrast the architectural execution and network requirements of Local Notifications versus Remote Push Notifications.

• Q: Explain the purpose of the unified Expo Push Notification service. How does it simplify the traditional fragmentation between Apple APNs and Firebase Cloud Messaging (FCM)?

• Q: Describe the UX/Routing pattern known as "Deep Linking via Notification." How does the hidden data payload enable this flow when a user interacts with a lock screen alert?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #