Native

Grid

A responsive grid layout component built for React Native that automatically wraps items to new rows when they exceed the column count. Items can span multiple columns, grow to fill available space, and be reordered using CSS flexbox order.

React Native

Usage

The Grid component automatically creates a responsive layout with the specified number of columns:

import React from 'react';
import { Grid } from '@hoverinc/design-system-react-native';
import { Text } from 'react-native';
const App = () => {
  return (
    <Grid columns={2} columnGap={16} rowGap={16}>
      <Grid.Col>
        <Text>Item 1</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 2</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 3</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 4</Text>
      </Grid.Col>
    </Grid>
  );
};

Column Spanning

Items can span multiple columns using the span prop:

import { Grid } from '@hoverinc/design-system-react-native';
import { Text } from 'react-native';
const App = () => {
  return (
    <Grid columns={3}>
      <Grid.Col>
        <Text>Item 1</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 2</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 3</Text>
      </Grid.Col>
      <Grid.Col span={3}>
        <Text>Full width item</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 5</Text>
      </Grid.Col>
      <Grid.Col span={2}>
        <Text>Two column item</Text>
      </Grid.Col>
    </Grid>
  );
};

Growing Columns

Enable the grow prop on the Grid to make all columns expand to fill the remaining space in each row:

import { Grid } from '@hoverinc/design-system-react-native';
import { Text } from 'react-native';
const App = () => {
  return (
    <Grid columns={3} grow>
      <Grid.Col>
        <Text>Item 1</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 2</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Item 3</Text>
      </Grid.Col>
    </Grid>
  );
};

Column Ordering

Use the order prop to control the visual order of items within their row. It works exactly as CSS' Flexbox order does.

import { Grid } from '@hoverinc/design-system-react-native';
import { Text } from 'react-native';
const App = () => {
  return (
    <Grid columns={3}>
      <Grid.Col>
        <Text>First in DOM</Text>
      </Grid.Col>
      <Grid.Col>
        <Text>Second in DOM</Text>
      </Grid.Col>
      <Grid.Col order={1}>
        <Text>Third in DOM, first visually</Text>
      </Grid.Col>
      <Grid.Col order={-1} span={3}>
        <Text>Fourth in DOM, appears first</Text>
      </Grid.Col>
    </Grid>
  );
};

Advanced Example

Here's a more complex example showing various Grid features:

import React from 'react';
import { Grid } from '@hoverinc/design-system-react-native';
import { Text, View } from 'react-native';
const App = () => {
  return (
    <Grid columns={4} columnGap="$400" rowGap="$300" grow>
      <Grid.Col span={2}>
        <View style={{ backgroundColor: '#e3f2fd', padding: 16 }}>
          <Text>Header (spans 2 columns)</Text>
        </View>
      </Grid.Col>
      <Grid.Col>
        <View style={{ backgroundColor: '#f3e5f5', padding: 16 }}>
          <Text>Sidebar</Text>
        </View>
      </Grid.Col>
      <Grid.Col>
        <View style={{ backgroundColor: '#e8f5e8', padding: 16 }}>
          <Text>Widget</Text>
        </View>
      </Grid.Col>
      <Grid.Col span={4}>
        <View style={{ backgroundColor: '#fff3e0', padding: 16 }}>
          <Text>Full width content</Text>
        </View>
      </Grid.Col>
      <Grid.Col order={1}>
        <View style={{ backgroundColor: '#fce4ec', padding: 16 }}>
          <Text>Ordered item</Text>
        </View>
      </Grid.Col>
      <Grid.Col>
        <View style={{ backgroundColor: '#e0f2f1', padding: 16 }}>
          <Text>Regular item</Text>
        </View>
      </Grid.Col>
    </Grid>
  );
};

Notes

The Grid component automatically wraps items to new rows when they exceed the column count
Items with span values that would exceed the column count will be moved to a new row
The order prop works similar to CSS flexbox order - negative values appear first
When grow is enabled, all columns will expand to fill the remaining space in each row
The component uses flexbox under the hood for responsive behavior
Both columnGap and rowGap accept design token values (e.g., '$200') or numeric values for spacing between columns and rows respectively

Design System

Settings