Components

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.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<LazyVGrid columns={3} spacing={10}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '15px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyVGrid>

Two Columns

Preview unavailable for this example in the static docs build.

Show code

<LazyVGrid columns={2} spacing={15}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '20px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyVGrid>

Four Columns

Preview unavailable for this example in the static docs build.

Show code

<LazyVGrid columns={4} spacing={10}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '15px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyVGrid>

With Images

Preview unavailable for this example in the static docs build.

Show code

<LazyVGrid columns={3} spacing={10}>
      {items.map(item => (
        <Card key={item.id}>
          <VStack spacing={5}>
            <div style={{ width: '100%', height: '100px', backgroundColor: '#e0e0e0', borderRadius: '4px' }} />
            <Text style={{ padding: '10px', fontWeight: 'bold' }}>{item.name}</Text>
          </VStack>
        </Card>
      ))}
    </LazyVGrid>

Large Grid

Preview unavailable for this example in the static docs build.

Show code

<LazyVGrid columns={3} spacing={10}>
        {largeItems.map(item => (
          <Card key={item.id}>
            <VStack spacing={5} style={{ padding: '15px' }}>
              <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
            </VStack>
          </Card>
        ))}
      </LazyVGrid>

API

Prop	Type	Required	Description
`columns`	`number`	No	Number of columns in the grid. Default: `2`
`spacing`	`number`	No	Spacing between grid items. Default: `0`

Inherits additional props from IBaseComponent.

Overview

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.

SwiftUI Correspondence: Similar to SwiftUI's LazyVGrid.

Notes

LazyVGrid requires a columns prop to specify the number of columns
LazyVGrid supports spacing prop for item spacing
LazyVGrid only renders visible items for better performance
LazyVGrid is ideal for grid layouts with many items
Default columns is 2 if not specified

Best Practices

Columns: Choose appropriate number of columns for your layout
Spacing: Use consistent spacing between grid items
Performance: LazyVGrid improves performance for large grids
Keys: Always provide unique keys for grid items
Responsive: Consider responsive column counts for different screen sizes

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.

LazyVStack

LazyVStack is a container that arranges its children vertically, loading them lazily. LazyVStack is similar to VStack but only renders children that are visible in the viewport, improving performance for long lists.

LazyVGrid

Examples

API

Overview

Notes

Best Practices

On this page