Référence

Référence : @zean-chat/react-native

Le composant ZeanChat et le hook useZean, pour les apps Expo et React Native.

Mis à jour le 28 octobre 2026

Les exemples affichent app_your_app_key. Ouvrez ce guide depuis Paramètres de l’App > Développeurs > Démarrage pour y voir la clé de votre App.

Lorsque les Réponses IA sont activées pour l’App, le chat identifie les réponses de l’IA et propose « Parler à un membre ». Aucun paramètre SDK ni secret IA supplémentaire n’est nécessaire. Les clés du fournisseur restent sur le serveur.

Affichez ZeanChat une seule fois, à la racine de l’app, et ouvrez le chat avec useZean(). Voir Installer le chat dans une app React Native.

Dépendances

react 19 ou plus, et react-native 0.78 ou plus.
Un stockage déjà dans l’application : AsyncStorage, MMKV ou Expo SQLite. Le chat le trouve seul. Sans stockage, la conversation est oubliée à la fermeture de l’application.
Facultatif : expo-image-picker ou react-native-image-picker, pour envoyer des photos. Sans l’un des deux, le chat n’a pas de bouton photo.
Le SDK n’apporte aucun module natif : il marche avec Expo, React Native CLI et n’importe quelle navigation.

Exports

Nom	Type	Description
`ZeanChat`	`(props: ZeanChatProps) => ReactNode`	Le chat, dans un `Modal` au-dessus de vos écrans : en feuille sur iPhone, en plein écran sur Android. Il s’ouvre avec `open()`, sans bouton flottant.
`useZean()`	`() => ZeanControls`	Ouvre et ferme le chat, et suit le nombre de réponses non lues. Marche dans n’importe quel composant.
`openFromNotification()`	`(data: unknown) => boolean`	Ouvre le chat quand la notification touchée vient d’une réponse d’un membre, et renvoie `true` ; renvoie `false` pour toute autre notification. Marche avant que `ZeanChat` soit affiché, quand le toucher lance l’app. Voir Envoyer des notifications push.
`isZeanNotification()`	`(data: unknown) => boolean`	Si les données d’une notification sont le `push.data` d’un événement `message.member`, sans ouvrir le chat. Accepte aussi ce `push.data` en texte JSON, ou dans `data`.
`ZeanChatProps`	`interface`	Les props de `ZeanChat`.
`ZeanControls`	`interface`	Ce que renvoie `useZean()`.
`ZeanStorage`	`ZeanKeyValueStorage \| ZeanMMKV`	Ce que `storage` accepte, quand vous choisissez le stockage.
`ZeanKeyValueStorage`	`interface`	Un stockage avec `getItem` et `setItem` : AsyncStorage, Expo SQLite.
`ZeanMMKV`	`interface`	Une instance MMKV, passée telle quelle.
`ZeanColorScheme`	`'light' \| 'dark'`	Un thème du chat.
`ZeanUser`	`interface`	La personne connectée, plus bas.
`ZeanAttributes`	`Record<string, ZeanAttributeValue>`	Les attributs du Contact : `{ city: "Douala", orders: 12 }`.
`ZeanAttributeValue`	`string \| number \| boolean`	La valeur d’un attribut.
`ZeanLocale`	`'fr' \| 'en'`	Une langue du chat.

Props de ZeanChat

Nom	Type	Description
`appKey`	`string`	Obligatoire. La clé publique de l’App, dans Paramètres de l’App > Développeurs > Démarrage.
`storage`	`ZeanStorage`	Facultatif. Là où le chat garde le lien de l’appareil avec la conversation, les messages pas encore envoyés et les 100 derniers messages, montrés dès l’ouverture. Sans lui : le MMKV, l’AsyncStorage ou l’Expo SQLite de votre application, trouvé par le chat. Lu une fois, au démarrage.
`user`	`ZeanUser`	Facultatif. Tant qu’une personne est connectée : `{ id, name, email }`. Laissez-le de côté quand personne ne l’est : une personne qui était connectée est déconnectée. Laissé de côté pendant que votre application charge encore la personne, il ne déconnecte personne. Les mêmes valeurs à chaque rendu ne changent rien. Voir Identifier vos Contacts.
`attributes`	`ZeanAttributes`	Facultatif. Ce que vous savez de la personne, montré sur la fiche du Contact. Envoyé de nouveau à chaque changement. Voir Attributs personnalisés.
`locale`	`'fr' \| 'en'`	Facultatif. La langue du chat. Sans elle : celle du téléphone si le chat la parle, sinon la langue par défaut de l’App.
`colorScheme`	`ZeanColorScheme`	Facultatif. Le thème, `light` ou `dark`. Sans lui : celui du téléphone.
`maxPhotos`	`number`	Facultatif. Les photos que la personne envoie dans un message, de 1 à 6. Sans lui : 4.

JSX

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

useZean()

Nom	Type	Description
`open()`	`() => void`	Ouvre le chat.
`close()`	`() => void`	Ferme le chat.
`toggle()`	`() => void`	Ouvre le chat s’il est fermé, le ferme sinon.
`identify()`	`(user: ZeanUser) => void`	La personne s’est connectée. Le premier appareil qui donne son ID rejoint sa Conversation tout de suite ; un autre lui demande d’abord un code envoyé par email. Voir Identifier vos Contacts.
`signOut()`	`() => void`	La personne s’est déconnectée : le chat repart de zéro, anonyme.
`setAttributes()`	`(attributes: ZeanAttributes) => void`	Ajoute ces attributs à ceux déjà envoyés. Les valeurs refusées sont signalées dans la console. Voir Attributs personnalisés.
`setPushToken()`	`(token: string \| null) => void`	Donne à Zean le jeton push de l’appareil : Expo, FCM ou APNs. `null` l’oublie. Redonné seul après une déconnexion. Votre serveur le reçoit dans `push.tokens` de chaque événement `message.member`. Voir Envoyer des notifications push.
`unreadCount`	`number`	Le nombre de réponses que le Contact n’a pas lues, mis à jour à chaque changement.

ZeanUser

Nom	Type	Description
`id`	`string \| number`	Obligatoire. Votre propre ID pour la personne, en texte ou en nombre, 200 caractères au plus. Le même ID sur votre site et dans votre application mobile donne une seule personne.
`name`	`string`	Facultatif. Son nom, sur sa fiche Contact.
`email`	`string`	Facultatif. Le code qui ajoute un autre appareil part à cette adresse : sans elle, un deuxième appareil ne peut jamais rejoindre le Contact.
`phone`	`string`	Facultatif. Son téléphone, sur sa fiche Contact.
`language`	`string`	Facultatif. Sa langue, n’importe laquelle, en code comme `pt` ou `pt-BR`. Sans elle, celle de son appareil est gardée. Elle ne change pas la langue du chat.

ZeanKeyValueStorage

Nom	Type	Description
`getItem()`	`(key: string) => string \| null \| Promise<string \| null>`	Lit une valeur, ou `null` quand il n’y en a pas.
`setItem()`	`(key: string, value: string) => void \| Promise<void>`	Écrit une valeur.

ZeanMMKV

Nom	Type	Description
`getString()`	`(key: string) => string \| undefined`	Lit une valeur, rien quand il n’y en a pas.
`set()`	`(key: string, value: string) => void`	Écrit une valeur.

storage sert rarement : le chat trouve le MMKV, l’AsyncStorage ou l’Expo SQLite de votre application. Pour en choisir un, passez-le tel quel : AsyncStorage, Storage d’expo-sqlite/kv-store ou une instance MMKV, toute version. Tout autre objet avec getItem et setItem convient aussi.