The In-app message plugin lets you add InApp functionality to your application. The messages are created on the server and passed to the device over a periodic synchronization process. These messages are displayed over the application content, typically as promotional messages.

The messages are displayed via templates that define how they look and if they cover the entire screen or only a part of the screen. The default templates we provide are customizable. You can also create your own InApp templates to provide for additional use cases.

Getting started

The In-app message plugin is added to the Campaign library by default. Here is how to start using it:

Copy template files from our GitHub repository directory into your project.
Import the templates to your App.js. They must be integrated into your application and registered with the Campaign library at startup.

import './in-app/in-app-banner';
import './in-app/in-app-media';

Add appropriate places in your app that display messages. See the executeInApp function below for details.

Module API

`hideInApp()`

This function hides the currently displayed InApp message.

import { NativeModules } from 'react-native';
const { RNAcousticMobilePushInapp } = NativeModules;
RNAcousticMobilePushInapp.hideInApp();

`createInApp(content, template, rules, maxViews, attribution, mailingId)`

Use this function to add a new InApp message to the system. Note: this is typically only done in a testing context. The content of the message is specified as a generic JavaScript object and is entirely customizable by the template. The rules is an array of keywords that define when to display the message. The maxViews parameter defines how many times the message should be shown to the user. Note that when the user clicks on the message, it is deleted regardless of how many views are remaining. The attribution parameter optionally defines where the message came from and the mailingId optional parameter defines what mailing the message came from.

import {
    NativeModules
} from 'react-native';

const {
    RNAcousticMobilePushInapp
} = NativeModules;
const content = {
    text: "Minimal Banner Message",
    action: {
        type: "url",
        value: "http://acoustic.co"
    }
};
const template = "default";
const rules = ['product', 'home']; // Keywords of when to display this InApp message 
const maxViews = 5; // Maximum number of times a message is displayed
const attribution = "optional attribution string";
const mailingId = "optional mailing id string";

RNAcousticMobilePushInapp.createInApp(content, template, rules, maxViews, attribution, mailingId);

`executeInApp(rules)`

This function executes the specified rules, which is an array of keywords. If there is a message with any of those rules in the database, that message will be displayed on the top of the current content.

import {
    NativeModules
} from 'react-native';

const {
    RNAcousticMobilePushInapp
} = NativeModules;
const rules = ["product", "about"];

RNAcousticMobilePushInapp.executeInApp(rules);

`registerInApp(template, module, height)`

This function registers an InApp template with the SDK. The template name must be unique across all registered templates, the module specifies what module is registered with react native and the height optionally specifies a desired height of the InApp message. Please see the included banner and media templates for concrete examples.

import {
    AppRegistry,
    NativeModules
} from 'react-native';
import {
    InAppTemplate
} from './in-app-template';

const {
    RNAcousticMobilePushInapp
} = NativeModules;

export default class ExampleTemplate extends InAppTemplate {
    render() {
        return ( <
            View / >
        );
    }
}

AppRegistry.registerComponent("ExampleTemplate", () => ExampleTemplate);
RNAcousticMobilePushInapp.registerInApp("example", "ExampleTemplate", 44);

`clickInApp(inAppMessageById)`

This function registers a click of an InApp message which sends an event back to the server, opens the action associated with the message and dismisses the message. The inAppMessageId comes from the current InApp message that is displayed. Please see the included banner and media templates for concrete examples.

import {
    NativeModules
} from 'react-native';

const {
    RNAcousticMobilePushInapp
} = NativeModules;
const inAppMessageId = "ABCD";

RNAcousticMobilePushInapp.clickInApp(inAppMessageid)

`syncInAppMessages()`

This function requests the SDK to sync the inbox messages with the server.

import {
    NativeModules
} from 'react-native';

const {
    RNAcousticMobilePushInapp
} = NativeModules;

RNAcousticMobilePushInapp.syncInAppMessages();

`deleteInApp(inAppMessageId)`

This function lets you remove an InApp message from the database. inAppMessageId comes from an InApp message object.

import {
    NativeModules
} from 'react-native';

const {
    RNAcousticMobilePushInapp
} = NativeModules;
const inAppMessageId = "ABCD";

RNAcousticMobilePushInapp.deleteInApp(inAppMessageid)

In-app message plugin for React Native apps