📲 MSG91 Push Notification SDK for React Native

Easily integrate in-app pop-up notifications and Firebase Cloud Messaging (FCM) notifications in your React Native app using MSG91's Push Notification SDK.

Supports:

• 🔔 In-App HTML Pop-up Notifications
• 📩 FCM Notifications on Android with HTML Templates

🚀 Installation

npm install @msg91comm/react-native-push-notification-sdk
# or
yarn add @msg91comm/react-native-push-notification-sdk

📦 Requirements

• react-native-webview - Install this as our package requires it as peer dependency.

For FCM Push-Notifications Only:

• @react-native-firebase/messaging - for FCM Notifications
• Firebase project with FCM enabled

💻 Basic Usage

Basic Setup (without FCM Notifications)

import MSG91PushNotificationSDK from '@msg91comm/MSG91PushNotificationSDK';
import { SafeAreaView } from 'react-native';

<>
  <AppNavigator/>
  <MSG91PushNotificationSDK
    helloConfig={{ widgetToken: 'your_widget_token' }}
    projectId="your_msg91_project_id"
  />
</>

With this minimal setup, your app will receive In-App HTML Notification when your app is in foreground.

🔧 Firebase Setup (for FCM Notifications)

To send FCM notifications, your app must be connected to a Firebase project.

1. Generate Firebase Admin SDK Key

• Go to your Firebase project.
• Navigate to Project Settings > Service Accounts.
• Click "Generate new private key" and download the JSON file.

| Step 1 | Step 2 | Step 3 | Step 4 | |--------|--------|--------|--------| | | | | |

2. Upload Firebase Key to MSG91 Dashboard

Upload this Firebase Admin JSON in the Push Notification Panel via the Firebase Integration section.

3. Add google-services.json (Android)

Place your google-services.json file inside:

android/app/google-services.json

4. Enable FCM in Your App

Follow the official Firebase setup guide to enable FCM support in your app.

💻 Usage

🧑‍💻 Example with Firebase Messaging

import React, { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import MSG91PushNotificationSDK from '@msg91comm/MSG91PushNotificationSDK';

export default function App() {
  useEffect(() => {
    messaging().getToken().then(token => {
      // Registers device FCM token with MSG91 for FCM Notifications.
      MSG91PushNotificationSDK.registerFCM(token);
    });

    messaging().onNotificationOpenedApp(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        // Shows in-app notification popup on click of FCM notification.
        MSG91PushNotificationSDK.handleFCMNotification(remoteMessage?.data?.html_url as string);
      }
    });

    messaging().onMessage((remoteMessage) => {
      if (remoteMessage?.data?.key === 'msg91') {
        // Show in-app notification popup from FCM event.
        MSG91PushNotificationSDK.handleFCMNotification(remoteMessage?.data?.html_url as string);
      }
    });
  }, []);

  return (
    <>
      <AppNavigator/>
      <MSG91PushNotificationSDK
        helloConfig={{ widgetToken: 'your_widget_token' }}
        projectId="your_firebase_project_id"
      />
    </>
  );
}

⚙️ Props

| Prop | Type | Required | Description | |-------------|----------|----------|------------------------------------------| | helloConfig | object | Yes | Hello widget configuration, must include widgetToken | | projectId | string | Yes | MSG91 FCM project ID |

🧪 SDK Methods (for FCM Project only)

| Method | Description | |--------|-------------| | MSG91PushNotificationSDK.registerFCM(fcmToken: string) | Registers user device FCM token with project ID | | MSG91PushNotificationSDK.handleFCMNotification(htmlUrl: string) | Opens FCM notification as Popup |