Docs menu

React Native SDK

Install the React Native SDK

Install the SDK, set the widget URL and open the chat.

@mentiora-ai/react-native-sdk renders the widget in a react-native-webview. It has no native code and runs in Expo Go, development builds and bare React Native apps.

Add the package

Requires React 18+, React Native 0.76+ and react-native-webview 13.6 to 16.

SH
npm install @mentiora-ai/react-native-sdk react-native-webview \
  @react-native-async-storage/async-storage react-native-safe-area-context

In an Expo app, use npx expo install instead. AsyncStorage keeps the anonymous user across launches. react-native-safe-area-context supplies safe-area insets. Both are optional.

Widget URL

The SDK loads your widget from a URL of this form:

https://widget.<your-workspace>.mentiora.ai/h/rn/<embed key>

The origin is the one in your install snippet's src, and the embed key is on the Install tab in Mentiora admin. configure() throws on any other URL shape.

Open the chat

Configure once at startup, and mount <MentioraHost /> once as the last child of your app root so the chat draws over your navigator:

TSX
import { Mentiora, MentioraHost } from "@mentiora-ai/react-native-sdk";

Mentiora.configure({
  widgetUrl: "https://widget.<your-workspace>.mentiora.ai/h/rn/pk_wgt_…",
});

export default function App() {
  return (
    <>
      <YourNavigator />
      <MentioraHost />
    </>
  );
}

Then, from anywhere:

TS
Mentiora.open();
Mentiora.open({ threadId }); // a specific conversation
Mentiora.close();

An open() called before configure() or before <MentioraHost /> mounts waits until both exist. close() hides the chat and keeps the page loaded, so the next open() does not reload it. On Android, the back button goes back inside the chat first, then closes it.

Inline widget

To place the chat in your own layout, for example in a tab, render <MentioraWidget />. It takes the same options as configure(), plus visible:

TSX
import { MentioraWidget } from "@mentiora-ai/react-native-sdk";

<MentioraWidget
  widgetUrl={widgetUrl}
  identity={identity}
  visible={onSupportTab}
/>;

Pass visible={false} instead of unmounting to keep the page loaded while it is off-screen.