Conversation list and a message thread with bubbles, timestamps and a composer.
npx shadcn@latest add @lokalhost/chatAlso installs Avatars.
The source is copied to screens/chat-screen.tsx — it’s yours to edit.
import { ChatScreen, type Message } from "@/screens/chat-screen";
return (
<ChatScreen
title="Amelia Hart"
messages={messages}
onBack={() => router.back()}
onSend={(text) => setMessages((m) => [...m, { id: String(Date.now()), text, fromMe: true, time: now() }])}
/>
);| Prop | Type | Default | Description |
|---|---|---|---|
messagesrequired | Message[] | — | { id, text, fromMe, time } newest last. |
titlerequired | string | — | Header name. |
onSendrequired | (text: string) => void | — | Composer submit. |
status | string | "Online" | Line under the name. |
onBack | () => void | undefined | Back button handler. |