playbooks

home / skills / hoangnguyen0403 / agent-skills-standard / react-native-notifications

react-native-notifications skill

/skills/react-native/react-native-notifications

This skill helps implement push notifications in React Native apps using Firebase or Expo, handling foreground, background, and quit states.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill react-native-notifications

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.3 KB
---
name: React Native Notifications
description: Push notifications for React Native using React Native Firebase or Expo Notifications.
metadata:
  labels: [react-native, notifications, fcm, push, expo, firebase]
  triggers:
    files: ['**/*notification*.ts', '**/*notification*.tsx', '**/App.tsx']
    keywords:
      [Notifications, messaging, FCM, expo-notifications, react-native-firebase]
---

# React Native Notifications

## **Priority: P1 (OPERATIONAL)**

Push notifications using React Native Firebase or Expo Notifications.

## Guidelines

- **Library**: Choose `@react-native-firebase/messaging` (Bare) or `expo-notifications` (Managed).
- **Setup**: Configure Platform channels (Android) and APNs (iOS).
- **Lifecycle**: Handle Foreground (`onMessage`), Background (`onNotificationOpenedApp`), and Quit (`getInitialNotification`) states.
- **Permissions**: Prime users before requesting system authorization.

[Implementation Details](references/implementation.md)

## Anti-Patterns

- **No Unconditional Requests**: Spamming permission dialogs leads to high denial rates.
- **No Missing Handlers**: Forgetting "Quit" state handling results in lost deep links.
- **No Unvalidated Data**: Blindly trusting payload data causes runtime crashes.

## Related Topics

react-native-navigation | react-native-dls | mobile-ux-core

Overview

This skill provides pragmatic guidance for implementing push notifications in React Native apps using either React Native Firebase (@react-native-firebase/messaging) for bare workflows or expo-notifications for managed workflows. It focuses on correct platform setup, lifecycle handling, and permission strategies to ensure reliable delivery and safe payload handling. The guidance is operational: how to wire handlers, avoid common anti-patterns, and surface deep links from all app states.

How this skill works

The skill inspects app configuration and runtime notification flows, emphasizing platform channels for Android and APNs setup for iOS. It maps the three core lifecycle states — foreground (onMessage), background (onNotificationOpenedApp), and quit (getInitialNotification) — and prescribes where to attach handlers, validate payloads, and route deep links. It also covers permission priming and conditional authorization requests to improve opt-in rates.

When to use it

  • Building push notification support in a React Native app (bare or managed).
  • Migrating or auditing existing notification code for reliability and deep-link correctness.
  • Implementing permission flows to maximize user opt-in rates without spamming prompts.
  • Integrating Firebase Messaging or Expo Notifications in a cross-platform project.
  • Ensuring safe payload parsing to prevent runtime crashes from malformed data.

Best practices

  • Choose @react-native-firebase/messaging for bare apps and expo-notifications for managed apps to match native capabilities.
  • Configure Android platform channels and iOS APNs before sending production messages; validate credentials in staging.
  • Prime users with contextual UI before requesting system notification permission; do not request immediately on first launch.
  • Attach handlers for foreground (onMessage), background (onNotificationOpenedApp), and quit (getInitialNotification) to capture all entry points.
  • Always validate and sanitize notification payloads before accessing fields to avoid crashes.
  • Avoid unconditional permission dialogs and missing quit-state handling which break deep links and reduce engagement.

Example use cases

  • Implementing deep-link routing from notifications that works when the app is closed, in background, or foreground.
  • Auditing an Android/iOS notification setup to ensure APNs keys and Firebase sender settings are correct.
  • Adding a staged permission flow that explains value before calling requestAuthorization.
  • Switching a managed Expo app from local test notifications to production expo-notifications with proper handlers.

FAQ

Which library should I pick for a new app?

Use expo-notifications for managed Expo projects and @react-native-firebase/messaging for bare React Native projects that need deeper native integration.

How do I ensure deep links work from closed apps?

Implement getInitialNotification on startup to inspect the notification that launched the app and route accordingly; also handle onNotificationOpenedApp for background-to-foreground transitions.