ListGroup

Installation

ListGroup ships with the library — install it once, then import:

import { ListGroup } from "@delacour/react-native-ui/list-group";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add list-group

Usage

app/index.tsx

import { ListGroup } from "@/components/ui/list-group";
import { View } from "react-native";

export default function Example() {
  return (
    <View className="flex-1 justify-center p-4">
      <ListGroup>
        <ListGroup.Item onPress={() => console.log("profile")}>Profile</ListGroup.Item>
        <ListGroup.Item onPress={() => console.log("notifications")}>Notifications</ListGroup.Item>
      </ListGroup>
    </View>
  );
}

Variants

<ListGroup variant="secondary">…</ListGroup>
<ListGroup variant="tertiary">…</ListGroup>
<ListGroup variant="transparent">…</ListGroup>

Sizes

One axis drives the row metrics, both type scales, both icon sizes and the divider inset.

<ListGroup size="sm">…</ListGroup>
<ListGroup size="md">…</ListGroup>
<ListGroup size="lg">…</ListGroup>

Dividers

The root puts a Separator between adjacent children, inset to line up with the rows' padding.

<ListGroup isDivided={false}>…</ListGroup>

A Separator placed by hand suppresses the automatic one on either side of it, so one gap can be full-bleed without turning the feature off.

Row slots

Custom suffix

import { Icon } from "@delacour/react-native-ui/icon";
import { IconUser } from "@delacour/react-native-ui/icons/central";

<ListGroup.Item onPress={openProfile}>
  <ListGroup.ItemPrefix>
    <Icon icon={IconUser} />
  </ListGroup.ItemPrefix>
  <ListGroup.ItemContent>
    <ListGroup.ItemTitle>Profile</ListGroup.ItemTitle>
    <ListGroup.ItemDescription>Name, photo and handle</ListGroup.ItemDescription>
  </ListGroup.ItemContent>
  <ListGroup.ItemSuffix />
</ListGroup.Item>;

ItemPrefix wraps its subtree in icon defaults, so a bare <Icon> needs nothing said at the call site. ItemSuffix draws a chevron when it has no children of its own.

API Reference

ListGroup.Item

A row. A Pressable, so feedback, haptic and the rest are inherited — only the default differs: fade, because a full-bleed row that scales reads as the whole card flexing.

Prop

Type

ListGroup.ItemPrefix / ItemContent / ItemSuffix

The row's three regions. ItemPrefix wraps its subtree in icon defaults, so a bare Icon needs nothing said at the call site. ItemSuffix draws a chevron when it has no children of its own.

Prop

Type

ListGroup.ItemTitle / ItemDescription

The row's two lines of text. Extend React Native's TextProps.

Prop

Type

Title colour goes on the title, never on the row. A row is a View, and a React Native View does not cascade colour to a Text descendant — the item slot carries no text-* at all, so a text-destructive written there does nothing.

On this page