Grid

Beta

Multi-column grid layout with static and data-driven variants.

Installation

npm install @xaui/native

Import

import { Grid, GridItem, GridBuilder } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { Grid } from '@xaui/native/view'

export function Example() {
  return (
    <Grid>
      {/* children */}
    </Grid>
  )
}

Static Grid with GridItem

Lay out a fixed set of cells using GridItem.

import { Grid, GridItem } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function StaticGridExample() {
  return (
    <Grid columns={3} spacing={8}>
      <GridItem><View style={{ height: 80, backgroundColor: '#e0e7ff', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>A</Typography></View></GridItem>
      <GridItem><View style={{ height: 80, backgroundColor: '#dbeafe', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>B</Typography></View></GridItem>
      <GridItem><View style={{ height: 80, backgroundColor: '#dcfce7', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>C</Typography></View></GridItem>
      <GridItem><View style={{ height: 80, backgroundColor: '#fef9c3', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>D</Typography></View></GridItem>
      <GridItem><View style={{ height: 80, backgroundColor: '#ffe4e6', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>E</Typography></View></GridItem>
      <GridItem><View style={{ height: 80, backgroundColor: '#f3e8ff', borderRadius: 8, justifyContent: 'center', alignItems: 'center' }}><Typography>F</Typography></View></GridItem>
    </Grid>
  )
}

Dynamic Grid with GridBuilder

Render a data array into a grid using GridBuilder.

import { GridBuilder } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

const products = [
  { id: '1', name: 'Item A' },
  { id: '2', name: 'Item B' },
  { id: '3', name: 'Item C' },
  { id: '4', name: 'Item D' },
]

export function DynamicGridExample() {
  return (
    <GridBuilder
      data={products}
      keyExtractor={item => item.id}
      columns={2}
      spacing={12}
      renderItem={item => (
        <View style={{ height: 100, backgroundColor: '#f1f5f9', borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
          <Typography>{item.name}</Typography>
        </View>
      )}
    />
  )
}