Integrating MSG91 Push Notification SDK with React Native Android

The MSG91 Push Notification SDK for React Native allows you to integrate in-app HTML notifications and Firebase Cloud Messaging (FCM) push notifications into your React Native Android application.

With the SDK, you can:

• Display HTML-based notifications when the app is open.

• Receive push notifications using Firebase Cloud Messaging (FCM).

• Handle notification clicks and open the application.

• Display notification content inside the application using an in-app popup.

Note: The SDK currently supports Android only. iOS support is not available at this time.

The MSG91 Push Notification SDK supports the following:

Before integrating the SDK, make sure you have a React Native Android application.

Depending on your use case, you may need the following dependencies.

The SDK uses react-native-webview to render HTML notification content.

Install it using:

npm install react-native-webview

or:

yarn add react-native-webview

If you want to receive push notifications, install Firebase Messaging:

npm install @react-native-firebase/messaging

or:

yarn add @react-native-firebase/messaging

You must also have a Firebase project with Firebase Cloud Messaging enabled.

Install the MSG91 Push Notification SDK in your React Native project.

Using npm:

npm install @msg91comm/react-native-push-notification-sdk

Using yarn:

yarn add @msg91comm/react-native-push-notification-sdk

If you only want to display in-app HTML notifications and do not need push notifications, you can directly add the MSG91 SDK component to your application.

Import the SDK:

import MSG91PushNotificationSDK from '@msg91comm/MSG91PushNotificationSDK';

Add the SDK component to your application:

export default function App() {
  return (
    <>
      <AppNavigator />

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

Replace:

• your_widget_token with your MSG91 widget token.
  

• your_msg91_project_id with your MSG91 project ID.
  

Once configured, HTML-based in-app notifications can be displayed when the application is running in the foreground.

Firebase configuration is not required if you only want to use in-app notifications.

If you also want to send push notifications to users, you need to configure Firebase Cloud Messaging.

Create a Firebase project and enable Firebase Cloud Messaging (FCM) for your Android application.

You can follow the standard React Native Firebase messaging setup documentation for the Firebase configuration.

React Native Firebase — Cloud Messaging Setup

To allow MSG91 to send notifications through your Firebase project:

1. Open the Firebase Console.

2. Open your Firebase project.

3. Go to Project Settings.

4. Open the Service Accounts tab.

5. Generate a new private key.

6. Download the generated JSON file.
   

Keep this JSON file secure, as it contains credentials for your Firebase project.

Upload the downloaded Firebase Admin SDK JSON file in the Push Notification / Firebase Integration section of the MSG91 dashboard.

This allows MSG91 to use your Firebase project to deliver push notifications to registered devices.

Download the Android Firebase configuration file (google-services.json) from your Firebase project.

Place the file in your React Native project at:

android/app/google-services.json

Make sure the Firebase configuration corresponds to the same Android application/package configured in your React Native project.

Complete the standard Firebase Cloud Messaging configuration for your React Native Android application.

The application must be able to:

1. Connect to Firebase.

2. Generate an FCM registration token.

3. Receive FCM messages.

4. Handle notification events.
   

For the complete Firebase-specific configuration, refer to:

React Native Firebase Messaging Documentation

Once Firebase generates an FCM token for the device, register the token with the MSG91 SDK.

Example:

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

The SDK uses this registration to associate the device's FCM token with MSG91.

You need to handle FCM notifications based on the state of your application.

The MSG91 SDK provides the following method:

MSG91PushNotificationSDK.handleFCMNotification(htmlUrl);

This method displays the HTML notification content inside an in-app popup.

The following example demonstrates:

• Retrieving the device's FCM token.

• Registering the token with MSG91.

• Handling notifications received while the app is in the foreground.

• Handling notification clicks.

• Displaying the notification HTML content using the MSG91 SDK.
  

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

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

    // Handle notification when the user taps it
    messaging().onNotificationOpenedApp(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        MSG91PushNotificationSDK.handleFCMNotification(
          remoteMessage.data.html_url
        );
      }
    });

    // Handle notification received while app is in foreground
    messaging().onMessage(remoteMessage => {
      if (remoteMessage?.data?.key === 'msg91') {
        MSG91PushNotificationSDK.handleFCMNotification(
          remoteMessage.data.html_url
        );
      }
    });
  }, []);

  return (
    <>
      <AppNavigator />

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

Replace the following values with your actual configuration:

your_widget_token
your_msg91_project_id

The SDK provides methods specifically for the FCM use case.

Registers the device's Firebase Cloud Messaging token with MSG91.

MSG91PushNotificationSDK.registerFCM(token);

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

Displays the HTML notification content inside an in-app popup.

MSG91PushNotificationSDK.handleFCMNotification(htmlUrl);

MSG91PushNotificationSDK.handleFCMNotification(
  remoteMessage.data.html_url
);

The overall notification flow works as follows:

MSG91
   ↓
Firebase Cloud Messaging
   ↓
User's Android Device
   ↓
FCM Notification
   ↓
User taps notification
   ↓
React Native Application opens/resumes
   ↓
MSG91 SDK receives html_url
   ↓
HTML content is rendered
   ↓
In-app notification popup is displayed

For foreground notifications, the application can directly process the FCM message and display the HTML content using:

MSG91PushNotificationSDK.handleFCMNotification(htmlUrl);

For MSG91 notifications, the application should identify MSG91 notifications using:

remoteMessage?.data?.key === 'msg91'

The notification data should also contain the HTML content URL:

remoteMessage.data.html_url

The SDK uses this URL to load and display the notification content inside the application.

If your requirement is limited to displaying HTML-based notifications while the application is open, you do not need to configure Firebase.

You only need:

1. @msg91comm/react-native-push-notification-sdk

2. react-native-webview

3. MSG91 widgetToken

4. MSG91 projectId
   

Example:

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

If you want both push notifications and in-app HTML notifications, you need:

1. MSG91 Push Notification SDK

2. react-native-webview

3. @react-native-firebase/messaging

4. Firebase project

5. google-services.json

6. Firebase Admin SDK private key uploaded to MSG91

7. FCM token registration with MSG91

8. FCM notification event handling in the application
   

If push notifications are not working, verify the following:

• Firebase project is correctly configured.

• FCM is enabled.

• google-services.json is present at:

android/app/google-services.json

• Firebase Admin SDK private key has been uploaded to MSG91.

• Correct MSG91 project is configured.

• Correct widgetToken and projectId are being used.
  

• The application successfully generates an FCM token.

• The generated token is passed to:

MSG91PushNotificationSDK.registerFCM(token);

Verify that the incoming notification contains:

key: 'msg91'

and:

html_url

The application should then pass the URL to:

MSG91PushNotificationSDK.handleFCMNotification(
  remoteMessage.data.html_url
);

Please note the following limitations:

• The SDK currently supports Android only.

• Firebase configuration is required for FCM-based push notifications.

• iOS support is currently not available.

• react-native-webview is required for rendering HTML-based notification content.
  

The MSG91 Push Notification SDK for React Native simplifies the implementation of both in-app and push notifications in Android applications.

Depending on your requirement, you can use it in two ways:

In-app notifications only

React Native App
      ↓
MSG91 SDK
      ↓
HTML Notification
      ↓
In-App Popup

Push + In-app notifications

MSG91
  ↓
Firebase FCM
  ↓
Android Device
  ↓
React Native App
  ↓
MSG91 SDK
  ↓
HTML Notification
  ↓
In-App Popup

This approach reduces the amount of custom notification-handling logic required in your React Native Android application while allowing you to use MSG91 for notification delivery and HTML-based notification presentation.