In-App Messages

Native in-app messages display automatically on Android and iOS when using React Native. This article covers customizing and logging analytics for your in-app messages for apps using React Native.

Accessing In-App Message Data

If you want to access the in-app message data in the JavaScript layer, implement the IInAppMessageManagerListener as described in our Android section on Custom Manager Listener. 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;
}

If you would like to access the in-app message data in the JavaScript layer, implement the ABKInAppMessageControllerDelegate delegate as described in our iOS section on Core In-App Message Delegate. In the beforeInAppMessageDisplayed: delegate method, 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 iOS documentation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// In-app messaging
- (ABKInAppMessageDisplayChoice) beforeInAppMessageDisplayed:(ABKInAppMessage *)inAppMessage {
  NSData *inAppMessageData = [inAppMessage serializeToData];
  NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
  NSDictionary *arguments = @{
    @"inAppMessage" : inAppMessageString
  };
  // Send to JavaScript
  [self.bridge.eventDispatcher
             sendDeviceEventWithName:@"inAppMessageReceived"
             body:arguments];
  // Note: return ABKDiscardInAppMessage if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return ABKDisplayInAppMessageNow;
}

Receiving In-App Message in JavaScript

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

1
2
3
DeviceEventEmitter.addListener("inAppMessageReceived", (event) => {
    const 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);

Test Displaying a Sample In-App Message

Follow the steps below to test a sample in-app message.

  1. Set an active user in the React application by calling ReactAppboy.changeUserId('your-user-id') method.
  2. Head to Campaigns and follow this guide to create a new In-App Messaging campaign.
  3. Compose your test in-app messaging campaign and head over to the Test tab. Add the same user-id as the test user and click Send Test. You should be able to launch an in-app message on your device shortly.

In-App Messaging Campaign Test

A sample implementation can be found in AppboyProject, within the React SDK. Additional Android and iOS implementation samples can be found in the Android and iOS SDK.

WAS THIS PAGE HELPFUL?
New Stuff!