Action Log – Code – React Native

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 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 a neutral progress marker for "not-started", "in-progress", and "success". "error" uses the critical treatment.

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

​Common Examples

​Statuses

​Descriptions and details

​Expansion

​Accessibility

​ActionLog Props

​ActionLogStep

Common Examples

Statuses

Descriptions and details

Expansion

Accessibility

`ActionLog` Props

`ActionLogStep`