List

Styled list items for settings, menus, and navigation.

Account SettingsManage your account preferences

NotificationsConfigure push notifications

PrivacyControl your privacy settings

Web preview — components render natively on iOS & Android

import { List, ListItem, ListItemTitle, ListItemDescription } from "@/components/ui/list";

export function MyScreen() {
  return (
    <List>
      <ListItem>
        <View>
          <ListItemTitle>Account Settings</ListItemTitle>
          <ListItemDescription>Manage your account preferences</ListItemDescription>
        </View>
      </ListItem>
      <ListItem>
        <View>
          <ListItemTitle>Notifications</ListItemTitle>
          <ListItemDescription>Configure push notifications</ListItemDescription>
        </View>
      </ListItem>
    </List>
  );
}

Installation#

npx @aniui/cli add list

Usage#

app/index.tsx

import { List, ListItem, ListItemTitle, ListItemDescription } from "@/components/ui/list";

export function MyScreen() {
  return (
    <List>
      <ListItem>
        <View>
          <ListItemTitle>Account Settings</ListItemTitle>
          <ListItemDescription>Manage your account preferences</ListItemDescription>
        </View>
      </ListItem>
      <ListItem>
        <View>
          <ListItemTitle>Notifications</ListItemTitle>
          <ListItemDescription>Configure push notifications</ListItemDescription>
        </View>
      </ListItem>
    </List>
  );
}

Compound Components#

ComponentDescription

List

Root container for list items

ListItem

Pressable row with border separator

ListItemTitle

Primary text label

ListItemDescription

Secondary description text

Props#

PropTypeDefault

className

string

—

children

React.ReactNode

—

ListItem accepts all Pressable props. Title and Description accept all Text props.

Accessibility#

Semantic list with accessibilityRole="list" on the container and "listitem" on each item.
Screen readers announce the list structure and item count.

Source#

components/ui/list.tsx

import React from "react";
import { View, Text, Pressable } from "react-native";
import { cn } from "@/lib/utils";

export interface ListProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}
export function List({ className, ...props }: ListProps) {
  return <View className={cn("", className)} {...props} />;
}
export interface ListItemProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
  className?: string;
  children?: React.ReactNode;
}
export function ListItem({ className, ...props }: ListItemProps) {
  return (
    <Pressable
      className={cn("flex-row items-center px-4 py-3 min-h-12 border-b border-border", className)}
      accessible={true}
      {...props}
    />
  );
}
export interface ListItemTitleProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function ListItemTitle({ className, ...props }: ListItemTitleProps) {
  return <Text className={cn("text-base font-medium text-foreground", className)} {...props} />;
}
export interface ListItemDescriptionProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function ListItemDescription({ className, ...props }: ListItemDescriptionProps) {
  return <Text className={cn("text-sm text-muted-foreground", className)} {...props} />;
}

Previous← Labeled Separator NextMasked Input →