react-native-col

Flexbox made easy & semantic

┌─────────────┐
│ TL   T   TR │
│             │
│ L    C    R │
│             │
│ BL   B   BR │
└─────────────┘

• Install
• Usage
• API
  • Col
  • Row
  • Col0, Col1, Row7… (Flex)
  • create(Col|Row)
  • createDialStyle
  • (col|row|flex)Styles
• Credits

Install

yarn add react-native-col

Usage

Before

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

After

import { Row } from 'react-native-col';
// "Top Right"
<Row.TR ></Row.TR>;

API

All demos use these 3 RGB squares:

import { View } from 'react-native';
const square = {
  minWidth: 50,
  minHeight: 50,
};
const $ = {
  // Red
  r: {
    ...square,
    backgroundColor: 'red',
  },
  // Green
  g: {
    ...square,
    backgroundColor: 'green',
  },
  // Blue
  b: {
    ...square,
    backgroundColor: 'blue',
  },
};
const Red = () => <View style={$.r} ></View>;
const Green = () => <View style={$.g} ></View>;
const Blue = () => <View style={$.b} ></View>;

Also assume that all Col and Row containers in demos, are { flex: 1 }. Which are redacted for clarity.

Col

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

Top Left

// Equivalent to <Col />
<Col.TL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.TL>

Top

<Col.T>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.T>

Top Right

<Col.TR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.TR>

Left

<Col.L>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.L>

Center

<Col.C>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.C>

Right

<Col.R>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.R>

Bottom Left

<Col.BL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.BL>

Bottom

<Col.B>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.B>

Bottom Right

<Col.BR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.BR>

Top to Bottom, aligned Left

<Col.TBL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.TBL>

Top to Bottom

<Col.TB>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.TB>

Top to Bottom, aligned Right

<Col.TBR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.TBR>

Bottom to Top, aligned Left

<Col.BTL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.BTL>

Bottom to Top

<Col.BT>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.BT>

Bottom to Top, aligned Right

<Col.BTR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.BTR>

Top, aligned Left to Right

<Col.LRT>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.LRT>

Center, aligned Left to Right

<Col.LRC>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.LRC>

Bottom, aligned Left to Right

<Col.LRB>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col.LRB>

Row

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

Top Left

// Equivalent to <Row ></Row>
<Row.TL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.TL>

Top

<Row.T>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.T>

Top Right

<Row.TR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.TR>

Left

<Row.L>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.L>

Center

<Row.C>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.C>

Rigth

<Row.R>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.R>

Bottom Left

<Row.BL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.BL>

Bottom

<Row.B>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.B>

Bottom Right

<Row.BR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.BR>

Left to Right, aligned Top

<Row.LRT>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.LRT>

Left to Right

<Row.LR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.LR>

Left to Right, aligned Bottom

<Row.LRB>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.LRB>

Right to Left, aligned Top

<Row.RLT>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.RLT>

Right to Left

<Row.RL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.RL>

Right to Left, aligned Bottom

<Row.RLB>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.RLB>

Left, aligned Top to Bottom

<Row.TBL>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.TBL>

Center, aligned Top to Bottom

<Row.TBC>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.TBC>

Right, aligned Top to Bottom

<Row.TBR>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Row.TBR>

Col0, Col1, Row7… (Flex)

The package also exports Col[0-9] and Row[0-9] views with pre-defined flex values.

So instead of writing:

<Col style={{ flex: 1 }}>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col>

You could make use of Col1:

import { Col1 } from 'react-native-col';
<Col1>
  <Red ></Red>
  <Green ></Green>
  <Blue ></Blue>
</Col1>;

Here are all possible pre-defined flex values:

import {
  Col0,
  Col1,
  Col2,
  Col3,
  Col4,
  Col5,
  Col6,
  Col7,
  Col8,
  Col9,
  //
  Row0,
  Row1,
  Row2,
  Row3,
  Row4,
  Row5,
  Row6,
  Row7,
  Row8,
  Row9,
} from 'react-native-col';

You can also use the positioning shortcuts on them:

<Col6.TL />
<Col0.T />
<Col2.TR />
<Col9.L />
<Col4.C />
// ...
<Row7.TL ></Row7.TL>
<Row4.T ></Row4.T>
// ...

create(Col|Row)

createCol<T extends ViewProps>(BaseComponent: ComponentType<any>)

createRow<T extends ViewProps>(BaseComponent: ComponentType<any>)

Utility functions to generate all positioning shortcuts based on your BaseComponent of choice.

Works great with react-native-themesheet for example:

import { createTheme } from 'react-native-themesheet';
// src/lib/theme.ts
export const { createBox } = createTheme(
  { primary: '#ff00dd' },
  { s: 4, m: 8, l: 16, xl: 32 }
);
// src/lib/index.ts
import { View } from 'react-native';
import { createCol } from 'react-native-col';
import { createBox } from './theme';
const Box = createBox(View);
export const Col = createCol(Box);
export const Row = createRow(Box);
// src/screens/home.tsx
import { Col, Row } from '../lib';
export function Home() {
  return (
    <Col.C py="xl" mb="l">
      {/* ... */}
    </Col.C>
    <Row.LR p="m" mb="m">{/* ... */}</Row.LR>
  );
}

createDialStyle

type Dial = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
createDialStyle(flexDirection: 'row' | 'column', dial: Dial): ViewStyle

Utility function to generate Flex “dial” positioning raw styles.

Think of your Flexbox container as a dial number pad:

┌─────────────┐
│ 1    2    3 │
│             │
│ 4    5    6 │
│             │
│ 7    8    9 │
└─────────────┘

You can then align container items according to the “dial” number:

import { createDialStyle as dial } from 'react-native-col';
dial('column', 3); // --> col direction, justified right (flex-end), aligned Top
dial('row', 8); // --> row direction, justified center, aligned bottom
// Etc

(col|row|flex)Styles

All react-native StyleSheet styles used by the library are re-exported:

import { colStyles, rowStyles, flexStyles } from 'react-native-col';
colStyles.col;
colStyles.TR;
colStyles.T;
// Etc...
rowStyles.row;
rowStyles.B;
rowStyles.BR;
// Etc...
flexStyles.f0;
flexStyles.f1;
flexStyles.f2;
// Etc...

Credits

• react-native-row for the initial dial idea