> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clariodesk.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native prebuilt UI

> A themeable drop-in chat: present it with one call, zero mandatory native deps.

`@clariodesk/react-native/ui` is a pure-JS prebuilt chat. It presents its own
screens in a self-owned modal (no react-navigation), derives light/dark from
your theme, and ships zero native dependencies beyond the core.

## Wrap your app

```tsx theme={null}
import { ClarioDeskProvider } from '@clariodesk/react-native/ui';

<ClarioDeskProvider theme={{ primary: brand.accent, cornerRadius: 18, mode: 'system' }}>
  <App />
</ClarioDeskProvider>;
```

## Open from anywhere

```tsx theme={null}
import { openInbox, openTicket, openNewConversation, openBugReport } from '@clariodesk/react-native/ui';

openInbox();              // the user's tickets
openTicket(id);           // a single thread
openNewConversation();    // new ticket form
openBugReport();          // bug report form
```

## Theming

The provider takes a small theme and derives light/dark automatically. It also
exposes \~50 overridable `strings` for localization and copy tweaks.

```tsx theme={null}
<ClarioDeskProvider
  theme={{ primary: '#D4FF00', cornerRadius: 18, mode: 'system' }}
  strings={{ inboxTitle: 'Support', newConversationCta: 'New conversation' }}
>
  <App />
</ClarioDeskProvider>
```

| Theme field    | Notes                                        |
| -------------- | -------------------------------------------- |
| `primary`      | Accent for buttons, links, the active state. |
| `cornerRadius` | Bubble / card radius.                        |
| `mode`         | `'light'`, `'dark'`, or `'system'`.          |

## Enabling attachments

The attach button is off until you give the provider a `picker`:

```tsx theme={null}
import { ClarioDeskProvider } from '@clariodesk/react-native/ui';
import { expoPicker } from '@clariodesk/react-native/expo'; // or your own MediaPicker

<ClarioDeskProvider theme={...} picker={expoPicker}>
  <App />
</ClarioDeskProvider>
```

See [Attachments](/concepts/attachments) for limits and the upload flow.