FCM Notifications — React Native

A React Native + TypeScript example demonstrating push notification handling using Firebase Cloud Messaging (FCM) and Notifee.

The project covers notification permissions, FCM token generation, foreground and background notifications, notification channels, notification cancellation, and navigation from notification interactions.

Features

• Firebase Cloud Messaging integration
• Notifee local notification handling
• Foreground notification handling
• Background / killed-state message handling
• Android notification channels
• Notification permission handling
• FCM device token generation
• Notification click handling
• Deep-link style navigation
• Notification cancellation using orderId
• TypeScript support
• React Navigation integration
• Android and iOS project support

Tech Stack

• React Native 0.81
• React 19
• TypeScript
• Firebase Cloud Messaging
• Notifee
• React Navigation
• Jest
• ESLint
• Prettier

Notification Flow

The application handles notifications across different application states:

Foreground

Incoming FCM messages are handled while the application is active and displayed through Notifee.

Background

Firebase's background message handler processes incoming messages when the application is running in the background.

Killed State

Notification interactions can be detected when the application is opened from a terminated state.

Notification Navigation

Notification payload data can be used to navigate users to a specific screen.

Example:

Notification
     ↓
FCM
     ↓
Notification Handler
     ↓
Notifee
     ↓
User taps notification
     ↓
React Navigation
     ↓
OrderScreen(orderId)

Notification Types

The project supports different notification channels and event types, including:

• New orders
• Order cancellations
• Pending orders
• Out-for-delivery updates

Notifications can also be removed programmatically using their associated orderId.

Project Structure

FCMNotifications
├── android
├── ios
├── src
│   └── services
│       ├── navigation
│       └── notification
│           ├── NotificationService.ts
│           └── types.ts
├── App.tsx
├── index.js
├── package.json
└── tsconfig.json

Installation

Clone the repository:

git clone https://github.com/iusama46/FCMNotifications.git
cd FCMNotifications

Install dependencies:

npm install

For iOS, install CocoaPods dependencies:

cd ios
pod install
cd ..

Firebase Configuration

A Firebase project must be configured for push notifications.

Add the appropriate Firebase configuration files to the native projects:

Android:
android/app/google-services.json

iOS:
ios/GoogleService-Info.plist

Firebase Cloud Messaging must also be enabled for the Firebase project.

Run the Application

Start Metro:

npm start

Run Android:

npm run android

Run iOS:

npm run ios

Core Dependencies

{
  "@notifee/react-native": "^9.1.8",
  "@react-native-firebase/app": "^23.4.0",
  "@react-native-firebase/messaging": "^23.4.0",
  "@react-navigation/native": "^7.1.17",
  "@react-navigation/stack": "^7.4.8"
}

Example Use Cases

This implementation can be adapted for applications that need real-time push updates such as:

• Delivery applications
• Rider / driver applications
• E-commerce applications
• Order-management systems
• Booking applications
• Messaging applications
• Marketplace applications

Topics

react-native typescript firebase fcm firebase-cloud-messaging notifee push-notifications android ios deep-linking

Author

Usama Iftikhar

Portfolio: https://usamaone.com
GitHub: https://github.com/iusama46
LinkedIn: https://linkedin.com/in/iusama46