In-App Messaging

Starting from 0.27.0 version the In-App-Messaging (IAM) feature is available in the React Native SDK. This feature allows you to display in-app messages (such as fullscreens, popups, bottomsheets, and toasts) in your application.

The module provides methods for preloading messages, displaying them, and handling related events.

Presentation types

IAM can be displayed in different presentation styles:

Value	Description
fullScreen	Full-screen presentation
bottomSheet	Bottom sheet (modal)
popUp	Pop-up window
toast	Toast notification

info

No additional setup is required for Toast messages. They automatically pass through touch gestures outside the message area to the underlying UI.

Note

If you have troubles with closing IAM in Android devices by pressing back button or using back gesture, please add android:enableOnBackInvokedCallback="true" to AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <activity
                android:name=".MainActivity"
                android:enableOnBackInvokedCallback="true">
        </activity>
    </application>
</manifest>

Showing messages

Showing by ID

To show an IAM by its unique identifier, call storyManager.showIAMById(id, onlyPreloaded, signal?):

const success = await storyManager.showIAMById(
  'IAM_ID',
  false, // onlyPreloaded (true = show only if already cached, false = fetch if needed)
);

You can pass an optional AbortSignal as the third parameter to cancel loading. See Cancellation of actions.

Showing by event name

To trigger an IAM by a custom trigger event, call storyManager.showIAMByEvent(event, onlyPreloaded, signal?):

const success = await storyManager.showIAMByEvent(
  'user_registered',
  false, // onlyPreloaded
);

Preloading

To preload messages in the background (by IDs and/or tags):

// Preload all available messages
await storyManager.preloadIAM();

// Preload specific messages by IDs and tags
await storyManager.preloadIAM(['IAM_1', 'IAM_2'], ['tag1', 'tag2']);

Events

Use storyManager.onIamEvent() to listen to In-App Messaging events. The same listener fires for every IAM event below; the payload is in event.body:

storyManager.onIamEvent((event: any) => {
    console.log('iamEvent', event.body);
});

Available IAM events

Native event	event.body
showInAppMessage	{ id: int, title: String, event: String }
closeInAppMessage	{ id: int, title: String, event: String }
inAppMessageWidgetEvent	{ data: Object, name: String, inAppMessageData: Object }