CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-onesignal

React Native SDK for OneSignal's push notification, email, SMS, and in-app messaging service

Pending
Overview
Eval results
Files

in-app-messages.mddocs/

In-App Messages

Trigger-based in-app messaging system with lifecycle event handling and display control.

Capabilities

In-App Message Event Handling

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);
});

Trigger Management

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();

Message Display Control

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);
}

Common Use Cases

Welcome Flow Triggers

// 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"]);

Feature Announcement Targeting

// 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");
  }
});

Contextual Messaging

// 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);
}

Types

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

docs

core-sdk.md

in-app-messages.md

index.md

live-activities.md

location.md

notifications.md

push-subscription.md

session.md

user-management.md

tile.json