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

# Action Log - React Native

> The ActionLog presents a collapsible timeline of agent steps, statuses, descriptions, and details.

> [!NOTE]
>
> For development, import `ActionLog` 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 { ActionLog } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <ActionLog
      steps={[
        {
          id: "a",
          title: "Looked up the customer account",
          status: "success",
          description: "Retrieved account details and recent payment history.",
        },
        {
          id: "b",
          title: "Pulled the last 20 invoices",
          status: "success",
          description: "Found 3 overdue invoices totaling $1,240.",
        },
        {
          id: "c",
          title: "Drafting the follow-up summary",
          status: "in-progress",
          description: "Summarizing overdue balances and payment history.",
        },
      ]}
    />
  );
}
```

## Common Examples

To use the `ActionLog`, pass configured steps through the required `steps` prop. Each step requires a stable `id` and a `title`; an empty `title` renders no title line, so the step's `description` sits beside its marker. An empty `steps` array renders nothing.

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

function ExampleComponent() {
  return (
    <ActionLog
      steps={[
        { id: "lookup", title: "Looked up the account", status: "success" },
        {
          id: "summary",
          title: "Drafting the summary",
          status: "in-progress",
        },
      ]}
    />
  );
}
```

### Statuses

`status` selects the marker. `"success"` and `"error"` use filled icons. `"in-progress"` uses a spinning loader. `"not-started"` stays in the subtle foreground.

```tsx theme={null}
<ActionLog
  steps={[
    {
      id: "success",
      title: "Looked up the customer account",
      status: "success",
    },
    {
      id: "in-progress",
      title: "Drafting the follow-up summary",
      status: "in-progress",
    },
    {
      id: "not-started",
      title: "Send the summary to the customer",
      status: "not-started",
    },
    {
      id: "error",
      title: "Charge the saved card",
      status: "error",
    },
  ]}
/>
```

### Descriptions and details

Use `description` for supporting plain text. Use `details` for rendered content that appears inside an independently collapsible `Card`.

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

<ActionLog
  steps={[
    {
      id: "a",
      title: "Pulled the last 20 invoices",
      status: "success",
      description: "Found 3 overdue invoices totaling $1,240.",
    },
    {
      id: "b",
      title: "Drafting the follow-up summary",
      status: "in-progress",
      description: "Summarizing overdue balances and recent payment history.",
      details: (
        <Text
          size="compact"
          text="Overdue since April · last payment May 3 · $1,240 across 3 invoices."
        />
      ),
    },
  ]}
/>
```

### Expansion

The step list starts expanded. Set `defaultExpanded={false}` to start collapsed. Pass `expanded` and `onExpandedChange` to control the list, for example to keep it open while a response streams. Each step's details stay independently uncontrolled.

```tsx theme={null}
<ActionLog defaultExpanded={false} steps={steps} />

<ActionLog
  expanded={isStreaming}
  onExpandedChange={setOpen}
  steps={steps}
/>
```

## Accessibility

* Status markers use `accessibilityRole="image"` and a status label. They do not imply form semantics.
* Show steps / Hide steps and Show details / Hide details are disclosure buttons. Details toggles include the step title in `accessibilityLabel` so repeated controls stay distinguishable; an untitled step is named by its position instead ("Show details for step 3").
* Stable step `id` values preserve each details disclosure when steps stream or re-render.
* Built-in toggle and status labels are English until the kit gains an i18n layer. Localize `title` and `description` before passing them.

**ActionLog Props**

```tsx theme={null}
<ActionLog
  steps={steps}
  defaultExpanded
  expanded={isStreaming}
  onExpandedChange={setOpen}
/>
```

## `ActionLog` Props

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

**steps** `ActionLogStep[]` *required*

Steps to render from top to bottom. An empty array renders nothing.

**analyticsId** `string`

Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, toggling
the steps list or a step's details emits a `toggle` event with
`meta.section` (`"steps"` or `"details"`) and `meta.expanded` before
`onExpandedChange`.

**defaultExpanded** `boolean` (default: true)

Whether the step list starts expanded when uncontrolled.

**expanded** `boolean`

Controlled expanded state for the step list. Pair with
`onExpandedChange`.

**onExpandedChange** `(expanded: boolean) =\> void`

Fires with the next expanded state when the steps toggle is pressed.

**testID** `string`

Test hook forwarded to the root `View`.

**ActionLogStep**

```tsx theme={null}
const step: ActionLogStep = {
  id: "summary",
  title: "Drafting the summary",
  description: "Reading the last 20 invoices.",
  status: "in-progress",
  details: <Text text="Found 3 overdue invoices." />,
};
```

## `ActionLogStep`

**id** `string` *required*

Stable identity used as the React key and to preserve disclosure state.

**title** `string` *required*

Plain-text step name.

**description** `string`

Supporting text rendered beneath the title.

**details** `ReactNode`

Extra content revealed through a per-step details disclosure and rendered
inside a `Card`.

**status** `"not-started" | "in-progress" | "success" | "error"` (default: not-started)

Visual status and screen-reader label for the marker.


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