Grid

A multi-column grid that wraps children into equal-width columns. Built on top of Row, so all Box spacing and alignment props are available.

Usage

Open on Snack ↗

import { Card, Grid, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Grid columns={2} gap="sm">
            <Card variant="outlined"><Typography>Item 1</Typography></Card>
            <Card variant="outlined"><Typography>Item 2</Typography></Card>
            <Card variant="outlined"><Typography>Item 3</Typography></Card>
            <Card variant="outlined"><Typography>Item 4</Typography></Card>
          </Grid>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

How It Works

Each child is wrapped in a cell with flexBasis: ${100 / columns}%, so all columns are equal width. The gap prop controls spacing between cells — cells shrink proportionally to account for it.

Different Column Counts

Open on Snack ↗

import { Button, Grid, IconButton, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16, gap: 24 }}>
          <Typography variant="titleSmall">Two columns</Typography>
          <Grid columns={2} gap="md">
            <Button variant="filled" onPress={() => {}}>A</Button>
            <Button variant="outlined" onPress={() => {}}>B</Button>
          </Grid>
          <Typography variant="titleSmall">Four columns</Typography>
          <Grid columns={4} gap="sm">
            <IconButton icon="heart" accessibilityLabel="Heart" onPress={() => {}} />
            <IconButton icon="star" accessibilityLabel="Star" onPress={() => {}} />
            <IconButton icon="bell" accessibilityLabel="Bell" onPress={() => {}} />
            <IconButton icon="cog" accessibilityLabel="Settings" onPress={() => {}} />
          </Grid>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
columns	number	-	Yes	Number of equal-width columns.
wrap	boolean	false	No	Whether children should wrap to the next line when they overflow.
inverted	boolean	false	No	Reverses the layout direction (`row-reverse`).
p	SpacingValue	-	No	Padding on all sides
px	SpacingValue	-	No	Horizontal padding (paddingStart + paddingEnd)
py	SpacingValue	-	No	Vertical padding (paddingTop + paddingBottom)
pt	SpacingValue	-	No	Padding top
pb	SpacingValue	-	No	Padding bottom
ps	SpacingValue	-	No	Padding start (left in LTR, right in RTL)
pe	SpacingValue	-	No	Padding end (right in LTR, left in RTL)
m	SpacingValue	-	No	Margin on all sides
mx	SpacingValue	-	No	Horizontal margin (marginStart + marginEnd)
my	SpacingValue	-	No	Vertical margin (marginTop + marginBottom)
mt	SpacingValue	-	No	Margin top
mb	SpacingValue	-	No	Margin bottom
ms	SpacingValue	-	No	Margin start
me	SpacingValue	-	No	Margin end
gap	SpacingValue	-	No	Gap between children
rowGap	SpacingValue	-	No	Row gap between children
columnGap	SpacingValue	-	No	Column gap between children
flex	number	-	No	Flex value
align	enum	-	No	Align items along the cross axis
justify	enum	-	No	Justify content along the main axis
bg	string	-	No	Background color