EmailComposeDialog

Bottom-sheet launcher for the EmailComposer, wired to the Docyrus messaging API through useDocyrusEmailComposer.

iOSAndroidExpo Go

Preview EmailComposeDialog on your device

Scan with Expo Go

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

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-email-compose-dialog

Required Packages(2 packages)

pnpm add @tanstack/react-query @docyrus/api-client

The dialog opens a full-height bottom AwesomeDialog sheet with the EmailComposer. The inner form mounts only while the sheet is open, so useDocyrusEmailComposer seeds fresh from to / cc / bcc / subject / body, and the accounts (GET /v1/messaging/email/accounts) and mention users (GET /v1/users) are only fetched while it is visible. A successful send shows a toast (mount a <Toaster />), calls onSent and closes the sheet.

Sending needs the Messaging.Email.Send scope. A QueryClientProvider must be mounted above it.

Email value renderers and form fields open this dialog automatically when you pass them a client (and no onComposeEmail).

Usage

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { EmailComposeDialog } from '@/components/docyrus-native/email-compose-dialog';

const client = useDocyrusClient();

// Default trigger: a mail icon button
<EmailComposeDialog client={client} to={['alice@acme.com']} subject="Quick question" />

// Controlled, no trigger
<EmailComposeDialog client={client} trigger={null} open={open} onOpenChange={setOpen} onSent={r => console.log(r.accepted)} />

API Reference

Prop	Type	Default	Description
`client`	`RestApiClient`	-	Authenticated Docyrus REST client (required)
`to`	`string[]`	-	Pre-filled To
`cc`	`string[]`	-	Pre-filled Cc
`bcc`	`string[]`	-	Pre-filled Bcc
`subject`	`string`	-	Pre-filled subject
`body`	`string`	-	Pre-filled HTML body
`trigger`	`ReactNode \| null`	-	Trigger node (default: mail icon button); null renders none
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Open state change callback
`title`	`string`	`'Compose email'`	Sheet title
`disabled`	`boolean`	-	Disables the default trigger
`sendAsUser`	`boolean`	-	Send through the tenant account with the user identity
`slashCommands`	`EmailComposerSlashCommand[]`	-	Slash commands forwarded to the composer
`onSent`	`(result: DocyrusEmailSendResult) => void`	-	Called after a successful send
`className`	`string`	-	Trigger classes

Type Exports

Type	Description
`EmailComposeDialogProps`	Props

Differences from web

The dialog is a full-height bottom sheet with keyboard avoidance.
A custom trigger is wrapped in a Pressable.
The toast is the native toast.