LazyHStack
LazyHStack is a container that arranges its children horizontally, loading them lazily. LazyHStack is similar to HStack but only renders children that are visible in the viewport, improving performance for long horizontal lists.
LazyHStack is a container that arranges its children horizontally, loading them lazily. LazyHStack is similar to HStack but only renders children that are visible in the viewport, improving performance for long horizontal lists.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<LazyHStack spacing={10}>{items.map(item => (
<Text key={item.id} style={{ padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px', whiteSpace: 'nowrap' }}>
{item.name}
</Text>
))}</LazyHStack>In ScrollView
Preview unavailable for this example in the static docs build.
Show code
<ScrollView direction="horizontal" style={{ width: '100%', height: '100px' }}>
<LazyHStack spacing={10}>
{items.map(item => (
<Text key={item.id} style={{ padding: '15px', backgroundColor: '#f9f9f9', borderRadius: '8px', whiteSpace: 'nowrap' }}>
{item.name}
</Text>
))}
</LazyHStack>
</ScrollView>With Estimated Item Width
Preview unavailable for this example in the static docs build.
Show code
<LazyHStack spacing={10} estimatedItemWidth={100}>{items.slice(0, 20).map(item => (
<Text key={item.id} style={{ padding: '15px', backgroundColor: '#e8e8e8', borderRadius: '4px', whiteSpace: 'nowrap' }}>
{item.name}
</Text>
))}</LazyHStack>With Alignment
Preview unavailable for this example in the static docs build.
Show code
<LazyHStack spacing={10} alignment="center">{items.slice(0, 10).map(item => (
<Text key={item.id} style={{ padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px', whiteSpace: 'nowrap' }}>
{item.name}
</Text>
))}</LazyHStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
estimatedItemWidth | number | No | Estimated width of each item for virtualization. Used to optimize rendering performance. |
Inherits additional props from IHStackProps.
Overview
LazyHStack is a container that arranges its children horizontally, loading them lazily. LazyHStack is similar to HStack but only renders children that are visible in the viewport, improving performance for long horizontal lists.
SwiftUI Correspondence: Similar to SwiftUI's LazyHStack.
Notes
- LazyHStack supports all HStack props (spacing, alignment, etc.)
- LazyHStack only renders visible items for better performance
- Use
estimatedItemWidthto optimize virtualization - LazyHStack is ideal for long horizontal lists
- LazyHStack automatically handles viewport detection
Best Practices
- Long lists: Use LazyHStack for horizontal lists with many items
- Performance: LazyHStack improves performance for large datasets
- Estimated width: Provide estimatedItemWidth when possible
- Keys: Always provide unique keys for list items
- ScrollView: Use LazyHStack within ScrollView for scrollable horizontal lists
LazyHGrid
LazyHGrid is a container that arranges its children in a horizontal grid, loading them lazily. LazyHGrid creates a horizontal grid layout with lazy loading for performance.
LazyVGrid
LazyVGrid is a container that arranges its children in a grid, loading them lazily. LazyVGrid creates a vertical grid layout with lazy loading for performance.