Add live chat to a React Native app: SDK guide

A customer who gets stuck in your app should be one tap from help. The Frosvo component for React Native shows the same chat as your website, with an unread count and push notifications for replies. It works on iOS and Android, in Expo or bare projects, and conversations arrive in your shared inbox.

What do I need before I start?

• A React Native or Expo app.
• A Frosvo account with the website that stands for your app added under Settings → Websites, and its website key copied.
• For push notifications: a Firebase service account and/or an Apple Push key.

How do I add the package?

1. Download the React Native SDK from Settings → Mobile apps, or from /downloads/frosvo-react-native.zip, and unzip it into your project, for example packages/frosvo.
2. Install it with its one peer dependency:

``sh npm install ./packages/frosvo react-native-webview # Expo: npx expo install react-native-webview ``

How do I show the chat?

```tsx import { Modal } from "react-native"; import { FrosvoChat } from "@frosvo/react-native";

<Modal visible={open} animationType="slide" onRequestClose={() => setOpen(false)}> <FrosvoChat websiteKey="your-website-key" user={{ name: "Pat Lee", email: "pat@example.com", hash }} // optional; hash = identity verification push={pushToken ? { platform: "fcm", token: pushToken } : undefined} conversationId={fromNotification} // optional onClose={() => setOpen(false)} onUnread={(n) => setBadge(n)} /> </Modal> ```

The user and hash are optional. The hash proves who the user is: see show signed-in customers by name for how your server makes it. The person is remembered between launches. To use another Frosvo server, pass baseUrl.

How do I add push notifications?

1. In Frosvo, open Settings → Mobile apps and add a Firebase service account (FCM) and/or an Apple Push key.
2. Get the device token with your push library (for example @react-native-firebase/messaging, or expo-notifications with getDevicePushTokenAsync()) and pass it as the push prop. Use platform: "fcm" for Firebase tokens (Android, or iOS with Firebase) and platform: "apns" for a raw Apple token.
3. When a notification is tapped, check isFrosvoNotification(data) and open the chat with conversationId={data.conversation_id}.

Replies are pushed only when the person has not already read them on screen.

How do I sign someone out?

Give the component a ref and call reset() when someone signs out of your app. The open chat forgets the person and this phone's notifications for them, and the next person starts fresh:

```tsx import { useRef } from "react"; import { FrosvoChat, type FrosvoChatHandle } from "@frosvo/react-native";

const chat = useRef<FrosvoChatHandle>(null); // <FrosvoChat ref={chat} websiteKey="your-website-key" /> chat.current?.reset(); ```

The same handle has setUser, setPushToken and openConversation. If no chat is open when someone signs out, call releasePush so the phone stops receiving the previous person's notifications.

How do I test it?

1. Run the app, open the modal from your Help button and send a message.
2. Open the Frosvo desk: the message is in the shared inbox, labelled with your website.
3. Reply from the desk. With the app in the background, a push notification should reach the phone; tap it and check the right conversation opens.
4. Sign out of your app, call reset() and check the next person starts a fresh conversation.

What if it does not work?

• The chat opens blank. Check the website key, the phone's connection, and that react-native-webview is installed.
• No push notification arrives. Check the credentials are saved for this website and the token reached the push prop.
• The wrong person's history shows. Call reset() on the chat's ref when someone signs out of your app (see below).

For the overview of all four SDKs and push, see chat in your mobile apps. If you build your own screens, the developer hub has the REST API and real-time events. For other problems, try troubleshooting. The same chat is available for Android, iOS and Flutter.