Suggestion - React Native

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

Implementation
Suggestion Props
SuggestionList Props

import { Suggestion } from "@servicetitan/anvil2-rn";

function App() {
  return <Suggestion label="What can you help me with?" />;
}

Common Examples

To use a single Suggestion, pass a required label and handle selection with onPress. Supply the label already localized; the component renders it verbatim.

import { Suggestion } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return (
    <Suggestion
      label="Show overdue invoices"
      onPress={() => sendPrompt("Show overdue invoices")}
    />
  );
}

Suggestion list

Use SuggestionList for a wrapping group of chips. Each string in suggestions becomes a Suggestion. onSelect receives the selected string and index. The list does not enforce content limits. Keep the set to three suggestions of about 40 characters each.

import { SuggestionList } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <SuggestionList
      suggestions={[
        "What can you help me with?",
        "Order more",
        "Show recent updates",
      ]}
      onSelect={(suggestion) => sendPrompt(suggestion)}
    />
  );
}

Accessibility

A Suggestion is a button named by label.
SuggestionList exposes the chips as one labelled group. Override accessibilityLabel (default "Suggested replies") for localized copy.

<Suggestion label="Show overdue invoices" onPress={() => {}} />

`Suggestion` Props

The Suggestion accepts the following props. It does not forward remaining React Native Pressable props.

string

required

Visible text and accessible name.

boolean

default:"false"

Disables the chip.

(event: GestureResponderEvent) => void

Selection handler, fired on tap.

string

Test hook forwarded to the underlying Pressable.

<SuggestionList
  suggestions={["What can you help me with?", "Order more"]}
  onSelect={(suggestion, index) => {}}
/>

`SuggestionList` Props

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

(suggestion: string, index: number) => void

required

Fired when a chip is selected.

string[]

required

Chip labels, in order. Each string is the payload passed to onSelect.

string

default:"Suggested replies"

Accessible name for the group.

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, selecting a chip emits a select event with meta.index (position only, never the text) before onSelect.

string

Test hook forwarded to the container.

Concepts & Guidelines

Anvil2

Resources

Suggestion - React Native

Common Examples

Suggestion list

Accessibility

`Suggestion` Props

`SuggestionList` Props

​Common Examples

​Suggestion list

​Accessibility

​Suggestion Props

​SuggestionList Props

Common Examples

Suggestion list

Accessibility

`Suggestion` Props

`SuggestionList` Props