List

List arranges its children as rows and scrolls on its own. A Section child becomes a group with its header and footer.

import { List, Modifier, Section, Text } from "onescript/views"

<List modifier={Modifier.listStyle("insetGrouped")}>
  <Section header="Fruits">
    <Text>Apple</Text>
    <Text>Orange</Text>
  </Section>
</List>

Selection

Mark each row with tag and pass selection with onSelectionChange.

Single selection: selection is a tag value, or null for nothing selected. Tapping a row selects it.
Multiple selection: selection is an array of tag values. On iOS, rows can only be checked in edit mode, so add an EditButton. The order of the array passed to onSelectionChange is not guaranteed.

import { EditButton, List, Modifier, Text, ToolbarItem, useState } from "onescript/views"

function Inbox() {
  const [selected, setSelected] = useState<string[]>([])
  return (
    <List
      selection={selected}
      onSelectionChange={setSelected}
      modifier={Modifier.toolbar(<ToolbarItem placement="primaryAction"><EditButton /></ToolbarItem>)}
    >
      <Text modifier={Modifier.tag("welcome")}>Welcome</Text>
      <Text modifier={Modifier.tag("invoice")}>Invoice</Text>
    </List>
  )
}

Prop	Type	Description
`selection`	`string \| number \| null` or an array	Selected tag, or selected tags for multiple selection.
`onSelectionChange`	`(value) => void`	Runs when the user changes the selection. Required together with `selection`.

List scrolls by itself, so do not put it inside a ScrollView. Use listStyle to change its appearance. Also accepts Modifiers. It is only available in App and Action view sessions; widgets reject it with an unsupported view type error.

Selection

On this page