> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zixflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# In-App Messaging

> Display and handle in-app messages with the Zixflow React Native SDK.

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:

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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 type           | When it fires              |
| -------------------- | -------------------------- |
| `messageShown`       | Message is displayed       |
| `messageDismissed`   | Message is closed          |
| `messageActionTaken` | User taps a message action |
| `errorWithMessage`   | Message fails to display   |

### Dismiss a message

Dismiss the currently visible in-app message from your app code:

```typescript theme={null}
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.

```tsx theme={null}
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()`:

```typescript theme={null}
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](/documentation/sdk/react-native/api-reference).

***