Displays a message in a conversation, with optional avatar, header, footer, and alignment.
Hey! Did you get a chance to look at the new designs?
No rush, whenever you have time.
Yes, they look great. Shipping them today.
A ghost bubble has no background or padding, for longer answers that read like a document.
Installation
Every component ships in @astrawind/ui. If you haven't set it up, follow the installation guide, then import the component:
npx expo install @astrawind/ui @astrawind/css lucide-react-native react-native-svg
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@astrawind/ui/avatar"
import { Bubble, BubbleContent } from "@astrawind/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "@astrawind/ui/message"
See the Code tab above for a complete example.