React-native-unistyles-grid NPM

react-native-unistyles-grid

A flexible and responsive grid system for React Native applications, built on top of react-native-unistyles. It works with 12 columns layout system and provides a simple API to define responsive layouts.

Installation

npm install react-native-unistyles-grid

yarn add react-native-unistyles-grid

pnpm add react-native-unistyles-grid

bun add react-native-unistyles-grid

Init (optional)

Add the following code bellow unistyles init function, to update default grid config:

import { UnistylesGrid } from 'react-native-unistyles-grid'

UnistylesGrid.init((theme) => ({
    containerPaddingVertical: theme.gap(3),
    containerPaddingHorizontal: theme.gap(2),
    rowGap: theme.gap(1),
    columnGap: {
        xs: theme.gap(1),
        md: theme.gap(2)
    }
}))

Config

Name	Type	Default	Description
paddingVertical	number \| Record<UnistylesBreakpoint, number>	0	Vertical padding of the container
paddingHorizontal	number \| Record<UnistylesBreakpoint, number>	0	Horizontal padding of the container
rowGap	number \| Record<UnistylesBreakpoint, number>	0	Gap between rows
columnGap	number \| Record<UnistylesBreakpoint, number>	0	Gap between columns
debug	boolean	false	Enable debug mode

Components

Container

A wrapper component that provides consistent padding and layout constraints for your grid system.

Props

Name	Type	Default	Description
paddingVertical	number \| Record<UnistylesBreakpoint, number>	Comes from config	Vertical padding of the container
paddingHorizontal	number \| Record<UnistylesBreakpoint, number>	Comes from config	Horizontal padding of the container
rowGap	number \| Record<UnistylesBreakpoint, number>	Comes from config	Gap between rows

<Container rowGap={theme.gap(3)}>
    {/* Layout */}
</Container>

Row

A horizontal container that holds Col components and manages their layout.

Props

Name	Type	Default	Description
columnGap	number \| Record<UnistylesBreakpoint, number>	Comes from config	Gap between columns

<Row columnGap={theme.gap(2)}>
    {/* Columns */}
</Row>

Col

A column component that defines width and positioning within a Row.

Props

Name	Type	Default	Description
UnistylesBreakpoint (xs, md, lg, etc.)	ColumnConfig	undefined	Config of the column

type SpanValue = number | 'auto' | true | string

type OrderValue = 'first' | 'last' | number

type ColumnConfig =
    | SpanValue
    | {
        span?: SpanValue
        order?: OrderValue
        offset?: number
        hide?: true
    }

Type	Example	Description
number \| string	4 \| '4'	Amount of columns that the column should span
'auto'	'auto'	Column will shrink to fit the content
true	`true`	Column will take all available space (if multiple columns are defined, it is distributed evenly between them)
{ span: SpanValue }	{ span: 4 }	Same as above, but passed in an object
{ offset: number }	{ offset: 4 }	Column will be offset by the given number of columns from the left
{ order: OrderValue }	{ order: 'last' }	Column will be positioned last, regardless of the order of the columns in the JSX
{ hide: true }	{ hide: true }	Column won't be rendered on the given breakpoint

<Col xs={4} md={{ offset: 4, span: 4 }}>
    {/* Content */}
</Col>

Example usage

<Container>
    <Row>
        {/* Auto-layout columns */}
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
    </Row>
    <Row>
        {/* Setting one column width */}
        <Row>
            <Col>1 of 3</Col>
            <Col xs={6}>2 of 3 (wider)</Col>
            <Col>3 of 3</Col>
        </Row>
    </Row>
    {/* Centered column */}
    <Row>
        <Col xs={{ offset: 4, span: 4 }}>Centered</Col>
    </Row>
    {/* Responsive grids */}
    <Row>
        <Col xs={12} md={6} lg={4}>xs=12 md=6 lg=4</Col>
        <Col xs={12} md={6} lg={4}>xs=12 md=6 lg=4</Col>
        <Col xs={12} md={6} lg={4}>xs=12 md=6 lg=4</Col>
    </Row>
</Container>