Installation
Install MoEngage's Inbox Plugin to your application, using the npm package manager. And then link your native dependencies.
$ npm install react-native-moengage-inbox
$ react-native link react-native-moengage-inbox
Note: This plugin is dependent on react-native-moengage
plugin. Make sure you have installed the react-native-moengage
plugin as well. Refer to the link for the same.
Android Installation
Add mavenCentral()
repository in the project-level build.gradle
file.
buildscript {
repositories {
mavenCentral()
}
}
allprojects {
repositories {
mavenCentral()
}
}
In android/settings.gradle
add the following:
include ':react-native-moengage-inbox'
project(':react-native-moengage-inbox').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-moengage-inbox/android')
In android/app/build.gradle
add the following
dependencies {
...
implementation project(':react-native-moengage-inbox')
implementation("com.moengage:inbox-core:$sdkVersion")
}
where $sdkVersion
should be replaced by the latest version of the MoEngage SDK.
Add the MoEngage React Package in the Application class's getPackages()
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
List packages = new PackageList(this).getPackages();
packages.add(new MoengageInboxPackage());
return packages;
}
}
};
@Override public void onCreate() {
super.onCreate();
}
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
In case you are facing issues with the import add the below import statement in your java file.
import com.moengage.react.inbox.MoengageInboxPackage;
iOS Installation
In the case of iOS, the native dependency is part of the core SDK itself, so there is no need to include any additional dependency for supporting Notification Center.
warning |
Warning Make sure to configure AppGroup ID in App Target and Set up Notification Service Extension in your iOS Project, for the SDK to save the received notifications. |
Fetch Messages
To fetch all the inbox messages use fetchAllMessages()
method as shown below, where you would get an instance of MoEInboxData
import MoEReactInbox from "react-native-moengage-inbox";
var inboxData= await MoEReactInbox.fetchAllMessages()
InboxData Payload
MoEInboxData will be received in the below format:
export default class MoEInboxData {
/// Native platform from which the callback was triggered.(ios/android)
platform: String;
/// List of [MoEInboxMessage]
messages:Array = [];
}
export default class MoEInboxMessage {
/// internal identifier used by the SDK for storage.(Only Android)
id: number;
/// Unique identifier for a message.
campaignId: string;
/// Text content of the message. Instance of MoETextContent
textContent: MoETextContent;
/// true if the message has been clicked by the user else false
isClicked: boolean;
/// Media content associated with the message.
media: MoEMedia;
/// List of actions to be executed on click. Instances of [MoEAction]
action: Array = [];
/// Tag associated with the message.
tag: string;
/// The time in which the message was received on the device.
///
/// Format - ISO-8601 yyyy-MM-dd'T'HH:mm:ss'Z'
receivedTime: string;
/// The time at which the message expiry.
///
/// Format - ISO-8601 yyyy-MM-dd'T'HH:mm:ss'Z'
expiry: string;
/// Complete message payload. This will vary for platforms
payload: Map<String, Object>;
}
export default class MoEAction {
/// actionType- navigation
actionType: string;
/// MoENavigationAction Instance
action: MoENavigationAction;
}
export default class MoENavigationAction {
/// navigationType- deepLink, richLanding, screenName
navigationType: string;
/// Value associated with navigation action eg: url / screen name
value: string;
/// Custom Key-Value Pairs associated with action
kvPair: Map<String, Object>;
}
export default class MoEMedia {
/// Content type of the Media. (image/video/audio)
mediaType: string;
/// Url for the media content. Generally a http(s) url.
url: string;
}
export default class MoETextContent {
/// Tiitle content of the message
title: string;
/// Subtitle content of the message
subtitle: string;
/// Message content of the message
message: string;
/// Summary content of the message
summary: string;
}
Get Unclicked Message Count
To obtain the unclicked messages count from the Inbox use getUnClickedCount()
method as shown below:
import MoEReactInbox from "react-native-moengage-inbox";
var count = await MoEReactInbox.getUnClickedCount()
Track Message Clicks
To track clicks on the messages inside your Inbox use trackMessageClicked()
method as shown below:
import MoEReactInbox from "react-native-moengage-inbox";
MoEReactInbox.trackMessageClicked(message) //Pass the instance of MoEInboxMessage here
Delete Message
To delete a particular message from the list of messages use deleteMessage()
method as shown below:
import MoEReactInbox from "react-native-moengage-inbox";
MoEReactInbox.deleteMessage(message) //Pass the instance of MoEInboxMessage here