List row

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/list-row.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/list-row.

Usage

import { ListRow, ListSection } from "@/components/goodui-native/list-row/list-row";
import { router } from "expo-router";
import { useState } from "react";
import Svg, { Path } from "react-native-svg";

const bell = (color: string, size: number) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path d="M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15ZM10 20.5a2 2 0 0 0 4 0" stroke={color} strokeWidth={2} strokeLinejoin="round" />
  </Svg>
);

export function SettingsScreen() {
  const [push, setPush] = useState(true);
  return (
    <ListSection header="Notifications" footer="We only send booking reminders and receipts.">
      <ListRow title="Push notifications" icon={bell} iconTone="accent" switchValue={push} onSwitchChange={setPush} />
      <ListRow title="Reminder time" value="1 hour before" onPress={() => router.push("/settings/reminders")} />
    </ListSection>
  );
}

When to use

Examples

<ListSection header="Currency">
  {(["EUR", "USD", "GBP"] as const).map((c) => (
    <ListRow key={c} title={c} checked={currency === c} onPress={() => setCurrency(c)} />
  ))}
</ListSection>

<ListSection>
  <ListRow title="Restore purchases" onPress={() => api.restore()} chevron={false} />
  <ListRow title="Sign out" destructive onPress={signOut} />
</ListSection>

<ListRow title="Messages" icon={chat} iconTone="accent" iconVariant="soft" badge={3} onPress={openMessages} />

API reference

Motion and haptics

• •Touch down: the highlight fades in within 80 ms, the icon tile scales to 0.9 and the chevron moves 3 pt forward, both on the snappy spring.
• •Release: the highlight fades out over 320 ms so a quick tap still reads; tile and chevron spring back.
• •Checking a row draws the check in; the first render shows it complete.
• •Reduced motion: no tile scale or chevron travel, the check appears without drawing; the highlight still fades.

• •Haptic: select on press for checkable rows by default, none for navigation rows (set haptic to change it)
• •Haptic: error when an async onPress rejects
• •Haptic: the Switch in a switch row plays its own toggle-on or toggle-off cue

• •Press feedback runs on the UI thread with shared values; React state only changes for async status.
• •Rows are plain views: for hundreds of rows render them in a FlatList or use sticky-header-list.

Accessibility

• •A pressable row is a button; with `checked` it is a radio with checked in accessibilityState and aria-checked on the web. Disabled and busy (while an async onPress runs) are set in both.
• •On native the row reads one label built from title, subtitle, value and badge. On the web the visible text names it, so the name always starts with the title; a custom accessibilityLabel applies there to static rows only, never to a pressable one.
• •A switch row is not a button: the Switch inside is the control, labelled with the title (and subtitle). The row's text stays readable.
• •Section headers are headers. Rows are at least 44 pt tall.
• •A failed async press is announced ('<title> failed') and shown as an error mark.

Notes for AI

Related