Notification Center

Installation

Install MoEngage's Inbox Plugin to your application, using the npm package manager. And then link your native dependencies.

Shell
$ 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

MavenBadge

Add mavenCentral() repository in the project-level build.gradle file.

build.gradle
buildscript {
    repositories {
        mavenCentral()
    }
}

allprojects {
    repositories {
        mavenCentral()
    }
}

In android/settings.gradle add the following:

Groovy
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

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

Java
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.

Java
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

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

TypeScript
import MoEReactInbox from "react-native-moengage-inbox";
var inboxData= await MoEReactInbox.fetchAllMessages()

InboxData Payload

MoEInboxData will be received in the below format:

TypeScript
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:

TypeScript
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:

TypeScript
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:

TypeScript
import MoEReactInbox from "react-native-moengage-inbox";
MoEReactInbox.deleteMessage(message)  //Pass the instance of MoEInboxMessage here
Was this article helpful?
0 out of 0 found this helpful