# rn-email-compose-dialog
URL: /docs/native/docyrus/email-compose-dialog

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

## Installation

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

**Dependencies:**
- [@tanstack/react-query](https://www.npmjs.com/package/@tanstack/react-query)
- [@docyrus/api-client](https://www.npmjs.com/package/@docyrus/api-client)

The dialog opens a full-height bottom `AwesomeDialog` sheet with the [rn-email-composer](/docs/native/docyrus/email-composer). The inner form mounts only while the sheet is open, so [`useDocyrusEmailComposer`](/docs/native/hooks/use-docyrus-email-composer) 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 ``), calls `onSent` and closes the sheet.

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

Email [rn-value-renderers](/docs/native/docyrus/value-renderers) open this dialog automatically when you pass them a `client` (and no `onComposeEmail`).

## Usage

```tsx
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

// 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`.