In-App Messages

Native in-app messages display automatically on Android when using React Native.

Customizing

Accessing In-App Message Data

If you would like to access the in-app message data in the JavaScript layer, implement the IInAppMessageManagerListener as described in our public documentation for Android. In your beforeInAppMessageDisplayed implementation, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value (for more on these values, see our Android documentation).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
    WritableMap parameters = new WritableNativeMap();
    parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
    getReactNativeHost()
        .getReactInstanceManager()
        .getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("inAppMessageReceived", parameters);
    // Note: return InAppMessageOperation.DISCARD if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return InAppMessageOperation.DISPLAY_NOW;
}

Receiving In-App Message in JavaScript

On the JavaScript side, this data can be used to instantiate a BrazeInAppMessage:

1
2
3
this._listener = DeviceEventEmitter.addListener("inAppMessageReceived", function(event) {
    let inAppMessage = new ReactAppboy.BrazeInAppMessage(event.inAppMessage)
})

Analytics

To log analytics using your BrazeInAppMessage, pass the instance into the desired analytics function:

  • logInAppMessageClicked
  • logInAppMessageImpression
  • logInAppMessageButtonClicked (along with the button index)

For example:

1
2
3
4
5
6
7
// Log a click
ReactAppboy.logInAppMessageClicked(inAppMessage);
// Log an impression
ReactAppboy.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
ReactAppboy.logInAppMessageButtonClicked(inAppMessage, 0);

A sample implementation of this is contained in AppboyProject, within the React SDK. Additional Android implementation samples are contained in the Android SDK.

WAS THIS PAGE HELPFUL?
New Stuff!