Notification Center 3.x.x

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

Important

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.

Inbox Initialization

To initialise Inbox, pass APP ID as parameter to initialize(APP ID) method of MoEReactInbox as shown below

import MoEReactInbox from "react-native-moengage-inbox";
MoEReactInbox.initialize(YOUR Workspace ID);

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:

class MoEInboxData  {
  /// Native platform from which the callback was triggered.(ios/android)
  platform: String;

  /// List of [MoEInboxMessage]
  messages:Array = [];
}

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
  text: 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>;
}

class MoEAction {
  /// actionType- navigation
  actionType: MoEActionType;
   
  /// 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>;
}

class MoEMedia {
  /// Content type of the Media. (image/video/audio)
  mediaType: MoEMediaType;

  /// Url for the media content. Generally a http(s) url.
  url: string;
}

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