In-App Messages
Native in-app messages display automatically on iOS 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 ABKInAppMessageControllerDelegate
delegate as described in our public documentation for iOS. 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// In-app messaging
func beforeInAppMessageDisplayed(inAppMessage: ABKInAppMessage!) -> ABKInAppMessageDisplayChoice {
let inAppMessageData = inAppMessage?.serializeToData()
var inAppMessageString: String? = nil
if let inAppMessageData = inAppMessageData {
inAppMessageString = String(data: inAppMessageData, encoding: .utf8)
}
let arguments = [
"inAppMessage": inAppMessageString ?? ""
]
// Send to JavaScript
bridge.eventDispatcher.sendDeviceEvent(
withName: "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
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 iOS implementation samples are contained in the iOS SDK.