Chat Bubble

A chat message bubble. It springs in from its own corner, shows delivery ticks that move from sending to sent, delivered and read, and a failed message turns red and becomes a retry button. A run of messages from one sender can share a single tail. The sender, text, time and delivery state are read out as one sentence. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add chat-bubble

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/chat-bubble.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { ChatBubble } from "@/components/ui/chat-bubble";

export default function Example() {
  return (
    <>
      <ChatBubble side="them" name="Maya" text="Are we still on for Thursday?" time="9:38" />
      <ChatBubble side="me" text="Yes! Same place as last time." time="9:39" status="read" />
    </>
  );
}

Props