Notification Center

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

Android Installation:

MavenBadgeMavenBadge

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<ReactPackage> getPackages() {
          List<ReactPackage> 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.

🚧

IMPORTANT

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()

MoEInboxData 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<MoEInboxMessage> = [];
}

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<MoEAction> = [];

  /// 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