react-native-flex-grid

A react-native flexbox grid similar to bootstap's web grid.

Check the DEMO, built with Storybook and react-native-web.

Getting Started

Installation

NPM:

npm install --save react-native-flex-grid

YARN:

yarn add react-native-flex-grid

Usage

import { Container, Row, Col } from 'react-native-flex-grid';

const MyComponent = (
  <Container fluid>
    <Row>
      <Col>
        <Text>.col</Text>
      </Col>
    </Row>
    <Row>
      <Col>
        <Text>.col</Text>
      </Col>
      <Col>
        <Text>.col</Text>
      </Col>
      <Col>
        <Text>.col</Text>
      </Col>
      <Col>
        <Text>.col</Text>
      </Col>
    </Row>
    <Row>
      <Col xs="3">
        <Text>.col-3</Text>
      </Col>
      <Col xs="auto">
        <Text>.col-auto - variable width content</Text>
      </Col>
      <Col xs="3">
        <Text>.col-3</Text>
      </Col>
    </Row>
    <Row>
      <Col xs="6">
        <Text>.col-6</Text>
      </Col>
      <Col xs="6">
        <Text>.col-6</Text>
      </Col>
    </Row>
    <Row>
      <Col xs="6" sm="4">
        <Text>.col-6 .col-sm-4</Text>
      </Col>
      <Col xs="6" sm="4">
        <Text>.col-6 .col-sm-4</Text>
      </Col>
      <Col sm="4">
        <Text>.col-sm-4</Text>
      </Col>
    </Row>
    <Row>
      <Col sm={5} smOrder={2} smOffset={1}>
        <Text>.col-sm-5 .order-sm-2 .offset-sm-1</Text>
      </Col>
      <Col sm={5} smOrder={1} smOffset={1}>
        <Text>.col-sm-5 .order-sm-1 .offset-sm-1</Text>
      </Col>
    </Row>
    <Row>
      <Col md={6} mdOffset={3} sm={12}>
        <Text>.col-sm-12 .col-md-6 .offset-md-3</Text>
      </Col>
    </Row>
    <Row>
      <Col sm="auto" smOffset={1}>
        <Text>.col-sm-auto .offset-sm-1</Text>
      </Col>
      <Col sm="auto" smOffset={1}>
        <Text>.col-sm-auto .offset-sm-1</Text>
      </Col>
    </Row>
  </Container>
);

export default MyComponent;

Component Props - can be used to customize Layout components

Container

export declare interface ContainerProps
  extends React.ComponentProps<typeof View> {
  /** Fluid Container */
  fluid?: boolean;
  /** No Padding */
  noPadding?: boolean;
  /** Element to render - defaults to View */
  Element?: React.ElementType;
}

Row

export declare interface RowProps extends React.ComponentProps<typeof View> {
  /** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
  gx?: 0 | 1 | 2 | 3 | 4 | 5;
  /** Direction */
  dir?: 'ltr' | 'rtl';
  /** Element to render - defaults to View */
  Element?: React.ElementType;
}

Col

export declare interface ColProps extends React.ComponentProps<typeof View> {
  /** xs size */
  xs?: number | string;
  /** sm size */
  sm?: number | string;
  /** md size */
  md?: number | string;
  /** lg size */
  lg?: number | string;
  /** xl size */
  xl?: number | string;
  /** xs offset */
  xsOffset?: number | string;
  /** sm offset */
  smOffset?: number | string;
  /** md offset */
  mdOffset?: number | string;
  /** lg offset */
  lgOffset?: number | string;
  /** xl offset */
  xlOffset?: number | string;
  /** xs order */
  xsOrder?: number | string;
  /** sm order */
  smOrder?: number | string;
  /** md order */
  mdOrder?: number | string;
  /** lg order */
  lgOrder?: number | string;
  /** xl order */
  xlOrder?: number | string;
  /** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
  gx?: 0 | 1 | 2 | 3 | 4 | 5;
  /** Direction */
  dir?: 'ltr' | 'rtl';
  /** Element to render - defaults to View */
  Element?: React.ElementType;
}

Modifying Grid Configuration

The grid is 100% modifiable, checkout the detailed docs

Responsive utils

Checkout the detailed docs for a set of useful responsive utilities like css/scss like media queries.

Development

Checkout the detailed docs to understand how to run the repo locally and how to develop with it.

Helpful resources

• Blogpost
• Bootstrap layout documentation
• Reactstrap layout documentation
• React Native Extended StyleSheet

Contributing

Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.