Install with React Native

When AI replies are enabled for the App, the chat identifies AI answers and offers “Talk to a Member”. No extra SDK option or AI secret is required. Provider keys stay on the server.

The React Native SDK adds your App’s chat to your iOS and Android app. It is written in plain React Native: on its own, it needs no native module. Your Contacts write as they do on your site, and their messages arrive in the same inbox.

1. Set your Bundle ID and Package name

1. Open App settings > Developers > Domain, apps and pages.
2. In “Domain, apps and pages”, type your app’s “Bundle ID (iOS)” and “Package name (Android)”, for example com.kibomarket.app, then save.
3. With Expo, they are ios.bundleIdentifier and android.package in app.json.

The chat only shows in these two apps: another app that reuses your key shows nothing, and so does a platform with no ID set. In Expo Go it always shows, so you can try it before the app is published.

An App takes one Bundle ID and one Package name. Your app has other builds with their own IDs, such as com.kibomarket.app.staging? Create one App for each, and give each build its App key from your app’s config.

2. Install the packages

Say what your app already has: the commands and code of this documentation add only what is missing.

npx expo install @zean-chat/react-native expo-application @react-native-async-storage/async-storage expo-image-picker

• The chat keeps the conversation on the phone with the storage your app already has, AsyncStorage, MMKV or Expo SQLite: it finds it by itself, with no code. With no storage, the command adds AsyncStorage.
• expo-application (Expo) or react-native-device-info (React Native CLI) reads your app’s Bundle ID and Package name: without it, the chat stays hidden.
• The photo picker, expo-image-picker or react-native-image-picker, is optional: without it, the chat has no photo button. See Photos.
• These modules are native: add them in a new build of your app. Expo Go already has them.

3. Allow access to photos

{  "expo": {    "plugins": [      [        "expo-image-picker",        {          "photosPermission": "Send a photo in the chat."        }      ]    ]  }}

• The plugin is already in app.json: keep its options and add only what is missing.
• Your app never uses the camera? You can add "cameraPermission": false to the plugin, and "microphonePermission": false if it never records sound: the app then asks for no more than the chat needs. Leave them out otherwise: they turn the camera or microphone off for the whole app.
• Your app already has a photo text, in app.json or Info.plist: keep yours. The chat needs none of its own.

4. Add the chat

Render ZeanChat once, at the root of the app, with your App’s key. The chat opens in React Native’s Modal: it works with Expo Router, React Navigation or no navigation.

import { NavigationContainer } from "@react-navigation/native";import { ZeanChat } from "@zean-chat/react-native";export default function App() {  return (    <>      <NavigationContainer>        {/* Your screens */}      </NavigationContainer>      <ZeanChat appKey="app_your_app_key" />    </>  );}

5. Open the chat

The chat has no floating button: call open() from useZean() in one of your buttons, on any screen. unreadCount gives the number of replies the Contact has not read.

import { useZean } from "@zean-chat/react-native";import { Button } from "react-native";export function HelpButton() {  const { open, unreadCount } = useZean();  return <Button title={unreadCount > 0 ? `Help (${unreadCount})` : "Help"} onPress={open} />;}

• On iPhone, the chat opens as a sheet that the Contact swipes down to close.
• On Android and iPad, it opens full screen, closed with the back button or the cross.

Props

<ZeanChat  appKey="app_your_app_key"  locale="fr"  colorScheme="dark"  user={user ? { id: user.id, name: user.name, email: user.email } : undefined}  attributes={{ plan: "pro" }}/>

• appKey: required.
• storage: leave it out, the chat finds your app’s AsyncStorage, MMKV or Expo SQLite. Pass one to choose it.
• locale: "fr" or "en". Without it, the phone’s language. See Language.
• colorScheme: "light" or "dark". Without it, the phone’s theme. See Appearance.
• maxPhotos: photos per message, from 1 to 6. Without it, 4. See Photos and files.
• user and attributes: as on the web. See Identify your Contacts and Attributes.

Every prop and method: @zean-chat/react-native reference.

In App settings > Developers > Getting started, pick “React Native”: the install is ticked as soon as your app connects with its Bundle ID or Package name.

Before production

In App settings > Developers > Getting started, your app is in Development or Production Mode. The Mode only changes the steps shown: same App key, same Inbox, nothing to change in your code. In production, the chat still shows in Expo Go.

• Bundle ID or Package name (required): set the one of at least one OS, iOS or Android, in App settings > Developers > Domain, apps and pages.
• Release build seen (required): run a release build of the app with that ID, not a development build or Expo Go, and open the chat. The first time, the app moves to Production by itself.
• Webhook (optional, if you use one): set your server’s address in App settings > Developers > Webhook, then check a first successful delivery. See Receive events with a webhook.

Next

• Identify signed-in people.
• Send attributes about the Contact.
• Pick the language of the chat.