Chat screen

Installation

$ npx shadcn@latest add @goodui-native-pro/chat-screen

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/chat-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider.

Usage

// app/chat/[id].tsx
import { useState } from "react";
import { Stack, router, useLocalSearchParams } from "expo-router";
import { ChatScreen, type ChatMessage } from "@/components/goodui-native/chat-screen/chat-screen";
import { api, useThread } from "@/lib/chat";

export default function ChatRoute() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { contact, messages, typing } = useThread(id); // your realtime source, oldest first
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <ChatScreen
        contact={contact}
        messages={messages}
        typing={typing}
        onSend={(text) => api.send(id, text)} // append it to messages with status "sending", then move it forward
        onRetry={(m) => api.resend(id, m.id)}
        onReactionChange={(messageId, reaction) => api.react(id, messageId, reaction)}
        onBack={() => router.back()}
        onCall={() => router.push(`/call/${id}`)}
        onContactPress={() => router.push(`/profile/${contact.id}`)}
      />
    </>
  );
}

When to use

Examples

<ChatScreen
  contact={{ name: "Leo Martins", online: true }}
  defaultMessages={history}
  onSend={(text) => api.send(text)} // pending: clock; resolved: sent, then delivered; rejected: retry row
  onBack={() => router.back()}
/>

<ChatScreen />

API reference

Motion and haptics

• •A sent message springs up out of the composer; incoming messages arrive from the leading edge. History on screen at mount never animates.
• •Receipts tick forward in the bubble: a clock while sending, one check drawing in once sent, a second for delivered, both brightening when read.
• •The thread follows new messages with an animated scroll only when you are already near the bottom, so reading history is never interrupted.
• •The composer rides the keyboard with the keyboard's own duration (native); the web page resizes itself.
• •Reduced motion: bubbles fade in place, the thread jumps to the newest message instead of scrolling.

• •Haptic: tap on send, on the mic and on retry (Composer, ChatBubble)
• •Haptic: tap when the reaction pill opens, select for each emoji the finger slides onto and on the pick (ReactionPicker)
• •Haptic: tap on the back, call, video and attach buttons

• •Bubbles, receipts and the keyboard offset animate on the UI thread; React renders when messages, the draft or typing change.
• •The thread is a ScrollView: comfortable up to a few hundred messages; page history beyond that.

Accessibility

• •Day labels are headers; each bubble is one element read as 'You: text, 9:41, read' or 'Message: text, 9:41' for received ones, adding 'you reacted with Love' when you reacted.
• •Reactions are also in each bubble's screen reader actions ('React with Love'), so nobody has to long-press. A failed message has a real 'Not delivered, tap to retry' button.
• •The header names the contact with their presence ('Maya Patel, Online' or 'Typing…'); with onContactPress it is a button.
• •Back, call, video and attach are icon buttons with labels; the typing dots announce '<name> is typing'.
• •On the web the thread is a log region named 'Conversation with <name>'.

Notes for AI

Related