Docyrus
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-gridUsage
import { Grid, GridItem } from '@/components/docyrus-native/grid';
<Grid columns={3} gap={4}>
<GridItem><Text>1</Text></GridItem>
<GridItem><Text>2</Text></GridItem>
<GridItem span={2}><Text>Spans 2 columns</Text></GridItem>
<GridItem><Text>4</Text></GridItem>
</Grid>API Reference
Grid
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Grid items |
columns | number | 2 | Number of grid columns |
gap | number | 0 | Gap size (theme spacing key or pixel value) |
columnGap | number | — | Column gap override |
rowGap | number | — | Row gap override |
alignItems | ViewStyle['alignItems'] | — | Cross-axis alignment |
justifyContent | ViewStyle['justifyContent'] | — | Main-axis alignment |
className | string | — | Additional CSS classes |
GridItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Item content |
span | number | 1 | Number of columns to span |
className | string | — | Item CSS classes |
Type Exports
| Type | Description |
|---|---|
GridProps | Props for Grid component |
GridItemProps | Props for GridItem component |