{"id":15649542,"url":"https://github.com/a-tokyo/react-native-flex-grid","last_synced_at":"2025-12-30T20:30:05.009Z","repository":{"id":65339498,"uuid":"582491848","full_name":"a-tokyo/react-native-flex-grid","owner":"a-tokyo","description":"🎨 A react-native flexbox grid similar to bootstap's web grid.","archived":false,"fork":false,"pushed_at":"2025-05-31T14:03:12.000Z","size":939,"stargazers_count":50,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-15T08:38:24.279Z","etag":null,"topics":["12-columns","awesome","bootstrap","configurable","customizable","design","expo","flexbox","flowtype","grid","layout","n-columns","netlify","react","react-native","react-native-web","storybook","style","typescript"],"latest_commit_sha":null,"homepage":"https://react-native-flex-grid.ahmedtokyo.com/?path=/docs/components-layout--layout","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/a-tokyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["a-tokyo"],"buy_me_a_coffee":"ahmedtokyo"}},"created_at":"2022-12-27T02:20:18.000Z","updated_at":"2025-08-01T19:23:44.000Z","dependencies_parsed_at":"2023-12-15T22:00:51.564Z","dependency_job_id":"3098492f-ef00-4d79-b968-dcda178fd724","html_url":"https://github.com/a-tokyo/react-native-flex-grid","commit_stats":{"total_commits":82,"total_committers":3,"mean_commits":"27.333333333333332","dds":"0.18292682926829273","last_synced_commit":"1bf00c8f7c6f48c51aee9cfb57cc680c5a7e1347"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/a-tokyo/react-native-flex-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-flex-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-flex-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-flex-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-flex-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-tokyo","download_url":"https://codeload.github.com/a-tokyo/react-native-flex-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-flex-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274595107,"owners_count":25314015,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["12-columns","awesome","bootstrap","configurable","customizable","design","expo","flexbox","flowtype","grid","layout","n-columns","netlify","react","react-native","react-native-web","storybook","style","typescript"],"created_at":"2024-10-03T12:30:05.874Z","updated_at":"2025-12-30T20:30:04.946Z","avatar_url":"https://github.com/a-tokyo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/a-tokyo","https://buymeacoffee.com/ahmedtokyo"],"categories":[],"sub_categories":[],"readme":"# react-native-flex-grid\n\nA react-native flexbox grid similar to [bootstap](https://getbootstrap.com)'s web grid.\n\n\u003ca href=\"https://npmjs.com/package/react-native-flex-grid\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-native-flex-grid.svg\"\u003e\u003c/img\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/react-native-flex-grid.svg\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=ahmad_tokyo\"\u003e\u003cimg src=\"https://img.shields.io/twitter/follow/ahmad_tokyo.svg?label=Follow%20@ahmad_tokyo\" alt=\"Follow @ahmad_tokyo\"\u003e\u003c/img\u003e\u003c/a\u003e\n\n\u003ca href=\"https://react-native-flex-grid.ahmedtokyo.com\"\u003e\n\u003cimg src=\"https://i.imgur.com/VWFX2r6.png\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\nCheck the [DEMO](https://react-native-flex-grid.ahmedtokyo.com), built with [Storybook](https://storybook.js.org) and [react-native-web](https://necolas.github.io/react-native-web).\n\n# Getting Started\n\n## Installation\n\nNPM:\n\n```bash\nnpm install --save react-native-flex-grid\n```\n\nYARN:\n\n```bash\nyarn add react-native-flex-grid\n```\n\n## Usage\n\n```jsx\nimport { Container, Row, Col } from 'react-native-flex-grid';\n\nconst MyComponent = (\n  \u003cContainer fluid\u003e\n    \u003cRow\u003e\n      \u003cCol\u003e\n        \u003cText\u003e.col\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol\u003e\n        \u003cText\u003e.col\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol\u003e\n        \u003cText\u003e.col\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol\u003e\n        \u003cText\u003e.col\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol\u003e\n        \u003cText\u003e.col\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol xs=\"3\"\u003e\n        \u003cText\u003e.col-3\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol xs=\"auto\"\u003e\n        \u003cText\u003e.col-auto - variable width content\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol xs=\"3\"\u003e\n        \u003cText\u003e.col-3\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol xs=\"6\"\u003e\n        \u003cText\u003e.col-6\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol xs=\"6\"\u003e\n        \u003cText\u003e.col-6\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol xs=\"6\" sm=\"4\"\u003e\n        \u003cText\u003e.col-6 .col-sm-4\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol xs=\"6\" sm=\"4\"\u003e\n        \u003cText\u003e.col-6 .col-sm-4\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol sm=\"4\"\u003e\n        \u003cText\u003e.col-sm-4\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol sm={5} smOrder={2} smOffset={1}\u003e\n        \u003cText\u003e.col-sm-5 .order-sm-2 .offset-sm-1\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol sm={5} smOrder={1} smOffset={1}\u003e\n        \u003cText\u003e.col-sm-5 .order-sm-1 .offset-sm-1\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol md={6} mdOffset={3} sm={12}\u003e\n        \u003cText\u003e.col-sm-12 .col-md-6 .offset-md-3\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n      \u003cCol sm=\"auto\" smOffset={1}\u003e\n        \u003cText\u003e.col-sm-auto .offset-sm-1\u003c/Text\u003e\n      \u003c/Col\u003e\n      \u003cCol sm=\"auto\" smOffset={1}\u003e\n        \u003cText\u003e.col-sm-auto .offset-sm-1\u003c/Text\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n  \u003c/Container\u003e\n);\n\nexport default MyComponent;\n```\n\n#### Component Props - can be used to customize Layout components\n\nContainer\n\n```tsx\nexport declare interface ContainerProps\n  extends React.ComponentProps\u003ctypeof View\u003e {\n  /** Fluid Container */\n  fluid?: boolean;\n  /** No Padding */\n  noPadding?: boolean;\n  /** Element to render - defaults to View */\n  Element?: React.ElementType;\n}\n```\n\nRow\n\n```tsx\nexport declare interface RowProps extends React.ComponentProps\u003ctypeof View\u003e {\n  /** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */\n  gx?: 0 | 1 | 2 | 3 | 4 | 5;\n  /** Direction */\n  dir?: 'ltr' | 'rtl';\n  /** Element to render - defaults to View */\n  Element?: React.ElementType;\n}\n```\n\nCol\n\n```tsx\nexport declare interface ColProps extends React.ComponentProps\u003ctypeof View\u003e {\n  /** xs size */\n  xs?: number | string;\n  /** sm size */\n  sm?: number | string;\n  /** md size */\n  md?: number | string;\n  /** lg size */\n  lg?: number | string;\n  /** xl size */\n  xl?: number | string;\n  /** xs offset */\n  xsOffset?: number | string;\n  /** sm offset */\n  smOffset?: number | string;\n  /** md offset */\n  mdOffset?: number | string;\n  /** lg offset */\n  lgOffset?: number | string;\n  /** xl offset */\n  xlOffset?: number | string;\n  /** xs order */\n  xsOrder?: number | string;\n  /** sm order */\n  smOrder?: number | string;\n  /** md order */\n  mdOrder?: number | string;\n  /** lg order */\n  lgOrder?: number | string;\n  /** xl order */\n  xlOrder?: number | string;\n  /** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */\n  gx?: 0 | 1 | 2 | 3 | 4 | 5;\n  /** Direction */\n  dir?: 'ltr' | 'rtl';\n  /** Element to render - defaults to View */\n  Element?: React.ElementType;\n}\n```\n\n### Modifying Grid Configuration\n\nThe grid is 100% modifiable, checkout the [detailed docs](https://react-native-flex-grid.ahmedtokyo.com/?path=/story/utils-grid--page)\n\n### Responsive utils\n\nCheckout the [detailed docs](https://react-native-flex-grid.ahmedtokyo.com/?path=/story/utils-responsive--page) for a set of useful responsive utilities like css/scss like media queries.\n\n### Development\n\nCheckout the [detailed docs](https://react-native-flex-grid.ahmedtokyo.com/?path=/story/development--page) to understand how to run the repo locally and how to develop with it.\n\n### Helpful resources\n\n- [Blogpost](https://ahmedtokyo.com/blog/2022/react-native-flex-grid)\n- [Bootstrap layout documentation](https://getbootstrap.com/docs/5.0/layout)\n- [Reactstrap layout documentation](https://reactstrap.github.io/?path=/docs/components-layout--layout)\n- [React Native Extended StyleSheet](https://github.com/vitalets/react-native-extended-stylesheet)\n\n### Contributing\n\nPull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-tokyo%2Freact-native-flex-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-tokyo%2Freact-native-flex-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-tokyo%2Freact-native-flex-grid/lists"}