List
List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.
List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<List>{(
<VStack spacing={0}>
<div style={{ padding: '15px' }}><Text>Item 1</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 2</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 3</Text></div>
</VStack>
)}</List>Simple List
Preview unavailable for this example in the static docs build.
Show code
<List>
<VStack spacing={0}>
{Array.from({ length: 5 }, (_, i) => (
<div key={i}>
<div style={{ padding: '15px' }}>
<Text>List Item {i + 1}</Text>
</div>
{i < 4 && <Divider />}
</div>
))}
</VStack>
</List>With Sections
Preview unavailable for this example in the static docs build.
Show code
<List>
<Section header={<Text style={{ fontWeight: 'bold' }}>Section 1</Text>}>
<VStack spacing={0}>
<div style={{ padding: '15px' }}><Text>Item 1</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 2</Text></div>
</VStack>
</Section>
<Section header={<Text style={{ fontWeight: 'bold' }}>Section 2</Text>}>
<VStack spacing={0}>
<div style={{ padding: '15px' }}><Text>Item 3</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 4</Text></div>
</VStack>
</Section>
</List>With Actions
Preview unavailable for this example in the static docs build.
Show code
<List>
<VStack spacing={0}>
{Array.from({ length: 3 }, (_, i) => (
<div key={i}>
<div style={{ padding: '15px' }}>
<HStack spacing={10}>
<Text>Item {i + 1}</Text>
<Spacer />
<Button>Action</Button>
</HStack>
</div>
{i < 2 && <Divider />}
</div>
))}
</VStack>
</List>Custom Styling
Preview unavailable for this example in the static docs build.
Show code
<List style={{ backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
<VStack spacing={0}>
{Array.from({ length: 4 }, (_, i) => (
<div key={i}>
<div style={{ padding: '15px' }}>
<Text>Styled Item {i + 1}</Text>
</div>
{i < 3 && <Divider />}
</div>
))}
</VStack>
</List>API
This component currently relies on inherited element props.
Inherits additional props from IBaseComponent.
Overview
List is a container that presents rows of data arranged in a single column. Lists are commonly used to display collections of items, often with dividers between items.
SwiftUI Correspondence: Similar to SwiftUI's List.
With Sections
Organize list items into sections:
With Actions
Add interactive elements to list items:
Custom Styling
Apply custom styles to List:
Notes
- List items should be wrapped in containers with appropriate padding
- Use Divider component to separate list items
- Lists work well with Section components for grouping
- List supports all standard React children
- Lists are typically used within StandardPage or ScrollView
Best Practices
- Consistent spacing: Use consistent padding for list items
- Dividers: Use Divider component between items for visual separation
- Sections: Group related items using Section components
- Accessibility: Ensure list items are accessible and keyboard navigable
- Performance: For very long lists, consider virtualization or pagination