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

# User Message - React Native

> The UserMessage renders a right-aligned user chat bubble with a timestamped action toolbar.

> [!NOTE]
>
> For development, import `UserMessage` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import { UserMessage } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <UserMessage
      content="Hey — can you take a look at this?"
      timestamp={new Date(2026, 3, 1, 16, 40)}
    />
  );
}
```

## Common Examples

To use the `UserMessage`, pass `content` and a required `timestamp`. The bubble right-aligns. The kit forbids `children`.

```tsx theme={null}
import { UserMessage } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return (
    <UserMessage
      content="Can you look at this invoice?"
      timestamp={sentAt}
    />
  );
}
```

`content` accepts a string or composed React Native nodes. Copy is text-only: pass `copyText` when `content` is rich so the copy action stays available. The kit does not write to the clipboard. Provide `onCopy` to show the copy control.

### Error and retry

Pass `error` to render a failure line under the bubble. `onRetry` only appears when `error` is also set.

```tsx theme={null}
<UserMessage
  content="Can you look at this invoice?"
  timestamp={sentAt}
  error="Couldn't send this message."
  onRetry={() => retry()}
/>
```

## Accessibility

* Actions are grouped in a `toolbar` region named "Message actions"; the timestamp sits outside it and comes first.
* Action buttons are 40x40 for touch.
* Retry is available only when `error` is set.
* Built-in toolbar labels are English until the kit gains an i18n layer.

**UserMessage Props**

```tsx theme={null}
<UserMessage
  content="Can you look at this invoice?"
  timestamp={sentAt}
  onCopy={copy}
/>
```

## `UserMessage` Props

The `UserMessage` accepts the following props. It does not forward remaining React Native `View` props.

**content** `ReactNode` *required*

Message body. A plain-string `content` also supplies copy text when
`copyText` is omitted.

**timestamp** `Date | string | number` *required*

Send time. Accepts a `Date`, ISO string, or epoch number.

**analyticsId** `string`

Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, copy
and retry emit a `press` event with `meta.action` before the handler
runs.

**copyText** `string`

Source text for copy. Takes precedence over a string `content`.

**error** `string`

Error message under the bubble. Omit or pass an empty string to hide
it.

**onCopy** `(text: string) =\> void`

Copy handler. The copy control renders only when this is provided and
copy text is available.

**onRetry** `() =\> void | Promise\<void\>`

Retry handler. The retry control renders only when `error` is also
set.

**testID** `string`

Test hook forwarded to the row container.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.