InstantMessageComposer

SMS and WhatsApp composer with a channel switcher, phone recipient chips, SMS segment counter, emoji and WhatsApp attachments.

Edit on GitHubEditllms.txt

iOSAndroidExpo Go

Preview InstantMessageComposer on your device

Scan with Expo Go

iOS Android

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-instant-message-composer

Required Packages(1 package)

pnpm add @emoji-mart/data

Channel switcher. A segmented control for availableChannels. It is locked when onChannelChange is omitted.
Recipients. Phone chips (phone-pad keyboard). A ,, ;, newline or return commits a number, and invalid numbers show as red chips.
Body. A plain multiline input. SMS defaults to a 1,600 character limit and shows {length} chars · {parts} SMS (160 characters for a single message, 153 per concatenated part). WhatsApp has no limit and shows a formatting tip.
Emoji. Opens the EmojiPicker sheet and inserts at the caret.
Attachments. Only shown for WhatsApp.

Send is enabled once every recipient is valid and there is a body or an attachment.

Usage

import { InstantMessageComposer } from '@/components/docyrus-native/instant-message-composer';

<InstantMessageComposer
  channel={channel}
  onChannelChange={setChannel}
  recipients={recipients}
  onRecipientsChange={setRecipients}
  body={body}
  onBodyChange={setBody}
  onSend={send} />

Wire it to Docyrus with useDocyrusInstantMessageComposer, or use InstantMessageComposeDialog.

API Reference

Prop	Type	Default	Description
`ref`	`Ref<InstantMessageComposerHandle>`	-	focus / blur / insertText
`variant`	`'default' \| 'outline' \| 'minimal'`	`'default'`	Visual style
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size
`channel`	`'sms' \| 'whatsapp'`	-	Active channel (required)
`onChannelChange`	`(channel: InstantMessageChannel) => void`	-	Channel switch callback — omit to lock the channel
`availableChannels`	`ReadonlyArray<InstantMessageChannel>`	`['sms', 'whatsapp']`	Channels in the switcher
`recipients`	`string[]`	-	Recipient phone numbers (required)
`onRecipientsChange`	`(recipients: string[]) => void`	-	Recipients change callback (required)
`body`	`string`	-	Message body (required)
`onBodyChange`	`(body: string) => void`	-	Body change callback (required)
`onSend`	`() => void`	-	Send handler
`onAttach`	`() => void`	-	Attach handler (WhatsApp)
`onDiscard`	`() => void`	-	Discard handler (shows Cancel)
`sending`	`boolean`	`false`	Sending state
`disabled`	`boolean`	`false`	Disables all interactions
`attachments`	`InstantMessageAttachment[]`	-	Attachments to display (WhatsApp)
`onRemoveAttachment`	`(index: number) => void`	-	Remove-attachment handler
`maxLength`	`number \| null`	`by channel`	Body limit — 1600 for SMS, unlimited for WhatsApp; null disables
`helper`	`ReactNode`	-	Helper row above the body
`className`	`string`	-	Container classes

Ref (`InstantMessageComposerHandle`)

Method	Description
`focus()` / `blur()`	Body focus
`insertText(text)`	Insert at the caret

Helpers

Export	Description
`smsParts(length)`	SMS segment count
`isValidPhone(value)`	Recipient chip validation (6–18 digits, optional `+`)

Type Exports

Type	Description
`InstantMessageComposerProps`	Props
`InstantMessageComposerHandle`	Ref handle
`InstantMessageChannel`	`'sms' \| 'whatsapp'`
`InstantMessageAttachment`	`{ name, size }`
`InstantMessageComposerVariant` / `InstantMessageComposerSize`	Variant / size unions

Differences from web

ref is a handle instead of the root element; className replaces the div attributes.