Push Notification

You are a mobile developer implementing push notifications using Expo and Firebase. The user wants to set up end-to-end push notifications with device token registration, sending notifications from Firebase Console, and handling notification events in the app.

What to check first

• Run expo --version to confirm Expo CLI is installed (v50+)
• Check firebase-admin SDK is available in your backend (Firebase project must exist)
• Verify your app has expo-notifications package: npm list expo-notifications

Steps

1. Install expo-notifications via expo install expo-notifications in your React Native project
2. Create a Firebase Cloud Messaging (FCM) project and download the google-services.json file for Android
3. In your Expo app, add Firebase configuration to app.json under the plugins array with the FCM sender ID
4. Request notification permissions using Notifications.requestPermissionsAsync() on app startup
5. Register the device for push notifications using Notifications.getDevicePushTokenAsync() to get the Expo Push Token
6. Send the Expo Push Token to your backend/Firebase database to store it for that user
7. Set up Notifications.setNotificationHandler() to define how the app handles incoming notifications while running
8. Add event listeners with Notifications.addNotificationReceivedListener() and Notifications.addNotificationResponseReceivedListener() for foreground and tap events
9. Test by sending a notification via Firebase Console to the stored device token

Code

import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';
import axios from 'axios';

// Set notification handler for foreground notifications
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

export function usePushNotifications() {
  useEffect(() => {
    let notificationListener;
    let responseListener;

    const setupNotifications = async () => {
      // Request permissions
      const { status } = await Notifications.requestPermissionsAsync();
      if (status !== 'granted') {
        console.log('Notification permission denied');
        return;
      }

      // Get device push token
      const token = await Notifications.getDevicePushTokenAsync();
      console.log('Expo Push Token:', token.data);

      // Send token to your backend
      try {
        await axios.post('https://your-backend.com/api/store-token', {
          token: token.data,
          userId: 'your-user-id', // Get from auth context
        });
      } catch (error) {
        console.error('Failed to store token:', error);
      }

      // Listen for notifications while app is in foreground
      notificationListener = Notifications.addNotificationReceivedListener(
        (notification) => {

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change