Documentation

react-native-flexbox-grid

Row

import {Row} from 'react-native-flexbox-grid';

<Row>
    <Text>My First Row</Text>
</Row>

Row is a component designed to represent a row. It utilizes flex-direction: 'row' to place it's children in rows. Typically we would put a Column inside of a Row, but it is not necessary.

Props

Row has two props. size and nowrap.

size

import {Column as Col, Row} from 'react-native-flexbox-grid';

<Row size={12}>
    <Col sm={6} md={4} lg={3}>
      <Text>
        First Column
      </Text>
    </Col>
    <Col sm={6} md={4} lg={3}>
      <Text>
        Second Column
      </Text>
    </Col>
</Row>

size - Accepts a number. This number defines the number of columns in the Row. If you do not specify a number or you input the number 0 the size will default to 12. Since size accepts any javascript number, you can make your row contain pretty much any number of Columns.

nowrap

import {Row} from 'react-native-flexbox-grid';

//Will wrap Columns. Second Column's width will not protrude beyond row. It will wrap to the next Row.
<Row size={10}>
    <Col sm={5}>
      <Text>
        First Column
      </Text>
    </Col>
    <Col sm={6}>
      <Text>
        Second Column
      </Text>
    </Col>
</Row>

//Will not wrap Columns. Second Column's width will protrude beyond row.
<Row size={10} nowrap>
    <Col sm={6} md={4} lg={3}>
      <Text>
        First Column
      </Text>
    </Col>
    <Col sm={6} md={4} lg={3}>
      <Text>
        Second Column
      </Text>
    </Col>
</Row>

nowrap - Accepts a boolean. This boolean defines the style property flexWrap. If no prop is specified, then the defaults value will be flexWrap: 'wrap'. If you add the prop to the Row then the style value will equal flexWrap: nowrap. This makes it easy to see what rows will wrap at a glance.

Column

import {Column as Col, Row} from 'react-native-flexbox-grid';

<Row size={12}>
    <Col sm={6} md={4} lg={3}>
        <Text>First Column</Text>
    </Col>
</Row>

Props

Row has a two types of props. Column size props and hidden props.

Column size props.

import {Column as Col, Row} from 'react-native-flexbox-grid';

<Row size={12}>
    <Col sm={6} md={4} lg={3}>
        <Text>First Column</Text>
    </Col>
</Row>

There are currently three size props for Column. sm, md, and lg.

The three size props refer to the screen sizes they are active on.

Prop	Screen Size	Real World Device
sm	< 768px	Phone (iPhone)
md	768px - 1023px	Normal Tablet (iPad)
lg	>=1024px	Big Tablet (iPad Pro)

Example:

import {Column as Col, Row} from 'react-native-flexbox-grid';

<Row size={12}>
    <Col sm={6} md={4} lg={3}>
        <Text>First Column</Text>
    </Col>
</Row>

On a phone the Column would take up 6 of 12 columns for 50% of the screen. On a normal tablet the Column would take up 4 of 12 columns for 33% of the screen. On a big tablet the Column would take up 3 of 12 columns for 33% of the screen.

Hidden props.

import {Column as Col, Row} from 'react-native-flexbox-grid';

<Row size={12}>
    <Col smHidden>
        <Text>First Column</Text>
    </Col>
</Row>

In this example the row and all of it's children will be hidden on small screens like phones, but it will appear on bigger screens like tablets.

Every screen size has a hidden prop associated with it.

Hidden props are all booleans. They default to false.

Known Issues

For react-native 0.41 and earlier you muse use react-native-flexbox-grid@0.2.0 or earlier.

Since React Native before 0.41 and earlier doesn't support percentages we have to rely on using React Native's onlayout to pass the width of the parent to the child. This causes layouts to be a bit slow, because the child has to wait for the parent to layout and then rerender. This problem is resolved by using react native 0.42 and the react-native-flexbox-grid@0.3.0 or later.