Action Log - React Native

For development, import ActionLog from @servicetitan/anvil2-rn. For design, find it in the Mobile Agentic Component Library file.

Implementation
ActionLog Props
ActionLogStep

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.

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.

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

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.

<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
  steps={steps}
  defaultExpanded
  expanded={isStreaming}
  onExpandedChange={setOpen}
/>

`ActionLog` Props

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

ActionLogStep[]

required

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

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.

boolean

default:"true"

Whether the step list starts expanded when uncontrolled.

boolean

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

(expanded: boolean) => void

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

string

Test hook forwarded to the root View.

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`

string

required

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

string

required

Plain-text step name.

string

Supporting text rendered beneath the title.

ReactNode

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

"not-started" | "in-progress" | "success" | "error"

default:"not-started"

Visual status and screen-reader label for the marker.

Concepts & Guidelines

Anvil2

Resources

Action Log - React Native

Common Examples

Statuses

Descriptions and details

Expansion

Accessibility

`ActionLog` Props

`ActionLogStep`

​Common Examples

​Statuses

​Descriptions and details

​Expansion

​Accessibility

​ActionLog Props

​ActionLogStep

Common Examples

Statuses

Descriptions and details

Expansion

Accessibility

`ActionLog` Props

`ActionLogStep`