User Message – Code – React Native

Implementation
UserMessage Props

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.

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.

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

Accessibility

The toolbar groups user actions with the timestamp.
Retry is available only when error is set.
Built-in toolbar labels are English until the kit gains an i18n layer.

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

ReactNode

required

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

Date | string | number

required

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

string

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

string

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

string

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

(text: string) => void

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

() => void | Promise<void>

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

string

Test hook forwarded to the row container.

​Common Examples

​Error and retry

​Accessibility

​UserMessage Props

Common Examples

Error and retry

Accessibility

`UserMessage` Props