@yappr/expo

Realtime chat for Expo and React Native apps. One import.

Install

npx expo install @yappr/expo @react-native-async-storage/async-storage

Use

import { createExpoClient, YapprProvider, useChannel } from "@yappr/expo";
import { Button, FlatList, Text } from "react-native";

const client = createExpoClient({
  tenantId: "your-tenant",
  key: "pk_live_...",
  userId: "user-123",
  getToken: () => fetchFreshChatToken(), // your authenticated backend
});

function Chat() {
  const { messages, status, send } = useChannel("general");
  return (
    <>
      <Text>{status}</Text>
      <FlatList
        data={messages}
        keyExtractor={(m) => m.id}
        renderItem={({ item }) => <Text>{item.content}</Text>}
      />
      <Button title="Say hi" onPress={() => send("hi")} />
    </>
  );
}

export default function App() {
  return (
    <YapprProvider client={client}>
      <Chat />
    </YapprProvider>
  );
}

GIF search (client.gifs), reactions (useChannel().react / unreact) and feature toggles (useChannel().features) work the same as on the web. See Rich messaging in @yappr/react. For GIFs in React Native, render payload.mp4 with a video component when it is present; it is far smaller than the GIF.

createExpoClient supplies React Native defaults for storage, id generation, and foreground reconnection. Every field of YapprClientConfig stays overridable — pass your own storage to use MMKV or expo-sqlite/kv-store instead of AsyncStorage.

Create the client once, at module scope or in a useState initializer — never inline in render. See @yappr/react for why.

Push notifications

Yappr now exposes a signed message.created backend webhook with durable retries. Your backend resolves conversation members and uses its existing Expo/FCM/APNs integration to deliver notifications. Yappr does not collect device tokens or send push itself. See the production runbook for the event contract, deduplication and offline/read-state rules.