Mobile Messaging SDK plugin for React Native

Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application. In almost no time of implementation you get push notification in your application and access to the features of Infobip IP Messaging Platform. The document describes library integration steps for your React Native project.

• Requirements
• Quick start guide
• Initialization configuration

Requirements

• node (v20.19.4 or higher; v22.13.0 or higher if using Swift Package Manager)
• ruby (2.7.8 or higher; the Example app uses 3.3.5)
• React Native (v0.86.0 or higher; v0.87.0 or higher if using Swift Package Manager)

For iOS project:

• Xcode and Command Line Tools (16.x or newer, tested with 27.0.0)
• Minimum deployment target 15.1
• If using CocoaPods: CocoaPods (v1.16.x)

For Android project:

• Android Studio (Narwhal | 2025.1.3)
• JDK 17
• Gradle (v9.4.1)
• Supported API Levels: 24 (Android 7.0 - Nougat) - 36 (Android 16)

Quick start guide

This guide is designed to get you up and running with Mobile Messaging SDK plugin for React Native.

1. Make sure to setup application at Infobip portal, if you haven't already.

2. Add MobileMessaging plugin to your project, run in terminal:

   $ npm install infobip-mobile-messaging-react-native-plugin

   TypeScript's definitions are included into npm package

3. Configure platforms

   • iOS

     The plugin ships both a CocoaPods podspec and a Swift Package Manager manifest, so your app can integrate it with either dependency manager.

     Dependency manager setup

     CocoaPods

     Notice

     Starting from the 6.2.0 plugin version it's not mandatory to add use_frameworks! to the Podfile, check the Migration guide if you want to get rid of it.

     1. Run pod install from /ios folder (installs Mobile Messaging native SDK)
     Swift Package Manager (experimental)

     Requires React Native 0.87.0 or higher and node 22.13.0 or higher. See the Swift Package Manager integration guide for details.

     1. If your app currently uses CocoaPods, remove the CocoaPods integration first (from /ios folder):

        bundle exec pod deintegrate
        rm -rf Pods <ProjectName>.xcworkspace

     2. Disable automatic pod install in react-native.config.js. Otherwise, react-native run-ios reinstalls pods whenever a Podfile is present:

        module.exports = {
          project: {
            ios: { automaticPodsInstallation: false },
          },
        };

     3. If you use WebRTC UI (the equivalent of $WebRTCUIEnabled = true in the Podfile), enable it in your app's package.json:

        "infobipMobileMessaging": {
          "webRTCUI": true
        }

     4. If other native dependencies of your app don't ship a Package.swift, generate one for each of them from the project root:

        npx react-native spm scaffold

        • the generated files live in node_modules and are removed by npm install. Persist them with patch-package (npx patch-package <dependency-name>, then commit the patch), or re-run the command after every install
        • without them, the next step fails with MissingManifestError
     5. From the project root, run the following command. React Native reads the plugin's Package.swift and wires it, together with the Mobile Messaging native SDK, into your Xcode project automatically:

        npx react-native spm --yes

        • re-run it after adding, removing or updating native dependencies, or after changing the webRTCUI flag
        • open ios/<ProjectName>.xcodeproj (not the .xcworkspace) in Xcode
     2. Import the necessary dependency (depending on the dependency manager) and add MobileMessagingPluginApplicationDelegate.install() into /ios/<ProjectName>/AppDelegate.swift (this is required for OS callbacks such as didRegisterForRemoteNotifications to be intercepted by native MobileMessaging SDK).
     • If using SPM, import the MobileMessagingReactNative dependency.
     • If using CocoaPods, import the MobileMessaging dependency.

     The AppDelegate should now look like the following:

         import UIKit
         import React
         // if using Swift Package Manager, import the MobileMessagingReactNative dependency
         import MobileMessagingReactNative
         // if using CocoaPods, import the MobileMessaging dependency
         import MobileMessaging
     
         @main
         class AppDelegate: UIResponder, UIApplicationDelegate {
           func application(
             _ application: UIApplication,
             didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
           ) -> Bool {
             ...
             MobileMessagingPluginApplicationDelegate.install()
             ...
           }
         }
         ...

     Notice

     An Objective-C AppDelegate.m is only supported with the CocoaPods integration:

         ...
         #import <MobileMessaging/MobileMessagingPluginApplicationDelegate.h>
     
         @implementation AppDelegate
     
         - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
         {
             [MobileMessagingPluginApplicationDelegate install];
             ...
         }
         ...

     Swift Package Manager integration requires a Swift AppDelegate.swift.

     3. Configure your project to support Push Notification as described in item 2 of iOS integration quick start guide
     4. Integrate Notification Service Extension into your app in order to obtain:
        • more accurate processing of messages and delivery stats
        • support of rich notifications on the lock screen
     • If using SPM, follow the guide for integrating the NSE here.

     Notice (CocoaPods and Swift Package Manager integration):

     From version 15.1.0, the plugin supports both Swift Package Manager (React Native 0.87 and above, experimental) and CocoaPods. After December 2, 2026, CocoaPods will permanently become read-only, so migration to SPM is recommended to get the latest plugin updates.

   • Android

     1. Following paths should be provided in .bash_profile

        export ANDROID_HOME=$HOME/Library/Android/sdk
        export PATH=$PATH:$ANDROID_HOME/emulator
        export PATH=$PATH:$ANDROID_HOME/tools
        export PATH=$PATH:$ANDROID_HOME/tools/bin
        export PATH=$PATH:$ANDROID_HOME/platform-tools

     2. Add com.google.gms:google-services to android/build.gradle file

        buildscript {
           ...
           dependencies {
               ...
              // GMS Gradle plugin
              classpath 'com.google.gms:google-services:4.4.2'
           }
        }

        And add apply plugin: 'com.google.gms.google-services' at the end of your android/app/build.gradle in order to apply Google Services Gradle Plugin

     3. Add a Firebase configuration file (google-services.json) as described in Firebase documentation. Check Applying Firebase configuration in MobileMessaging SDK Guide for alternatives.

     Notice (when targeting Android 13):

     Starting from Android 13, Google requires to ask user for notification permission. Follow this guide to make a permission request.

Initialization configuration

Initialize Mobile Messaging React Native plugin, provide application configuration in init method:

import { mobileMessaging } from 'infobip-mobile-messaging-react-native-plugin';

someMethod(): void {
   ...

           mobileMessaging.init(
                   {
                      applicationCode: '<your app code>',
                      ios: {
                         notificationTypes: ['alert', 'badge', 'sound'],
                      },
                   },
                   () => {
                      console.log('MobileMessaging started');
                   },
                   error => {
                      console.log('MobileMessaging error: ', error);
                   },
           );
}

expand to see TypeScript code

import { mobileMessaging } from 'infobip-mobile-messaging-react-native-plugin';

someMethod(): void {
   ...

           mobileMessaging.init(
                   {
                      applicationCode: '<your app code>',
                      ios: {
                         notificationTypes: ['alert', 'badge', 'sound'],
                      },
                   },
                   () => {
                      console.log('MobileMessaging started');
                   },
                   (error: MobileMessagingError) => {
                      console.log('MobileMessaging error: ', error);
                   },
           );
}

More details on SDK features and FAQ you can find on Wiki

NEXT STEPS: Users and installations

If you have any questions or suggestions, feel free to send an email to support@infobip.com or create an issue.