Skip to main content
In-app messages appear while users are active in your app. The React Native SDK displays them automatically when you enable the in-app module and identify the user.

​
Enable in-app messaging

Pass an inApp object when you initialize the SDK: 
import { Zixflow, ZixflowConfig } from 'zixflow-reactnative';

const config: ZixflowConfig = {
  apiKey: 'YOUR_API_KEY',
  inApp: {},
};

Zixflow.initialize(config);

​
Identify users

You must identify a user before personalized in-app messages can be delivered: 
Zixflow.identify({
  userId: 'user-123',
  traits: {
    email: 'user@example.com',
  },
});

​
How messages appear

Once in-app is enabled and the user is identified:
  1. Create and launch an in-app campaign in the Zixflow dashboard.
  2. When campaign conditions match, the SDK fetches and displays the message in your app.
  3. No extra UI code is required for standard modal/banner messages—the SDK renders them.
Track screen views with Zixflow.screen(...) if your campaigns target specific screens.

​
Listen for in-app events

Register a listener to react when messages are shown, dismissed, or when a user takes an action: 
import { useEffect } from 'react';
import {
  Zixflow,
  InAppMessageEventType,
} from 'zixflow-reactnative';

useEffect(() => {
  const subscription = Zixflow.inAppMessaging.registerEventsListener((event) => {
    switch (event.eventType) {
      case InAppMessageEventType.messageShown:
        console.log('Message shown', event.messageId);
        break;
      case InAppMessageEventType.messageDismissed:
        console.log('Message dismissed', event.messageId);
        break;
      case InAppMessageEventType.messageActionTaken:
        console.log('Action', event.actionName, event.actionValue);
        break;
      case InAppMessageEventType.errorWithMessage:
        console.log('In-app error', event.messageId);
        break;
    }
  });

  return () => subscription.remove();
}, []);
Event typeWhen it fires
messageShownMessage is displayed
messageDismissedMessage is closed
messageActionTakenUser taps a message action
errorWithMessageMessage fails to display

​
Dismiss a message

Dismiss the currently visible in-app message from your app code: 
Zixflow.inAppMessaging.dismissMessage();

​
Inline in-app messages

Use InlineInAppMessageView to render a message inline in your layout. The elementId must match the placement ID configured in your campaign. 
import React from 'react';
import { InlineInAppMessageView } from 'zixflow-reactnative';

export function PromoBanner() {
  return (
    <InlineInAppMessageView
      elementId="home-banner"
      style={{ width: '100%' }}
      onActionClick={(message, actionValue, actionName) => {
        console.log('Inline action', { message, actionValue, actionName });
      }}
    />
  );
}

​
Notification inbox

Access persistent inbox messages with Zixflow.inAppMessaging.inbox(): 
import { useEffect, useState } from 'react';
import { Zixflow, type InboxMessage } from 'zixflow-reactnative';

export function useInboxMessages() {
  const [messages, setMessages] = useState<InboxMessage[]>([]);

  useEffect(() => {
    const inbox = Zixflow.inAppMessaging.inbox();

    inbox.getMessages().then(setMessages);

    const subscription = inbox.subscribeToMessages({
      onMessagesChanged: setMessages,
    });

    return () => subscription.remove();
  }, []);

  return messages;
}

// Mark read / unread / delete / track clicks
const inbox = Zixflow.inAppMessaging.inbox();
inbox.markMessageOpened(message);
inbox.markMessageUnopened(message);
inbox.markMessageDeleted(message);
inbox.trackMessageClicked(message, 'cta');
For the full method list, see the API Reference.