React Native SDK for OneSignal's push notification, email, SMS, and in-app messaging service
—
Trigger-based in-app messaging system with lifecycle event handling and display control.
Handle in-app message clicks and lifecycle events including display and dismiss events.
/**
* Add listeners for In-App Message click and/or lifecycle events.
* @param event - The event type to listen for
* @param listener - Callback function for the event
*/
function addEventListener<K extends InAppMessageEventName>(
event: K,
listener: (event: InAppMessageEventTypeMap[K]) => void
): void;
/**
* Remove listeners for In-App Message click and/or lifecycle events.
* @param event - The event type to stop listening for
* @param listener - The callback function to remove
*/
function removeEventListener<K extends InAppMessageEventName>(
event: K,
listener: (obj: InAppMessageEventTypeMap[K]) => void
): void;Usage Examples:
import { OneSignal } from "react-native-onesignal";
// Handle in-app message clicks
OneSignal.InAppMessages.addEventListener('click', (event) => {
console.log('In-app message clicked:', {
messageId: event.message.messageId,
actionId: event.result.actionId,
url: event.result.url,
closingMessage: event.result.closingMessage
});
// Handle click actions
if (event.result.url) {
// Open URL or navigate
}
});
// Handle message lifecycle events
OneSignal.InAppMessages.addEventListener('willDisplay', (event) => {
console.log('In-app message will display:', event.message.messageId);
});
OneSignal.InAppMessages.addEventListener('didDisplay', (event) => {
console.log('In-app message displayed:', event.message.messageId);
});
OneSignal.InAppMessages.addEventListener('willDismiss', (event) => {
console.log('In-app message will dismiss:', event.message.messageId);
});
OneSignal.InAppMessages.addEventListener('didDismiss', (event) => {
console.log('In-app message dismissed:', event.message.messageId);
});Manage triggers that determine when in-app messages should be displayed to users.
/**
* Add a trigger for the current user. Triggers are currently explicitly used to determine
* whether a specific IAM should be displayed to the user.
* @param key - Trigger key
* @param value - Trigger value
*/
function addTrigger(key: string, value: string): void;
/**
* Add multiple triggers for the current user. Triggers are currently explicitly used to
* determine whether a specific IAM should be displayed to the user.
* @param triggers - Object containing key-value trigger pairs
*/
function addTriggers(triggers: { [key: string]: string }): void;
/**
* Remove the trigger with the provided key from the current user.
* @param key - Trigger key to remove
*/
function removeTrigger(key: string): void;
/**
* Remove multiple triggers from the current user.
* @param keys - Array of trigger keys to remove
*/
function removeTriggers(keys: string[]): void;
/**
* Clear all triggers from the current user.
*/
function clearTriggers(): void;Usage Examples:
// Add single trigger to show welcome message
OneSignal.InAppMessages.addTrigger("page", "home");
// Add multiple triggers for targeting
OneSignal.InAppMessages.addTriggers({
"level": "5",
"stage": "tutorial_complete",
"subscription": "premium",
"session_count": "3"
});
// Remove specific trigger
OneSignal.InAppMessages.removeTrigger("level");
// Remove multiple triggers
OneSignal.InAppMessages.removeTriggers(["stage", "session_count"]);
// Clear all triggers (useful for logout)
OneSignal.InAppMessages.clearTriggers();Control whether in-app messages are displayed to the user.
/**
* Set whether in-app messaging is currently paused.
* When set to true no IAM will be presented to the user regardless of whether they qualify for them.
* When set to false any IAMs the user qualifies for will be presented to the user at the appropriate time.
* @param pause - Whether to pause in-app messages
*/
function setPaused(pause: boolean): void;
/**
* Whether in-app messaging is currently paused.
* @returns Promise resolving to paused status
*/
function getPaused(): Promise<boolean>;Usage Examples:
// Pause in-app messages during onboarding
OneSignal.InAppMessages.setPaused(true);
// Resume in-app messages after onboarding
OneSignal.InAppMessages.setPaused(false);
// Check current paused status
const isPaused = await OneSignal.InAppMessages.getPaused();
console.log('In-app messages paused:', isPaused);
// Conditionally pause based on app state
if (isInCriticalFlow) {
OneSignal.InAppMessages.setPaused(true);
}// Set triggers to show welcome messages based on user progress
OneSignal.InAppMessages.addTriggers({
"welcome_step": "1",
"first_session": "true"
});
// Update trigger as user progresses
OneSignal.InAppMessages.addTrigger("welcome_step", "2");
// Clear welcome triggers when complete
OneSignal.InAppMessages.removeTriggers(["welcome_step", "first_session"]);// Target users who haven't seen new feature
OneSignal.InAppMessages.addTriggers({
"app_version": "2.1.0",
"feature_announcement_seen": "false",
"user_level": "advanced"
});
// Mark as seen after display
OneSignal.InAppMessages.addEventListener('didDisplay', (event) => {
if (event.message.messageId === 'feature-announcement-id') {
OneSignal.InAppMessages.addTrigger("feature_announcement_seen", "true");
}
});// Set triggers based on current screen/context
OneSignal.InAppMessages.addTriggers({
"current_screen": "checkout",
"cart_value": "high",
"first_time_buyer": "true"
});
// Update context as user navigates
function onScreenChange(screenName) {
OneSignal.InAppMessages.addTrigger("current_screen", screenName);
}type InAppMessageEventName = 'click' | 'willDisplay' | 'didDisplay' | 'willDismiss' | 'didDismiss';
type InAppMessageEventTypeMap = {
click: InAppMessageClickEvent;
willDisplay: InAppMessageWillDisplayEvent;
didDisplay: InAppMessageDidDisplayEvent;
willDismiss: InAppMessageWillDismissEvent;
didDismiss: InAppMessageDidDismissEvent;
};
interface InAppMessage {
messageId: string;
}
interface InAppMessageClickEvent {
message: InAppMessage;
result: InAppMessageClickResult;
}
interface InAppMessageClickResult {
closingMessage: boolean;
actionId?: string;
url?: string;
urlTarget?: string;
}
interface InAppMessageWillDisplayEvent {
message: InAppMessage;
}
interface InAppMessageDidDisplayEvent {
message: InAppMessage;
}
interface InAppMessageWillDismissEvent {
message: InAppMessage;
}
interface InAppMessageDidDismissEvent {
message: InAppMessage;
}Install with Tessl CLI
npx tessl i tessl/npm-react-native-onesignal