List

List organizes content into a vertically stacked container with optional headers, footers, and sections. Perfect for settings, menus, and data displays.

Preview

☰

Hexagram 1 - The CreativeHeaven over Heaven

›

☷

Hexagram 2 - The ReceptiveEarth over Earth

›

☳

Hexagram 51 - The ArousingThunder over Thunder

›

Basic Usage

Item One

Item Two

Item Three

<List>
  <ListItem title="Item One" />
  <ListItem title="Item Two" />
  <ListItem title="Item Three" />
</List>

With Header and Footer

RECENT READINGS

Morning GuidanceHexagram 11 - Peace

Career DecisionHexagram 35 - Progress

Showing last 2 readings

<List
  header="Recent Readings"
  footer="Showing last 2 readings"
>
  <ListItem
    title="Morning Guidance"
    subtitle="Hexagram 11 - Peace"
  />
  <ListItem
    title="Career Decision"
    subtitle="Hexagram 35 - Progress"
  />
</List>

With Leading and Trailing Elements

John DoePremium Member

PRO

🔔

Notifications

🌙

Dark Mode

<List>
  <ListItem
    title="John Doe"
    subtitle="Premium Member"
    leading={<Avatar initials="JD" />}
    trailing={<Badge variant="gold">PRO</Badge>}
  />
  <ListItem
    title="Notifications"
    leading={<Icon name="bell" />}
    trailing={<Switch value={notifications} onValueChange={setNotifications} />}
  />
  <ListItem
    title="Dark Mode"
    leading={<Icon name="moon" />}
    trailing={<Switch value={darkMode} onValueChange={setDarkMode} />}
  />
</List>

Interactive Items

Account Settings

›

Privacy & Security

›

Help & Support

›

<List>
  <ListItem
    title="Account Settings"
    onPress={() => navigate('AccountSettings')}
    trailing={<ChevronRight />}
  />
  <ListItem
    title="Privacy & Security"
    onPress={() => navigate('Privacy')}
    trailing={<ChevronRight />}
  />
  <ListItem
    title="Help & Support"
    onPress={() => navigate('Help')}
    trailing={<ChevronRight />}
  />
</List>

List Sections

APPEARANCE

Theme

Dark

Font Size

Medium

ABOUT

Version

1.2.0

Build

2024.12.1

<ListSection title="Appearance">
  <ListItem title="Theme" trailing={<Text>Dark</Text>} />
  <ListItem title="Font Size" trailing={<Text>Medium</Text>} />
</ListSection>

<ListSection title="About">
  <ListItem title="Version" trailing={<Text>1.2.0</Text>} />
  <ListItem title="Build" trailing={<Text>2024.12.1</Text>} />
</ListSection>

API Reference

List Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	ListItem elements
`header`	`string`	-	Header text above list
`footer`	`string`	-	Footer text below list
`style`	`ViewStyle`	-	Custom styles

ListItem Props

Prop	Type	Default	Description
`title`	`string`	Required	Primary text
`subtitle`	`string`	-	Secondary text
`leading`	`ReactNode`	-	Left element
`trailing`	`ReactNode`	-	Right element
`onPress`	`() => void`	-	Press handler
`disabled`	`boolean`	`false`	Disable interaction
`divider`	`boolean`	`true`	Show bottom divider
`style`	`ViewStyle`	-	Custom styles

ListSection Props

Prop	Type	Default	Description
`title`	`string`	Required	Section title
`children`	`ReactNode`	Required	ListItem elements
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { List, ListItem, ListSection, Switch, Avatar, Badge } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function SettingsScreen() {
  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(true);
  const [haptics, setHaptics] = useState(true);

  return (
    <View style={styles.container}>
      <List header="Account">
        <ListItem
          title="Profile"
          subtitle="John Doe"
          leading={<Avatar initials="JD" size="sm" />}
          onPress={() => navigate('Profile')}
          trailing={<ChevronRight />}
        />
      </List>

      <ListSection title="Preferences">
        <ListItem
          title="Push Notifications"
          trailing={
            <Switch
              value={notifications}
              onValueChange={setNotifications}
              accessibilityLabel="Notifications"
            />
          }
        />
        <ListItem
          title="Dark Mode"
          trailing={
            <Switch
              value={darkMode}
              onValueChange={setDarkMode}
              accessibilityLabel="Dark mode"
            />
          }
        />
        <ListItem
          title="Haptic Feedback"
          trailing={
            <Switch
              value={haptics}
              onValueChange={setHaptics}
              accessibilityLabel="Haptics"
            />
          }
        />
      </ListSection>

      <ListSection title="Support">
        <ListItem
          title="Help Center"
          onPress={() => navigate('Help')}
          trailing={<ChevronRight />}
        />
        <ListItem
          title="Rate the App"
          onPress={rateApp}
          trailing={<ChevronRight />}
        />
      </ListSection>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 24,
  },
});