{"id":21404711,"url":"https://github.com/eightyfive/react-native-col","last_synced_at":"2025-07-19T00:36:46.277Z","repository":{"id":37382209,"uuid":"167319349","full_name":"eightyfive/react-native-col","owner":"eightyfive","description":"Flexbox made easy \u0026 semantic","archived":false,"fork":false,"pushed_at":"2025-01-23T17:45:58.000Z","size":1713,"stargazers_count":14,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-27T02:46:32.163Z","etag":null,"topics":["column","flexbox","react-native","row"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eightyfive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-24T06:59:18.000Z","updated_at":"2025-01-23T17:46:02.000Z","dependencies_parsed_at":"2023-02-08T07:30:57.811Z","dependency_job_id":null,"html_url":"https://github.com/eightyfive/react-native-col","commit_stats":null,"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/eightyfive/react-native-col","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-col","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-col/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-col/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-col/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eightyfive","download_url":"https://codeload.github.com/eightyfive/react-native-col/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-col/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265220050,"owners_count":23729750,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["column","flexbox","react-native","row"],"created_at":"2024-11-22T16:17:40.391Z","updated_at":"2025-07-13T23:30:25.759Z","avatar_url":"https://github.com/eightyfive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-native-col`\n\nFlexbox made easy \u0026 semantic\n\n```\n┌─────────────┐\n│ TL   T   TR │\n│             │\n│ L    C    R │\n│             │\n│ BL   B   BR │\n└─────────────┘\n```\n\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n  - [`Col`](#col)\n  - [`Row`](#row)\n  - [`Col0`, `Col1`, `Row7`... (Flex)](#col0-col1-row7-flex)\n  - [`create(Col|Row)`](#createcolrow)\n  - [`createDialStyle`](#createdialstyle)\n  - [`(col|row|flex)Styles`](#colrowflexstyles)\n- [Credits](#credits)\n\n## Install\n\n```\nyarn add react-native-col\n```\n\n## Usage\n\n### Before\n\n```js\nimport { View } from 'react-native';\n\n\u003cView\n  style={{\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'flex-start',\n  }}\n/\u003e;\n```\n\n### After\n\n```js\nimport { Row } from 'react-native-col';\n\n// \"Top Right\"\n\u003cRow.TR /\u003e;\n```\n\n## API\n\nAll demos use these 3 RGB squares:\n\n```js\nimport { View } from 'react-native';\n\nconst square = {\n  minWidth: 50,\n  minHeight: 50,\n};\n\nconst $ = {\n  // Red\n  r: {\n    ...square,\n    backgroundColor: 'red',\n  },\n  // Green\n  g: {\n    ...square,\n    backgroundColor: 'green',\n  },\n  // Blue\n  b: {\n    ...square,\n    backgroundColor: 'blue',\n  },\n};\n\nconst Red = () =\u003e \u003cView style={$.r} /\u003e;\n\nconst Green = () =\u003e \u003cView style={$.g} /\u003e;\n\nconst Blue = () =\u003e \u003cView style={$.b} /\u003e;\n```\n\nAlso assume that all `Col` and `Row` containers in demos, are `{ flex: 1 }`. Which are redacted for clarity.\n\n### `Col`\n\n```js\nimport { Col } from 'react-native-col';\n```\n\n#### Top Left\n\n```jsx\n// Equivalent to \u003cCol /\u003e\n\u003cCol.TL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.TL\u003e\n```\n\n\u003cimg src=\"images/col-top-left.png\" width=\"250\" /\u003e\n\n#### Top\n\n```jsx\n\u003cCol.T\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.T\u003e\n```\n\n\u003cimg src=\"images/col-top.png\" width=\"250\" /\u003e\n\n#### Top Right\n\n```jsx\n\u003cCol.TR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.TR\u003e\n```\n\n\u003cimg src=\"images/col-top-right.png\" width=\"250\" /\u003e\n\n#### Left\n\n```jsx\n\u003cCol.L\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.L\u003e\n```\n\n\u003cimg src=\"images/col-left.png\" width=\"250\" /\u003e\n\n#### Center\n\n```jsx\n\u003cCol.C\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.C\u003e\n```\n\n\u003cimg src=\"images/col-center.png\" width=\"250\" /\u003e\n\n#### Right\n\n```jsx\n\u003cCol.R\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.R\u003e\n```\n\n\u003cimg src=\"images/col-right.png\" width=\"250\" /\u003e\n\n#### Bottom Left\n\n```js\n\u003cCol.BL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.BL\u003e\n```\n\n\u003cimg src=\"images/col-bottom-left.png\" width=\"250\" /\u003e\n\n#### Bottom\n\n```jsx\n\u003cCol.B\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.B\u003e\n```\n\n\u003cimg src=\"images/col-bottom.png\" width=\"250\" /\u003e\n\n#### Bottom Right\n\n```jsx\n\u003cCol.BR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.BR\u003e\n```\n\n\u003cimg src=\"images/col-bottom-right.png\" width=\"250\" /\u003e\n\n#### Top to Bottom, aligned Left\n\n```js\n\u003cCol.TBL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.TBL\u003e\n```\n\n\u003cimg src=\"images/col-top-bottom-left.png\" width=\"250\" /\u003e\n\n#### Top to Bottom\n\n```jsx\n\u003cCol.TB\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.TB\u003e\n```\n\n\u003cimg src=\"images/col-top-bottom.png\" width=\"250\" /\u003e\n\n#### Top to Bottom, aligned Right\n\n```jsx\n\u003cCol.TBR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.TBR\u003e\n```\n\n\u003cimg src=\"images/col-top-bottom-right.png\" width=\"250\" /\u003e\n\n#### Bottom to Top, aligned Left\n\n```js\n\u003cCol.BTL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.BTL\u003e\n```\n\n\u003cimg src=\"images/col-bottom-top-left.png\" width=\"250\" /\u003e\n\n#### Bottom to Top\n\n```jsx\n\u003cCol.BT\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.BT\u003e\n```\n\n\u003cimg src=\"images/col-bottom-top.png\" width=\"250\" /\u003e\n\n#### Bottom to Top, aligned Right\n\n```jsx\n\u003cCol.BTR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.BTR\u003e\n```\n\n\u003cimg src=\"images/col-bottom-top-right.png\" width=\"250\" /\u003e\n\n#### Top, aligned Left to Right\n\n```jsx\n\u003cCol.LRT\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.LRT\u003e\n```\n\n\u003cimg src=\"images/col-left-right-top.png\" width=\"250\" /\u003e\n\n#### Center, aligned Left to Right\n\n```jsx\n\u003cCol.LRC\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.LRC\u003e\n```\n\n\u003cimg src=\"images/col-left-right-center.png\" width=\"250\" /\u003e\n\n#### Bottom, aligned Left to Right\n\n```jsx\n\u003cCol.LRB\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col.LRB\u003e\n```\n\n\u003cimg src=\"images/col-left-right-bottom.png\" width=\"250\" /\u003e\n\n### `Row`\n\n```js\nimport { Row } from 'react-native-col';\n```\n\n#### Top Left\n\n```js\n// Equivalent to \u003cRow /\u003e\n\u003cRow.TL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.TL\u003e\n```\n\n\u003cimg src=\"images/row-top-left.png\" width=\"250\" /\u003e\n\n#### Top\n\n```jsx\n\u003cRow.T\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.T\u003e\n```\n\n\u003cimg src=\"images/row-top.png\" width=\"250\" /\u003e\n\n#### Top Right\n\n```jsx\n\u003cRow.TR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.TR\u003e\n```\n\n\u003cimg src=\"images/row-top-right.png\" width=\"250\" /\u003e\n\n#### Left\n\n```js\n\u003cRow.L\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.L\u003e\n```\n\n\u003cimg src=\"images/row-left.png\" width=\"250\" /\u003e\n\n#### Center\n\n```jsx\n\u003cRow.C\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.C\u003e\n```\n\n\u003cimg src=\"images/row-center.png\" width=\"250\" /\u003e\n\n#### Rigth\n\n```jsx\n\u003cRow.R\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.R\u003e\n```\n\n\u003cimg src=\"images/row-right.png\" width=\"250\" /\u003e\n\n#### Bottom Left\n\n```js\n\u003cRow.BL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.BL\u003e\n```\n\n\u003cimg src=\"images/row-bottom-left.png\" width=\"250\" /\u003e\n\n#### Bottom\n\n```jsx\n\u003cRow.B\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.B\u003e\n```\n\n\u003cimg src=\"images/row-bottom.png\" width=\"250\" /\u003e\n\n#### Bottom Right\n\n```jsx\n\u003cRow.BR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.BR\u003e\n```\n\n\u003cimg src=\"images/row-bottom-right.png\" width=\"250\" /\u003e\n\n#### Left to Right, aligned Top\n\n```js\n\u003cRow.LRT\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.LRT\u003e\n```\n\n\u003cimg src=\"images/row-left-right-top.png\" width=\"250\" /\u003e\n\n#### Left to Right\n\n```jsx\n\u003cRow.LR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.LR\u003e\n```\n\n\u003cimg src=\"images/row-left-right.png\" width=\"250\" /\u003e\n\n#### Left to Right, aligned Bottom\n\n```jsx\n\u003cRow.LRB\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.LRB\u003e\n```\n\n\u003cimg src=\"images/row-left-right-bottom.png\" width=\"250\" /\u003e\n\n#### Right to Left, aligned Top\n\n```js\n\u003cRow.RLT\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.RLT\u003e\n```\n\n\u003cimg src=\"images/row-right-left-top.png\" width=\"250\" /\u003e\n\n#### Right to Left\n\n```jsx\n\u003cRow.RL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.RL\u003e\n```\n\n\u003cimg src=\"images/row-right-left.png\" width=\"250\" /\u003e\n\n#### Right to Left, aligned Bottom\n\n```jsx\n\u003cRow.RLB\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.RLB\u003e\n```\n\n\u003cimg src=\"images/row-right-left-bottom.png\" width=\"250\" /\u003e\n\n#### Left, aligned Top to Bottom\n\n```js\n\u003cRow.TBL\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.TBL\u003e\n```\n\n\u003cimg src=\"images/row-top-bottom-left.png\" width=\"250\" /\u003e\n\n#### Center, aligned Top to Bottom\n\n```jsx\n\u003cRow.TBC\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.TBC\u003e\n```\n\n\u003cimg src=\"images/row-top-bottom-center.png\" width=\"250\" /\u003e\n\n#### Right, aligned Top to Bottom\n\n```jsx\n\u003cRow.TBR\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Row.TBR\u003e\n```\n\n\u003cimg src=\"images/row-top-bottom-right.png\" width=\"250\" /\u003e\n\n### `Col0`, `Col1`, `Row7`... (Flex)\n\nThe package also exports `Col[0-9]` and `Row[0-9]` views with pre-defined `flex` values.\n\nSo instead of writing:\n\n```js\n\u003cCol style={{ flex: 1 }}\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col\u003e\n```\n\nYou could make use of `Col1`:\n\n```js\nimport { Col1 } from 'react-native-col';\n\n\u003cCol1\u003e\n  \u003cRed /\u003e\n  \u003cGreen /\u003e\n  \u003cBlue /\u003e\n\u003c/Col1\u003e;\n```\n\nHere are all possible pre-defined `flex` values:\n\n```js\nimport {\n  Col0,\n  Col1,\n  Col2,\n  Col3,\n  Col4,\n  Col5,\n  Col6,\n  Col7,\n  Col8,\n  Col9,\n  //\n  Row0,\n  Row1,\n  Row2,\n  Row3,\n  Row4,\n  Row5,\n  Row6,\n  Row7,\n  Row8,\n  Row9,\n} from 'react-native-col';\n```\n\nYou can also use the positioning shortcuts on them:\n\n```js\n\u003cCol6.TL /\u003e\n\u003cCol0.T /\u003e\n\u003cCol2.TR /\u003e\n\u003cCol9.L /\u003e\n\u003cCol4.C /\u003e\n// ...\n\n\u003cRow7.TL /\u003e\n\u003cRow4.T /\u003e\n// ...\n```\n\n### `create(Col|Row)`\n\n```ts\ncreateCol\u003cT extends ViewProps\u003e(BaseComponent: ComponentType\u003cany\u003e)\n```\n\n```ts\ncreateRow\u003cT extends ViewProps\u003e(BaseComponent: ComponentType\u003cany\u003e)\n```\n\nUtility functions to generate all positioning shortcuts based on your `BaseComponent` of choice.\n\nWorks great with [`react-native-themesheet`](https://github.com/eightyfive/react-native-themesheet) for example:\n\n```ts\nimport { createTheme } from 'react-native-themesheet';\n\n// src/lib/theme.ts\nexport const { createBox } = createTheme(\n  { primary: '#ff00dd' },\n  { s: 4, m: 8, l: 16, xl: 32 }\n);\n\n// src/lib/index.ts\nimport { View } from 'react-native';\nimport { createCol } from 'react-native-col';\n\nimport { createBox } from './theme';\n\nconst Box = createBox(View);\n\nexport const Col = createCol(Box);\n\nexport const Row = createRow(Box);\n\n// src/screens/home.tsx\nimport { Col, Row } from '../lib';\n\nexport function Home() {\n  return (\n    \u003cCol.C py=\"xl\" mb=\"l\"\u003e\n      {/* ... */}\n    \u003c/Col.C\u003e\n    \u003cRow.LR p=\"m\" mb=\"m\"\u003e{/* ... */}\u003c/Row.LR\u003e\n  );\n}\n```\n\n### `createDialStyle`\n\n```ts\ntype Dial = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9\n\ncreateDialStyle(flexDirection: 'row' | 'column', dial: Dial): ViewStyle\n```\n\nUtility function to generate Flex \"dial\" positioning _raw_ styles.\n\nThink of your Flexbox container as a dial number pad:\n\n```\n┌─────────────┐\n│ 1    2    3 │\n│             │\n│ 4    5    6 │\n│             │\n│ 7    8    9 │\n└─────────────┘\n```\n\nYou can then align container items according to the \"dial\" number:\n\n```ts\nimport { createDialStyle as dial } from 'react-native-col';\n\ndial('column', 3); // --\u003e col direction, justified right (flex-end), aligned Top\n\ndial('row', 8); // --\u003e row direction, justified center, aligned bottom\n\n// Etc\n```\n\n### `(col|row|flex)Styles`\n\nAll react-native `StyleSheet` styles used by the library are re-exported:\n\n```js\nimport { colStyles, rowStyles, flexStyles } from 'react-native-col';\n\ncolStyles.col;\ncolStyles.TR;\ncolStyles.T;\n// Etc...\n\nrowStyles.row;\nrowStyles.B;\nrowStyles.BR;\n// Etc...\n\nflexStyles.f0;\nflexStyles.f1;\nflexStyles.f2;\n// Etc...\n```\n\n## Credits\n\n- [`react-native-row`](https://github.com/hyrwork/react-native-row) for the initial `dial` idea\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightyfive%2Freact-native-col","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feightyfive%2Freact-native-col","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightyfive%2Freact-native-col/lists"}