Before you start
- An Expo or React Native app that can install npm packages
- Use
https://usechatting.comasbaseURL - Use your site/workspace ID inside Chatting as
siteId - Async storage for session persistence
- A physical device if you want to test Expo push notifications
That is the full default setup: baseURL is always https://usechatting.com, and siteId is your site/workspace ID inside Chatting.
Install the package
- Install
@usechatting/react-nativein your app - Install async storage so conversations stay available after app restarts
- Install Expo Notifications if you want push delivery
npm install @usechatting/react-native @react-native-async-storage/async-storage
npx expo install expo-notificationsIf you are using plain React Native instead of Expo, you can still use the same chat package. The Expo Notifications step is only for Expo push notifications.
Create the client
Create one ChattingClient with your Chatting URL, site ID, and session store.
import AsyncStorage from "@react-native-async-storage/async-storage";
import { ChattingClient, createKeyValueSessionStore } from "@usechatting/react-native";
const client = new ChattingClient({
baseURL: "https://usechatting.com",
siteId: "your-site-id",
sessionStore: createKeyValueSessionStore(AsyncStorage, "your-site-id")
});Add the support screen
Mount ChattingConversationScreen in your support screen or support tab.
import { useMemo } from "react";
import { ChattingConversationScreen } from "@usechatting/react-native";
export function SupportScreen() {
const context = useMemo(() => ({ pageUrl: "myapp://support" }), []);
return (
<ChattingConversationScreen
client={client}
context={context}
draftVisitorEmail="customer@example.com"
/>
);
}This gives you an in-app support screen with saved conversations and live message updates while the app is open.
Register Expo push notifications
Register an Expo push token if your app should notify users after the app is backgrounded. Refresh the chat when the app becomes active again.
import { useEffect, useState } from "react";
import * as Notifications from "expo-notifications";
import { AppState, Platform } from "react-native";
import type { ChattingClient } from "@usechatting/react-native";
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: false,
shouldPlaySound: false,
shouldSetBadge: false
})
});
export function useChattingPush(client: ChattingClient) {
const [refreshKey, setRefreshKey] = useState(0);
useEffect(() => {
let mounted = true;
const refreshChat = async () => {
await client.syncPushToken();
if (mounted) {
setRefreshKey((current) => current + 1);
}
};
const registerPush = async () => {
const permission = await Notifications.requestPermissionsAsync();
if (!mounted || permission.status !== "granted") {
return;
}
const token = await Notifications.getExpoPushTokenAsync({
projectId: "your-expo-project-id"
});
await client.registerPushToken({
pushToken: token.data,
platform: Platform.OS
});
};
void registerPush();
const appStateSubscription = AppState.addEventListener("change", (nextState) => {
if (nextState === "active") {
void refreshChat();
}
});
const responseSubscription = Notifications.addNotificationResponseReceivedListener(() => {
void refreshChat();
});
return () => {
mounted = false;
appStateSubscription.remove();
responseSubscription.remove();
};
}, [client]);
return refreshKey;
}
// Then pass the returned key into your chat screen:
const refreshKey = useChattingPush(client);
<ChattingConversationScreen key={refreshKey} client={client} />Expo documents that push notifications need a physical device for testing, and expo-notifications must be installed before you request a token.
Identify signed-in users
If your app already knows the customer, identify them before or right after the support screen mounts. If not, you can pass a draft email only.
await client.identify({
email: "customer@example.com",
name: "Taylor"
});
<ChattingConversationScreen
client={client}
draftVisitorEmail="customer@example.com"
/>Use identify(...) for signed-in users. Use draftVisitorEmail if you only need an email address for follow-up.
Check the installation
- Open the support screen in your app
- Send a test message from the device
- Reply from the Chatting inbox and confirm the reply appears in the app
- Background the app and send another reply from the inbox
- Tap the push notification and confirm the conversation refreshes
FAQ
Does this work in Expo?
Yes. The published package works in Expo and the setup above uses the package exactly as published.
Does this work in React Native too?
Yes. The core package works in React Native as well. Expo Notifications is only needed if you want the Expo push flow.
What should I use for baseURL?
Use https://usechatting.com.
Ready to add Chatting to Expo?
Install the package, add your site ID, and launch one support screen in your app first.
Open Chatting