https://github.com/eightyfive/react-native-col
Flexbox made easy & semantic
https://github.com/eightyfive/react-native-col
column flexbox react-native row
Last synced: 10 months ago
JSON representation
Flexbox made easy & semantic
- Host: GitHub
- URL: https://github.com/eightyfive/react-native-col
- Owner: eightyfive
- License: mit
- Created: 2019-01-24T06:59:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T17:45:58.000Z (over 1 year ago)
- Last Synced: 2025-06-27T02:46:32.163Z (11 months ago)
- Topics: column, flexbox, react-native, row
- Language: TypeScript
- Homepage:
- Size: 1.63 MB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `react-native-col`
Flexbox made easy & semantic
```
┌─────────────┐
│ TL T TR │
│ │
│ L C R │
│ │
│ BL B BR │
└─────────────┘
```
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [`Col`](#col)
- [`Row`](#row)
- [`Col0`, `Col1`, `Row7`... (Flex)](#col0-col1-row7-flex)
- [`create(Col|Row)`](#createcolrow)
- [`createDialStyle`](#createdialstyle)
- [`(col|row|flex)Styles`](#colrowflexstyles)
- [Credits](#credits)
## Install
```
yarn add react-native-col
```
## Usage
### Before
```js
import { View } from 'react-native';
;
```
### After
```js
import { Row } from 'react-native-col';
// "Top Right"
;
```
## API
All demos use these 3 RGB squares:
```js
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 = () => ;
const Green = () => ;
const Blue = () => ;
```
Also assume that all `Col` and `Row` containers in demos, are `{ flex: 1 }`. Which are redacted for clarity.
### `Col`
```js
import { Col } from 'react-native-col';
```
#### Top Left
```jsx
// Equivalent to
```
#### Top
```jsx
```
#### Top Right
```jsx
```
#### Left
```jsx
```
#### Center
```jsx
```
#### Right
```jsx
```
#### Bottom Left
```js
```
#### Bottom
```jsx
```
#### Bottom Right
```jsx
```
#### Top to Bottom, aligned Left
```js
```
#### Top to Bottom
```jsx
```
#### Top to Bottom, aligned Right
```jsx
```
#### Bottom to Top, aligned Left
```js
```
#### Bottom to Top
```jsx
```
#### Bottom to Top, aligned Right
```jsx
```
#### Top, aligned Left to Right
```jsx
```
#### Center, aligned Left to Right
```jsx
```
#### Bottom, aligned Left to Right
```jsx
```
### `Row`
```js
import { Row } from 'react-native-col';
```
#### Top Left
```js
// Equivalent to
```
#### Top
```jsx
```
#### Top Right
```jsx
```
#### Left
```js
```
#### Center
```jsx
```
#### Rigth
```jsx
```
#### Bottom Left
```js
```
#### Bottom
```jsx
```
#### Bottom Right
```jsx
```
#### Left to Right, aligned Top
```js
```
#### Left to Right
```jsx
```
#### Left to Right, aligned Bottom
```jsx
```
#### Right to Left, aligned Top
```js
```
#### Right to Left
```jsx
```
#### Right to Left, aligned Bottom
```jsx
```
#### Left, aligned Top to Bottom
```js
```
#### Center, aligned Top to Bottom
```jsx
```
#### Right, aligned Top to Bottom
```jsx
```
### `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:
```js
```
You could make use of `Col1`:
```js
import { Col1 } from 'react-native-col';
;
```
Here are all possible pre-defined `flex` values:
```js
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:
```js
// ...
// ...
```
### `create(Col|Row)`
```ts
createCol(BaseComponent: ComponentType)
```
```ts
createRow(BaseComponent: ComponentType)
```
Utility functions to generate all positioning shortcuts based on your `BaseComponent` of choice.
Works great with [`react-native-themesheet`](https://github.com/eightyfive/react-native-themesheet) for example:
```ts
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 (
{/* ... */}
{/* ... */}
);
}
```
### `createDialStyle`
```ts
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:
```ts
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:
```js
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`](https://github.com/hyrwork/react-native-row) for the initial `dial` idea