📲 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 with HTML Templates

🚀 Installation

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

For FCM push notifications also install:

npm install @react-native-firebase/app @react-native-firebase/messaging

Run pod install in the ios folder, then rebuild the native app.

Use SDK v1.0.2 or later for in-app socket popups. Older versions had a message-bridge bug that blocked foreground notifications.

📦 Requirements

• react-native-webview
• @react-native-firebase/messaging — FCM only
• Firebase project with FCM enabled

💻 Basic Usage (in-app pop-up)

Important integration rules:

1. Mount the SDK in App.tsx (root) — not inside a nested screen or navigator.
2. Define helloConfig as a module-level constant — do not pass an inline { ... } object in JSX.
3. unique_id must match the user you target in the MSG91 dashboard.
4. In-app popups only work when the app is in the foreground.

import React from 'react';
import MSG91PushNotificationSDK from '@msg91comm/react-native-push-notification-sdk';

// ✅ Define outside the component — stable reference
const MSG91_HELLO_CONFIG = {
  widgetToken: 'your_widget_token',
  unique_id: '[email protected]',
};

const MSG91_PROJECT_ID = 'your_msg91_project_id';

export default function App() {
  return (
    <>
      <AppNavigator />
      <MSG91PushNotificationSDK
        helloConfig={MSG91_HELLO_CONFIG}
        projectId={MSG91_PROJECT_ID}
      />
    </>
  );
}

With this setup, your app receives in-app HTML notifications when a push is triggered via socket (app in foreground).

🔧 Firebase Setup (for FCM)

1. Generate Firebase Admin SDK Key

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

2. Upload Firebase Key to MSG91 Dashboard

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

3. Add google-services.json (Android)

android/app/google-services.json

4. Native configuration

Follow the React Native Firebase messaging guide for platform setup.

Android (13+): add to AndroidManifest.xml:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

iOS: enable Push Notifications capability and add remote-notification to UIBackgroundModes in Info.plist.

🧑‍💻 Example with Firebase Messaging

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

const MSG91_HELLO_CONFIG = {
  widgetToken: 'your_widget_token',
  unique_id: '[email protected]',
};

const MSG91_PROJECT_ID = 'your_msg91_project_id';

export default function App() {
  useEffect(() => {
    messaging().requestPermission();

    messaging().getToken().then(token => {
      MSG91PushNotificationSDK.registerFCM(token);
    });

    messaging().onTokenRefresh(token => {
      MSG91PushNotificationSDK.registerFCM(token);
    });

    messaging().onNotificationOpenedApp(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        MSG91PushNotificationSDK.handleFCMNotification(
          remoteMessage.data.html_url as string,
        );
      }
    });

    messaging().onMessage(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        MSG91PushNotificationSDK.handleFCMNotification(
          remoteMessage.data.html_url as string,
        );
      }
    });

    messaging().getInitialNotification().then(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        MSG91PushNotificationSDK.handleFCMNotification(
          remoteMessage.data.html_url as string,
        );
      }
    });
  }, []);

  return (
    <>
      <AppNavigator />
      <MSG91PushNotificationSDK
        helloConfig={MSG91_HELLO_CONFIG}
        projectId={MSG91_PROJECT_ID}
      />
    </>
  );
}

⚙️ Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | helloConfig | object | Yes | Must include widgetToken. Optionally pass unique_id for user targeting. | | projectId | string | Yes | MSG91 project ID |

🧪 SDK Methods

| Method | Description | |--------|-------------| | MSG91PushNotificationSDK.registerFCM(fcmToken) | Register device FCM token with MSG91 | | MSG91PushNotificationSDK.handleFCMNotification(htmlUrl) | Show FCM notification as in-app pop-up |