# Add live chat to a React Native app: SDK guide

Source: https://frosvo.com/docs/add-chat-to-react-native-app
Updated: 2026-10-25

Add the Frosvo chat component to a React Native or Expo app for iOS and Android. Pass your website key, show it in a modal, and open conversations from push notifications.

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`](/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](/docs/identify-signed-in-customers) 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](/docs/mobile-apps). If you build your own screens, the [developer hub](/developers) has the REST API and real-time events. For other problems, try [troubleshooting](/docs/troubleshooting). The same chat is available for [Android](/docs/add-chat-to-android-app), [iOS](/docs/add-chat-to-ios-app) and [Flutter](/docs/add-chat-to-flutter-app).

## Common questions

### Does the React Native SDK work with Expo?

Yes. It works in Expo and in bare React Native projects, on iOS and Android. Its one peer dependency is react-native-webview; in Expo install it with npx expo install react-native-webview.

### How do I show the chat?

Render the FrosvoChat component with your website key, usually inside a Modal that opens from a Help button.

### How do push notifications work?

Add a Firebase service account and or an Apple Push key under Settings, Mobile apps, get the device token with your push library and pass it to the component as the push prop.

### Is the visitor remembered between launches?

Yes. The person is remembered between launches, so a returning customer finds their earlier conversation. Reset it when someone signs out of your app.