Usage and data structure

🚀 Usage

Basic Example

See Quick start above for the minimal setup. More examples - Slack-style messages, quick replies, custom components - live in the example directory.

---

📊 Data Structure

Messages, system messages, and quick replies follow the structure defined in Models.ts.

Message object structure

interface IMessage {
  _id: string | number
  text: string
  createdAt: Date | number
  user: User
  image?: string
  /** Tiny stand-in drawn blurred under `image` until it loads: a small image uri, or a blurhash with expo-image */
  imagePlaceholder?: string
  video?: string
  /** Render `video` as a round video note */
  videoNote?: boolean
  audio?: string
  /** Length of `audio` / `video` in seconds */
  duration?: number
  /** The voice or round note has not been played by its recipient yet (unread dot) */
  isMediaUnread?: boolean
  /** View-once voice or round note: plays a single time, then `mediaPlayback.onViewOnceEnd` fires */
  isViewOnce?: boolean
  /** Transcribed text of a voice or round note, shown under it via the transcribe button */
  transcription?: string
  system?: boolean
  sent?: boolean
  received?: boolean
  pending?: boolean
  /** Sending failed: a red badge replaces the checks */
  isFailed?: boolean
  /** The message was edited: its time reads "edited 14:05" */
  isEdited?: boolean
  editedAt?: Date | number
  /** True while the text is still streaming in (shows a typing cursor) */
  streaming?: boolean
  /** Media uploading or downloading: a progress ring with a cancel ✕ ({ type: 'upload' | 'download', progress?, totalBytes? }) */
  transfer?: MediaTransfer
  /** Media not fetched by itself: a download arrow, which calls `mediaTransfer.onDownload` */
  isDownloadRequired?: boolean
  /** A voice note's waveform from the server (0..1, or 0..31 integers), drawn before the audio downloads */
  waveform?: number[]
  quickReplies?: QuickReplies
  replyMessage?: ReplyMessage
  reactions?: MessageReaction[]
  location?: {
    latitude: number
    longitude: number
  }
  /** A document: a file bubble (icon, name, size); a tap opens it */
  file?: {
    uri: string
    name: string
    size?: number
    mimeType?: string
  }
  /** A web page preview under the text (or fetched via `fetchLinkPreview`); `null` hides it */
  linkPreview?: {
    url?: string
    siteName?: string
    title?: string
    description?: string
    image?: string
    imageWidth?: number
    imageHeight?: number
    imageSize?: 'large' | 'small'
  } | null
}

interface ReplyMessage {
  _id: string | number
  text: string
  user: User
  image?: string
  audio?: string
}

interface MessageReaction {
  emoji: string
  userIds: (string | number)[]
}

interface User {
  _id: string | number
  name?: string
  avatar?: string | number | (() => React.ReactNode)
}

---