Chat bubble

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/chat-bubble.json

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

Usage

import { useState } from "react";
import { View } from "react-native";
import { ChatBubble, Composer, TypingIndicator } from "@/components/goodui-native/chat-bubble/chat-bubble";

export function Thread({ messages, typing, onSend }) {
  const [draft, setDraft] = useState("");
  return (
    <View style={{ gap: 2, padding: 16 }}>
      {messages.map((m, i) => (
        <ChatBubble
          key={m.id}
          side={m.mine ? "sent" : "received"}
          position={m.position}
          time={m.time}
          status={m.mine ? m.status : undefined}
          animateIn={m.isNew}
          onRetry={() => resend(m.id)}
        >
          {m.text}
        </ChatBubble>
      ))}
      <TypingIndicator visible={typing} name="Maya" />
      <Composer value={draft} onChangeText={setDraft} onSend={onSend} onMicPress={startRecording} />
    </View>
  );
}

When to use

Examples

function positionOf(list: Msg[], i: number): ChatPosition {
  const same = (a?: Msg, b?: Msg) => !!a && !!b && a.side === b.side && a.sender === b.sender;
  const prev = same(list[i - 1], list[i]);
  const next = same(list[i + 1], list[i]);
  return prev && next ? "middle" : prev ? "last" : next ? "first" : "single";
}

<ChatBubble
  side="received"
  reaction={m.reaction}
  reactionCount={m.reactionCount}
  onReactionChange={(key) => react(m.id, key)}
>
  {m.text}
</ChatBubble>

<ChatBubble sender="Aiko" position="first" time="07:58">Who is in for Saturday?</ChatBubble>

API reference

Motion and haptics

• •animateIn: a sent bubble springs up 24 pt from 0.6 scale out of its bottom trailing corner on the bouncy spring; a received one comes in from the leading edge.
• •Receipt: the first check draws itself in when sent, the second when delivered; when read both brighten and pop once. Statuses a bubble already had when it mounted render settled.
• •TypingIndicator grows out of its tail on the bouncy spring and shrinks back before unmounting; its three dots rise and brighten in a staggered wave every 1.2 s.
• •Composer: the accent fill grows out of the button's center while the mic rotates away and the arrow rotates in (morph spring); sending launches the arrow up 22 pt as it fades. The field grows line by line on the snappy spring.
• •Reduced motion: bubbles and the typing bubble fade in, checks appear without drawing, there is no read pop, the typing dots only pulse their opacity, the composer button crossfades and the field resizes instantly.

• •Haptic: send on send, tap on the mic and on retry (Composer haptic={false} turns its haptics off)

• •Every animation runs on the UI thread. The typing wave is one repeating shared value read by three dots.
• •The composer measures its text with a hidden mirror only when the text changes, and resizes with a spring instead of per-frame state.
• •Bubbles are plain views: render long threads in a FlatList (inverted for chat) and pass animateIn only to new messages.

Accessibility

• •On iOS and Android each bubble is one element read as 'You: text, 9:41, read' or 'Maya: text, 9:41'. On the web the text names it, with 'You:' and the status as visually hidden text.
• •A failed message shows 'Not delivered, tap to retry' as a real button under the bubble.
• •TypingIndicator is a polite live region: 'Maya is typing' (role status with visually hidden text on the web).
• •Composer: the field is labelled by its placeholder (or accessibilityLabel); the button's label follows its state ('Record voice message' or 'Send') and it reports disabled when there is nothing to send. On the web Enter sends and Shift+Enter adds a line.
• •With reactions, the bubble carries the reaction picker's actions ('React with Love') and its label adds 'you reacted with Love' (visually hidden text after the message on the web).
• •Message text uses the 17 pt body size and scales with the system text size; the bubble grows with it.

Notes for AI

Related