Dialog – Code – React Native

Implementation
Dialog Props
DialogPrimaryAction

import { Button, Dialog } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <Dialog
      title="Leave without saving?"
      content="Your changes haven't been saved. Leaving now will discard them."
      primaryAction={{ label: "Leave" }}
      secondaryAction={{ label: "Stay" }}
      trigger={<Button label="Open dialog" />}
    />
  );
}

Common Examples

To use the Dialog, pass the required title and content. Open it with an Anvil2 RN Button through trigger, or control it with isOpen and onOpenChange.

import { Button, Dialog } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return (
    <Dialog
      title="Leave without saving?"
      trigger={<Button label="Leave page" />}
      content="Your changes haven't been saved."
      primaryAction={{ label: "Leave" }}
      secondaryAction={{ label: "Stay" }}
    />
  );
}

Actions

Pass primaryAction for the confirm action and secondaryAction for dismissal. The dialog fixes both buttons at medium size and fixes the secondary action to the secondary variant. The dialog closes after each footer press; the button’s own onPress fires first.

<Dialog
  title="You're all set"
  content="Your workspace is ready."
  primaryAction={{ label: "Got it" }}
  trigger={<Button label="Finish setup" />}
/>

Use variant: "danger" on primaryAction for destructive confirmation.

<Dialog
  title="Delete project?"
  content="This permanently deletes the project and everything in it."
  primaryAction={{ label: "Delete", variant: "danger" }}
  secondaryAction={{ label: "Cancel" }}
  trigger={<Button label="Delete project" variant="danger" />}
/>

Omit both actions for a footerless dialog. The header close still dismisses.

Open state

When you pass isOpen, onOpenChange is required so the header close, scrim, Android back, and footer actions can request a close.

const [isOpen, setOpen] = useState(false);

<Dialog
  title="Leave without saving?"
  content="Your changes haven't been saved."
  isOpen={isOpen}
  onOpenChange={setOpen}
  primaryAction={{ label: "Leave" }}
/>

Set isDismissable={false} to keep the scrim and Android back from closing the dialog. The header close still dismisses.

Accessibility

The required title is a heading that names the modal. The dialog sets accessibilityViewIsModal.
The header close control is a button named "Close" (English until the kit gains i18n).
Long content scrolls inside the surface.

<Dialog
  title="Leave without saving?"
  content="Your changes haven't been saved."
  primaryAction={{ label: "Leave" }}
  secondaryAction={{ label: "Stay" }}
  trigger={<Button label="Open dialog" />}
/>

`Dialog` Props

The Dialog accepts the following props. It does not forward remaining React Native Modal props. Open state is a discriminated union: pass isOpen with onOpenChange, or omit isOpen for the uncontrolled form.

ReactNode

required

Body content. A plain string uses the dialog’s body typography.

string

required

Accessible title rendered in the header.

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, the primary action emits press; the header close, scrim, and secondary action emit dismiss.

boolean

Whether the dialog starts open when uncontrolled. Unavailable when isOpen is set.

boolean

default:"true"

Whether tapping the scrim or using Android back closes the dialog.

boolean

Controlled open state. Pair with onOpenChange.

(isOpen: boolean) => void

Called when the open state changes. Required when isOpen is set.

DialogPrimaryAction

Confirm action in the footer. Omit with secondaryAction for a footerless dialog.

Dismiss action in the footer, always secondary at medium size.

string

Test hook forwarded to the dialog surface.

ReactElement<ButtonProps>

Anvil2 RN Button that opens the dialog. Omit for controlled state.

const primaryAction: DialogPrimaryAction = {
  label: "Delete",
  variant: "danger",
  onPress: () => {},
};

`DialogPrimaryAction`

Confirm-button props. size is fixed at "medium". Remaining Button props such as icon, onPress, isDisabled, and testID stay available.

string

required

Visible label and accessible name for the confirm button.

"primary" | "danger"

default:"primary"

Confirm-button intent. "danger" is for destructive confirmation.

​Common Examples

​Actions

​Open state

​Accessibility

​Dialog Props

​DialogPrimaryAction

Common Examples

Actions

Open state

Accessibility

`Dialog` Props

`DialogPrimaryAction`