Bubble

Bubble renders chat message bubbles styled for messaging interfaces.

Usage

ChatExample.tsx

import { BubbleGroup, Bubble, BubbleContent } from '@masumdev/rn-ui';

export function ChatExample() {
  return (
    <BubbleGroup>
      <Bubble align="left">
        <BubbleContent>Hello! How can I help you today?</BubbleContent>
      </Bubble>
      <Bubble align="right" variant="filled">
        <BubbleContent>I'd like to check the RN UI docs.</BubbleContent>
      </Bubble>
    </BubbleGroup>
  );
}

Props API

Prop	Type	Default	Description
children	ReactNode	—	Bubble message content.
align	'left' | 'right'	'left'	Alignment for incoming vs outgoing messages.
variant	'filled' | 'soft' | 'outline'	'soft'	Visual style variant.