List

Lists are continuous, vertical indexes of text and images. Follows the Material Design 3 Lists specification.

Usage

Open on Snack ↗

import { List, ListItem, ListDivider } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <List>
          <ListItem headlineText="Photos" supportingText="Jan 9, 2024" />
          <ListDivider />
          <ListItem headlineText="Recipes" supportingText="Jan 17, 2024" />
          <ListDivider />
          <ListItem headlineText="Work" supportingText="Jan 28, 2024" />
        </List>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

List item templates

List items auto-detect their height from the content provided:

Template	Props	Min height
One-line	headlineText only	56dp
Two-line	+ supportingText or overlineText	72dp
Three-line	+ both, or multi-line supportingText	88dp

Leading and trailing content

Pass any ReactNode as leadingContent or trailingContent:

Open on Snack ↗

import { List, ListItem } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { MaterialCommunityIcons } from '@expo/vector-icons'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <List>
          <ListItem
            headlineText="Wi-Fi"
            supportingText="Connected"
            leadingContent={<MaterialCommunityIcons name="wifi" size={24} />}
            trailingSupportingText="On"
          />
        </List>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Interactive items

When onPress is provided, the item renders as a Pressable with state-layer feedback:

Open on Snack ↗

import { List, ListItem } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <List>
          <ListItem
            headlineText="Settings"
            onPress={() => Alert.alert('Tapped')}
          />
        </List>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Inset dividers

Use inset to align the divider with text that follows a leading icon:

Open on Snack ↗

import { List, ListItem, ListDivider } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { MaterialCommunityIcons } from '@expo/vector-icons'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <List>
          <ListItem
            headlineText="Item 1"
            leadingContent={<MaterialCommunityIcons name="folder" size={24} />}
          />
          <ListDivider inset />
          <ListItem
            headlineText="Item 2"
            leadingContent={<MaterialCommunityIcons name="folder" size={24} />}
          />
        </List>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

List Props

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	Content rendered inside the list container.
style	StyleProp<ViewStyle>	-	No	-

ListItem Props

Prop	Type	Default	Required	Description
headlineText	string	-	Yes	Primary text displayed on the list item.
supportingText	string	-	No	Secondary text displayed below the headline.
overlineText	string	-	No	Text displayed above the headline (e.g. category label).
trailingSupportingText	string	-	No	Short text displayed at the trailing edge (e.g. "100+", timestamp).
leadingContent	ReactNode	-	No	Content rendered before the text block (icon, avatar, image, checkbox).
trailingContent	ReactNode	-	No	Content rendered after the text block (icon, switch, checkbox).
onPress	() => void	-	No	When provided, the item becomes interactive (Pressable). Omit to render as a plain View.
disabled	boolean		No	Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
containerColor	string	-	No	Override the container (background) color. State-layer colors (hover, press) are derived automatically.
contentColor	string	-	No	Override the headline text color. Overline, supporting, and trailing-supporting text keep their MD3 muted variants (`onSurfaceVariant`) — those are intentionally distinct from the primary content color.
supportingTextNumberOfLines	number	1	No	Maximum number of lines for supportingText before truncating.
style	StyleProp<ViewStyle>	-	No	-

ListDivider Props

Prop	Type	Default	Required	Description
inset	boolean		No	When true, adds a leading inset so the divider aligns with text that follows a leading icon (56dp from the start edge).
style	StyleProp<ViewStyle>	-	No	-