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

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. Similar to bootstrap, if you do not specify a number or you input the number 0 the size will defaults 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';

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