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.
- node (v16.10.0 or higher)
- ruby (2.7.4)
- React Native (v0.68.0)
For iOS project:
- Xcode and Command Line Tools (13.2.1)
- CocoaPods (v1.11.3)
- Minimum deployment target 12.0
For Android project:
- Android Studio (Bumblebee | 2021.1.1)
- Gradle (v7.3.3)
- Supported API Levels: 21 (Android 5.0 - Lollipop) - 31 (Android 12.0)
This guide is designed to get you up and running with Mobile Messaging SDK plugin for React Native:
-
Make sure to setup application at Infobip portal, if you haven't already.
-
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
-
Configure platforms
-
iOS
Starting from the 6.2.0 plugin version it's not mandatory to add
use_frameworks!
to thePodfile
, check the Migration guide if you want to get rid of it.- Run
pod install
from/ios
folder (installs Mobile Messaging native SDK) - Import following header
#import <MobileMessaging/MobileMessagingPluginApplicationDelegate.h>
and add[MobileMessagingPluginApplicationDelegate install];
into/ios/<ProjectName>/AppDelegate.m
(this is required for OS callbacks such asdidRegisterForRemoteNotifications
to be intercepted by native MobileMessaging SDK)
... #import <MobileMessaging/MobileMessagingPluginApplicationDelegate.h> @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [MobileMessagingPluginApplicationDelegate install]; ... } ...
- Configure your project to support Push Notification as described in item 2 of iOS integration quick start guide
- 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
- Run
-
Android
-
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
-
Add 'com.google.gms:google-services' to
android/build.gradle
filebuildscript { ... dependencies { ... //GMS Gradle plugin classpath 'com.google.gms:google-services:4.3.10' } }
And add
apply plugin: 'com.google.gms.google-services'
at the end of yourandroid/app/build.gradle
in order to apply Google Services Gradle Plugin -
Add a Firebase configuration file (google-services.json) as described in
Firebase documentation
. Check Applying Firebase configuration in MobileMessaging SDK Guide for alternatives.
Notice (check if you don't plan to use Geofencing):
As long as Geofencing is automatically included to the plugin, it adds required geo permissions automatically. You can remove them from
/android/app/src/main/AndroidManifest.xml
by adding following:<manifest ... xmlns:tools="http://schemas.android.com/tools"> ... <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" tools:node="remove" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" tools:node="remove" /> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" tools:node="remove" /> ... </manifest>
-
-
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: User profile
If you have any questions or suggestions, feel free to send an email to [email protected] or create an issue. |
---|