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 listener receives a typed InAppMessageEvent whose payload is in event.body and can be discriminated by event.withName:

import type { InAppMessageEvent } from '@inappstory/react-native-sdk';

storyManager.onIamEvent((event: InAppMessageEvent) => {
  if (event.withName === 'inAppMessageWidgetEvent') {
    console.log('Widget event:', event.body.name, event.body.inAppMessageData.extraFields);
  } else {
    // showInAppMessage or closeInAppMessage: InAppMessageData { id, title, event, extraFields }
    console.log(event.withName, event.body.id, event.body.extraFields);
  }
});

Available IAM events

Native event	event.body	Description
showInAppMessage	{ id?: number, title?: string, event?: string, extraFields?: Record<string, string> | null }	In-app message was presented
closeInAppMessage	{ id?: number, title?: string, event?: string, extraFields?: Record<string, string> | null }	In-app message was closed
inAppMessageWidgetEvent	{ data?: Record<string, string>, name?: string, inAppMessageData: InAppMessageData }	Interactive widget clicked inside message