Reference

Reference: @zean-chat/react-native

The ZeanChat component and the useZean hook, for Expo and React Native apps.

Updated October 28, 2026

The samples show app_your_app_key. Open this guide from App settings > Developers > Getting started to see your App’s key in them.

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.

Render ZeanChat once, at the root of the app, and open the chat with useZean(). See Install the chat in a React Native app.

Dependencies

react 19 or later, and react-native 0.78 or later.
A storage the app already has: AsyncStorage, MMKV or Expo SQLite. The chat finds it by itself. With none, the conversation is forgotten when the app closes.
Optional: expo-image-picker or react-native-image-picker, to send photos. Without either, the chat has no photo button.
The SDK brings no native module: it works with Expo, React Native CLI and any navigation.

Exports

Name	Type	Description
`ZeanChat`	`(props: ZeanChatProps) => ReactNode`	The chat, in a `Modal` over your screens: a sheet on iPhone, full screen on Android. It opens with `open()`, with no floating button.
`useZean()`	`() => ZeanControls`	Opens and closes the chat, and follows the unread count. Works in any component.
`openFromNotification()`	`(data: unknown) => boolean`	Opens the chat when the tapped notification comes from a Member’s reply, and returns `true`; returns `false` for any other notification. Works before `ZeanChat` renders, when the tap starts the app. See Send push notifications.
`isZeanNotification()`	`(data: unknown) => boolean`	Whether a notification’s data is the `push.data` of a `message.member` event, without opening the chat. Also takes that `push.data` as JSON text, or inside `data`.
`ZeanChatProps`	`interface`	The props of `ZeanChat`.
`ZeanControls`	`interface`	What `useZean()` returns.
`ZeanStorage`	`ZeanKeyValueStorage \| ZeanMMKV`	What `storage` takes, when you choose the storage.
`ZeanKeyValueStorage`	`interface`	A storage with `getItem` and `setItem`: AsyncStorage, Expo SQLite.
`ZeanMMKV`	`interface`	An MMKV instance, passed as it is.
`ZeanColorScheme`	`'light' \| 'dark'`	One of the chat’s themes.
`ZeanUser`	`interface`	The signed-in person, below.
`ZeanAttributes`	`Record<string, ZeanAttributeValue>`	The Contact’s attributes: `{ city: "Douala", orders: 12 }`.
`ZeanAttributeValue`	`string \| number \| boolean`	One attribute’s value.
`ZeanLocale`	`'fr' \| 'en'`	One of the chat’s languages.

ZeanChat props

Name	Type	Description
`appKey`	`string`	Required. The App’s public key, in App settings > Developers > Getting started.
`storage`	`ZeanStorage`	Optional. Where the chat keeps the device’s link to the conversation, the messages not sent yet and the newest 100 messages, shown as soon as it opens. Leave it out: the chat finds your app’s MMKV, AsyncStorage or Expo SQLite. Read once, at start.
`user`	`ZeanUser`	Optional. While a person is signed in: `{ id, name, email }`. Leave it out when nobody is: a person who was signed in is signed out. Left out while your app is still loading the user, it signs no one out. The same values on each render change nothing. See Identify your Contacts.
`attributes`	`ZeanAttributes`	Optional. What you know about the person, shown on the Contact’s profile. Sent again on each change. See Custom attributes.
`locale`	`'fr' \| 'en'`	Optional. The chat’s language. Without it: the phone’s, when the chat speaks it, else the App’s default language.
`colorScheme`	`ZeanColorScheme`	Optional. The theme, `light` or `dark`. Without it: the phone’s.
`maxPhotos`	`number`	Optional. Photos the person sends in one message, from 1 to 6. Without it: 4.

JSX

import { ZeanChat } from "@zean-chat/react-native";export default function App() {  return (    <>      {/* Your screens */}      <ZeanChat        appKey="app_your_app_key"        locale="en"        colorScheme="light"        user={user ? { id: user.id, name: user.name, email: user.email } : undefined}      />    </>  );}

useZean()

Name	Type	Description
`open()`	`() => void`	Opens the chat.
`close()`	`() => void`	Closes the chat.
`toggle()`	`() => void`	Opens the chat when closed, closes it otherwise.
`identify()`	`(user: ZeanUser) => void`	The person signed in. The first device to bring their ID joins their Conversation at once; another one first asks them for a code sent by email. See Identify your Contacts.
`signOut()`	`() => void`	The person signed out: the chat starts over, anonymous.
`setAttributes()`	`(attributes: ZeanAttributes) => void`	Joined to the attributes sent before. Refused values are reported in the console. See Custom attributes.
`setPushToken()`	`(token: string \| null) => void`	Gives Zean the device’s push token: Expo, FCM or APNs. `null` forgets it. Given again by itself after a sign-out. Your server gets it in `push.tokens` of each `message.member` event. See Send push notifications.
`unreadCount`	`number`	The number of replies the Contact has not read, updated on every change.

ZeanUser

Name	Type	Description
`id`	`string \| number`	Required. Your own ID for the person, as text or a number, 200 characters at most. The same ID on your website and in your mobile app is one person.
`name`	`string`	Optional. Their name, on their Contact profile.
`email`	`string`	Optional. The code that adds another device goes to this address: without it, a second device can never join the Contact.
`phone`	`string`	Optional. Their phone, on their Contact profile.
`language`	`string`	Optional. Their language, any one, as a tag such as `pt` or `pt-BR`. Without it, their device’s is kept. It does not change the chat’s language.

ZeanKeyValueStorage

Name	Type	Description
`getItem()`	`(key: string) => string \| null \| Promise<string \| null>`	Reads a value, or `null` when there is none.
`setItem()`	`(key: string, value: string) => void \| Promise<void>`	Writes a value.

ZeanMMKV

Name	Type	Description
`getString()`	`(key: string) => string \| undefined`	Reads a value, or nothing when there is none.
`set()`	`(key: string, value: string) => void`	Writes a value.

You rarely need storage: the chat finds your app’s MMKV, AsyncStorage or Expo SQLite. To choose one, pass it as it is: AsyncStorage, Storage from expo-sqlite/kv-store or an MMKV instance, any version. Any other object with getItem and setItem works too.