A wrapper Around React Native View Enabling Quick Flexbox Positioning

by React Native Example

react-native-col

The idea is to keep JSX as clean & concise as possible, while also providing some nice semantic.

Installation

$ yarn add react-native-col

Basic Usage

// Before
import { View } from 'react-native';

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-start',
    flex: 1,
  }}
/>;

// After
import { Row3 } from 'react-native-col';

<Row3 />;

Documentation

The dial notation

The package exposes 2 types of components: Col<dial> and Row<dial>.

The dial "property" is included in the name of the component: Col5, Row4, etc...

Think of dial as a phone pad. Child components will align according to the dial number:

<Row5 />


<Col5 />

Col<dial>

import { Col3 } from 'react-native-col';

<Col3 />

// Equivalent
<View style={{ flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-end", flex: 1 }} />

NB: All styles are pre-generated and not passed inline.

Row<dial>

import { Row6 } from 'react-native-col';

<Row6 />

// Equivalent
<View style={{ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", flex: 1 }} />

GitHub