{"id":13679264,"url":"https://github.com/idibidiart/react-native-responsive-grid","last_synced_at":"2025-04-29T18:31:51.914Z","repository":{"id":57339535,"uuid":"87382011","full_name":"idibidiart/react-native-responsive-grid","owner":"idibidiart","description":"Bringing the Web's Responsive Design to React Native","archived":false,"fork":false,"pushed_at":"2020-01-09T05:06:43.000Z","size":389,"stargazers_count":381,"open_issues_count":2,"forks_count":40,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-26T11:42:10.998Z","etag":null,"topics":["android","flexbox","grid","ios","layout","orientation-changes","react","react-native","responsive","responsive-design","responsive-layout","universal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idibidiart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-06T03:22:47.000Z","updated_at":"2025-04-01T12:34:46.000Z","dependencies_parsed_at":"2022-09-13T04:02:04.251Z","dependency_job_id":null,"html_url":"https://github.com/idibidiart/react-native-responsive-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idibidiart%2Freact-native-responsive-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idibidiart%2Freact-native-responsive-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idibidiart%2Freact-native-responsive-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idibidiart%2Freact-native-responsive-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idibidiart","download_url":"https://codeload.github.com/idibidiart/react-native-responsive-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251560016,"owners_count":21609123,"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":["android","flexbox","grid","ios","layout","orientation-changes","react","react-native","responsive","responsive-design","responsive-layout","universal"],"created_at":"2024-08-02T13:01:03.721Z","updated_at":"2025-04-29T18:31:51.671Z","avatar_url":"https://github.com/idibidiart.png","language":"JavaScript","funding_links":["https://opencollective.com/react-native-responsive-grid"],"categories":["JavaScript"],"sub_categories":[],"readme":"\n\n[![NPM](https://nodei.co/npm/react-native-responsive-grid.png?compact=false)](https://npmjs.org/package/react-native-responsive-grid)\n\n[![Backers on Open Collective](https://opencollective.com/react-native-responsive-grid/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-native-responsive-grid/sponsors/badge.svg)](#sponsors)\n\n# React Native Library for Responsive and Universal Apps\n\n### Pending Proposals\n\nAll issues that are not bugs are appropriately labeled and closed.\n\nFor now we have three kinds of non-bug issues that are open:\n\n- [Pending Proposals](https://github.com/idibidiart/react-native-responsive-grid/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+label%3Aproposal+label%3Apending)\n\n- [Pending Questions](https://github.com/idibidiart/react-native-responsive-grid/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+label%3Aquestion+label%3Apending)\n\n\n### Install\n\nIn your project folder, `yarn add react-native-responsive-grid`\n\n*For best results, use React Native 0.50 or later \n\n## Predictable Responsive Layout\n\nThis grid is based on row and column components that can be nested in an alternating pattern to build a responsive and adaptive 'tree of Views' of any shape and depth. It eschews complicated Flexbox-based size constraints in favor of simple percentage-based size constraints. And it does so while using Flexbox-based vertical and horizontal alignment constraints. \n\nA Column may contain one or more Rows, each of which may contain one or more Columns, each of which may contain one or more Rows, and so on. Both Rows and Columns can be styled using predictable, percentage-based dimensions and, in case of Columns, percentage-based horizontal `offset`.\n\nRows can be aligned inside Columns, vertically (along main axis,) and aligned and stretched horizontally (along cross axis.) Columns can be aligned inside Rows, horizontally (along main axis), and and aligned and stretched vertically (along cross axis.) Additionally, the lines created within a Row that wraps may be aligned and stretched vertically relative to a parent Column. \n\nWith these basic features, we can build the entire UI component tree (or an individual component's subtree) as a consistent, repeatable and recursive pattern, one that has predictable and dynamic --not only static-- responsiveness and the ability to trigger specific adaptive behavior. \n\n_When To Use Flexbox Sizing:_ \n\n_In some cases when having an absolutely sized view followed (vertically or horizontally) by a view that must take up the remaining space, we'll need to use a wrapping grid element -- Column (to wrap vertical layout) or Row (to wrap horizontal layout) -- with style={{flex: 1}} and same on the Flex sized element that it wraps along with the absolutely sized element. However, such mixing of absolute and Flex sizing is not recommended as it won't lead to a fully responsive UI layout._\n\n_The only other reason to use Flexbox grow/shrink sizing with this Grid is for grow-and-shrink-in-place UI (aka \"squishy\" UI) where elements shrink and grow in elastic fashion and relative to each other instead of undergoing dynamic layout change and/or staying in proportion to screen width._ \n\n## Examples\n\nYou may use this grid to build responsive 2D layouts that maintain their relative proportions, change their basic structure in a predictable way and dynamically decide what content to display, based on screen size, aspect ratio, and orientation.  \n\n## [Example 1: Universal, Responsive Pinterest Layout](https://www.youtube.com/watch?v=QyIRoKinyLU)\n[![\u003e\u003e universal pinterest layout \u003c\u003c](https://img.youtube.com/vi/QyIRoKinyLU/0.jpg)](https://www.youtube.com/watch?v=QyIRoKinyLU)\n\n## [Example 2: Reponsive Tiles for Universal Apps](https://www.youtube.com/watch?v=OPUKz9wQ1Ks)\n[![\u003e\u003e universal tiles demo \u003c\u003c](https://img.youtube.com/vi/OPUKz9wQ1Ks/0.jpg)](https://www.youtube.com/watch?v=OPUKz9wQ1Ks)\n\n## [Example 3: Selecting an image with the right aspect ratio](https://www.youtube.com/watch?v=Nghqc5QFln8)\n[![\u003e\u003e aspectRatio demo \u003c\u003c](https://img.youtube.com/vi/Nghqc5QFln8/0.jpg)](https://www.youtube.com/watch?v=Nghqc5QFln8)\n\n## [Example 4: Responsive Break Points (Row Wrapping)](https://www.youtube.com/watch?v=GZ1uxWEVAuQ) \n[![\u003e\u003e responsive break points demo \u003c\u003c](https://img.youtube.com/vi/GZ1uxWEVAuQ/0.jpg)](https://www.youtube.com/watch?v=GZ1uxWEVAuQ)\n\n## [Example 5: FlatList + Row \u0026 Column Wrapping](https://www.youtube.com/watch?v=qLqxat3wX_8)\n[![\u003e\u003e FlatList Demo \u003c\u003c](https://img.youtube.com/vi/qLqxat3wX_8/0.jpg)](https://www.youtube.com/watch?v=qLqxat3wX_8)\n\nThe demos in the videos above show some of the possibilities, but this grid is capable of more complex responsive and adaptive behavior.\n\n### Example 1: Universal, Responsive Pinterest Layout\n\nThis examples showcases 2-dimensional Constraint-Based Layout using a custom layout in a few lines of code. Flexbox fails us here in that it does not support a 2-dimensional constraint layout. This is precisely why React Native needs native support for display:'grid' Until then you may use this grid with your own constraint-based layout. This example shows a simplified Pinterest-like layout. You may extend it to build a masonry effect using a box packing algorithm and Flexbox's 1-dimensional constraint-based elastic layout. One thing this grid is not designed to do is to implement transitions but it can be forked and extended to do that (would happy take a PR.) \n\n[Source Code for Example 1](https://github.com/idibidiart/react-native-responsive-grid/blob/master/UniversalPinterestLayout.md)\n\n### Example 2: Reponsive Tiles for Universal Apps\n\nThis examples showcases the grid's 1-dimensional Constraint-Based Layout using Flexbox wrapping behavior. \n\nThe problem it solves is how to make a tiled screen layout that looks consistent across all screen sizes and aspect ratios, It involves the following:\n\n1. How to size tiles such that they change size relative to the size of the screen *as well as* retain their shape (width/height aspect ratio)\n\n2. How do we hide/show tiles on demand and fill the void left by hidden tiles.\n\nThe goal is how to do the above in an elegant and declarative way that allows the average user to work without all the tedious implementation details of doing it in row Flexbox and JS. \n\n_This example also showes how to use alignLines='stretch' for wrapped row content to have the wrapped lines fill the whole screen. It's the right way to partition a Row vertically in 1/n tall lines where n is the number of wrapping-stacked fullWidth columns._ \n\n[Source Code for Example 2](https://github.com/idibidiart/react-native-responsive-grid/blob/master/UniversalTiles.md)\n\n### Example 3: Selecting an image with the right aspect ratio\n\nIn this demo, the grid picks the image with the **closest aspect ratio** to the device aspect ratio, dynamically, taking into account the current device orientation. The images themselves must be sized and cropped by the designer so that they match the common device aspect ratios (see below) while also showing the part of the image that the designer intends to show for each aspect ratio. Since there could be many aspect ratios that correspond to different devices we should have multiple such images (and, optionally, their rotated versions.)\n\nThe following table maps some common device aspect ratios to the ratio of width/height of devices known to this developer, for both landscape and portrait device orientations. The physical device aspect ratio does not change with device rotation (i.e. a device with 16:9 aspect ratio does not become one with a 9:16 aspect ratio when it's rotated, although it does mathematically), but since the width and height get flipped when changing orientation from portrait to lanscape and vice versa, we need to have two images per each physical device aspect ratio, one for portrait mode and the other for landscape. However, if our app only supports portrait or landscape mode then we only need to have the one corresponding to that orientation. \n\n| Aspect Ratio | Width | Height | Width/Height Ratio (landscape) | Devices \n| :---: | :---: | :---: | :---: | :---: | \n| '16:9' | 568 | 320 | 1.77 | iPhone 5\n| '16:9' | 667 | 375 | 1.77 | iPhone 6 \u0026 7\n| '16:9' | 736 | 414 | 1.77 | iPhone 6 Plus \u0026 7 Plus\n| '16:10' | ? | ? | 1.6 | ?\n| '3:2' | 480 | 320 | 1.5 | iPhone 4\n| '4:3' | 1024 | 768 |  1.33 | iPad Mini, iPad Air and small iPad Pro\n| '4:3' | 1366 | 1024 | 1.33 | Large iPad Pro\n| '1:1' | 1 | ? | ? | ?\n\n| Aspect Ratio | Width | Height | Width/Height Ratio (portrait) | Devices\n| :---: | :---: | :---: | :---: | :---: | \n| '16:9' | 320 | 568 | 0.56 | iPhone 5\n| '16:9' | 375 | 667 | 0.56 | iPhone 6 \u0026 7\n| '16:9' | 414 | 736 | 0.56 | iPhone 6 Plus \u0026 7 Plus\n| '16:10' | ? | ? | 0.625| ? \n| '3:2' | 320 | 480 | 0.66 | iPhone 4\n| '4:3' | 768 | 1024 | 0.75 | iPad Mini, iPad Air and small iPad Pro\n| '4:3' | 1024 | 1366 | 0.75 | Large iPad Pro\n| '1:1' | 1 | ? | ? | ?\n\n```jsx\n\u003cGrid\u003e{(state, setState) =\u003e (\n    \u003cRow fullHeight aspectRatio={{ratio: '3:2', orientation: \"portrait\"}}\u003e\n        \u003cImage source={require('./assets/homepage hero-3-2-portrait.jpg')} style={styles.homeImage}\u003e\u003c/Image\u003e\n    \u003c/Row\u003e\n\n    \u003cRow fullHeight aspectRatio={{ratio: '3:2', orientation: \"landscape\"}}\u003e\n        \u003cImage source={require('./assets/homepage hero-3-2-landscape.jpg')} style={styles.homeImage}\u003e\u003c/Image\u003e\n    \u003c/Row\u003e\n\n    \u003cRow fullHeight aspectRatio={{ratio: '16:9', orientation: \"portrait\"}}\u003e\n        \u003cImage source={require('./assets/homepage hero-16-9-portrait.jpg')} style={styles.homeImage}\u003e\u003c/Image\u003e\n    \u003c/Row\u003e\n\n    \u003cRow fullHeight aspectRatio={{ratio: '16:9', orientation: \"landscape\"}}\u003e\n        \u003cImage source={require('./assets/homepage hero-16-9-landscape.jpg')} style={styles.homeImage}\u003e\u003c/Image\u003e\n    \u003c/Row\u003e\n  )}\n\u003c/Grid\u003e\n```\n\n### Example 4: Responsive Break Points (Row Wrapping)\n\nA more basic example of he grid's 1-Dimensional Constraint-Based Layout using Flexbox.\n\nIn the second demo, the grid folds columns in rows based on the screen-device-depebdent `xxSize` prop provided on the column (which can be percentage based, e.g. smSize, or point based, e.g. smSizePoints. This means that different break points can be supplied for the different screen sizes in both absolute and relative terms. This example demonstrates how to get Row content (e.g. child Columns) to wrap at certain break points (which can be supplied per screen width)\n\nThe following are the preset screen widths (in points) at which breaks maybe specified (where row wraps columns within it into new horozintal lines):\n\n  - SMALL_Width: 375 (0-375)\n  - MEDIUM_Width: 767 (376-767)\n  - LARGE_Width: 1023 (768-1023)\n  - XLARGE_Width: 1024+\n\n  - SMALL_Height: 667 (0-667)\n  - MEDIUM_Height: 1023 (668-1023)\n  - LARGE_Height: 1365 (1024-1365)\n  - XLARGE_Height: 1366+\n\nThe preset values may be overridden with `setBreakPoints` which merges the parameter object with the defaults.  Each cutoff specifies the upper end for that range.  `XLARGE_Width` is inferred from anything above `LARGE_Width`. BreakPoints should be set early in the app such as in `index.js`.  An example overriding the `SMALL_Width`, `MEDIUM_Width`, and `LARGE_Width` break points:\n```\nimport { setBreakPoints } from 'react-native-responsive-grid';\n\nsetBreakPoints({\n  SMALL_Width: 414,\n  MEDIUM_Width: 600,\n  LARGE_Width: 1024\n})\n```\n\n```jsx\n  \u003cRow  style={{paddingTop: '6%', paddingBottom: '6%', backgroundColor: 'white', borderBottomColor: 'lightgray', borderBottomWidth: 1}}\u003e\n      \u003cCol size={80} offset={6}\u003e\n        \u003cRow\u003e\n          \u003cCol size={50} smSize={100}\u003e      \n            \u003cText style={{fontSize: 15, color: '#BD1206', fontWeight:'bold'}}\u003eMarch 9, 2017\u003c/Text\u003e\n            \u003cRow\u003e\n              \u003cCol size={5}\u003e\n                \u003cFontAwesome name='cutlery' size={17} color='gray'/\u003e\n              \u003c/Col\u003e\n              \u003cCol size={60} offset={2.5}\u003e\n                \u003cText style={{fontSize: 12, color: 'gray', lineHeight: 20}}\u003eTAKEOUT ORDER\u003c/Text\u003e\n              \u003c/Col\u003e\n            \u003c/Row\u003e\n          \u003c/Col\u003e\n          \u003cCol size={50} smSize={100}\u003e\n            \u003cText style={{fontSize: 16, color: '#0a0a0a'}}\u003eDouble Cheese Burger\u003c/Text\u003e                                                                          \n          \u003c/Col\u003e\n        \u003c/Row\u003e\n      \u003c/Col\u003e\n      \u003cCol size={14} offset={-6} hAlign='right'\u003e\n            \u003cMaterialIcons name=\"keyboard-arrow-right\" size={28} color=\"#BD1206\" style={{left: 5}} /\u003e\n      \u003c/Col\u003e\n  \u003c/Row\u003e\n```\n\n### Example 5: FlatList + Row \u0026 Column Wrapping\n\nFlatList is a virtualized replacement for React Native's old ListView component. Using FlatList as a container is supported by this grid. This example also demonstrate wrapping Column content based on screen size. See ('size' prop under the [Props](https://github.com/idibidiart/react-native-responsive-grid#props) section.) It also demonstrates who to wrap Row content (e.g. child columns) based on screen size (also see [Example 4](https://github.com/idibidiart/react-native-responsive-grid#example-4))\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n  FlatList,\n  Text,\n  ScrollView\n} from 'react-native';\n\nimport { Row, Column as Col, Grid} from 'react-native-responsive-grid'\nimport { MaterialIcons } from '@expo/vector-icons';\nimport faker from 'faker';\n\nlet j = 0\nconst randomUsers = (count = 10) =\u003e {\n  const arr = [];\n  for (let i = 0; i \u003c count; i++) {\n    arr.push({\n      key: faker.random.uuid(),\n      date: faker.date.weekday(),\n      name: faker.name.firstName(),\n      job: faker.name.jobTitle(),\n      index: j++\n    })\n  }\n  return arr\n}\n\nexport default class Home extends Component {\n  state = {\n    refreshing: false,\n    data: randomUsers(10),\n  };\n\n  onEndReached = () =\u003e {\n    const data = [\n        ...this.state.data,\n        ...randomUsers(10),\n      ]\n\n    this.setState(state =\u003e ({\n      data\n    }));\n  };\n\n  onRefresh = () =\u003e {\n    this.setState({\n      data: randomUsers(10),\n    });\n  }\n\n  render() {\n    return (\n        \u003cFlatList\n          data={this.state.data}\n          initialNumToRender={10}\n          onEndReachedThreshold={1}\n          onEndReached={this.onEndReached}\n          refreshing={this.state.refreshing}\n          onRefresh={this.onRefresh}\n          renderItem={\n            ({ item }) =\u003e {\n              return (\n                \u003cRow key={item.key} style={{paddingTop: '6%', paddingBottom: '6%', backgroundColor: 'white', borderBottomColor: 'lightgray', borderBottomWidth: 1}}\u003e\n                  \u003cCol size={80} offset={6} \u003e\n                    \u003cRow\u003e\n                      \u003cCol size={60} smSize={100}\u003e\n                        \u003cText style={{fontSize: 15, color: '#BD1206', fontWeight:'bold'}}\u003e{String(item.date)}\u003c/Text\u003e\n                        \u003cRow\u003e\n                          \u003cCol size={10}\u003e\n                            \u003cMaterialIcons name='person' size={17} color='gray'/\u003e\n                          \u003c/Col\u003e\n                          \u003cCol smSize={60} size={87.5} offset={2.5}\u003e\n                            \u003cText style={{fontSize: 12, color: 'gray', lineHeight: 20}}\u003e{item.job}\u003c/Text\u003e\n                          \u003c/Col\u003e\n                        \u003c/Row\u003e\n                      \u003c/Col\u003e\n                      \u003cCol size={40} smSize={100}\u003e\n                        \u003cText style={{fontSize: 16, color: '#0a0a0a'}}\u003e{item.name}\u003c/Text\u003e\n                      \u003c/Col\u003e \n                    \u003c/Row\u003e    \n                  \u003c/Col\u003e\n                  \u003cCol size={8} offset={-6} hAlign='right'\u003e\n                        \u003cText\u003e{item.index}\u003c/Text\u003e\n                  \u003c/Col\u003e\n                \u003c/Row\u003e\n              )\n            }}\n        /\u003e\n    )\n  }\n}\n```\n\n## Components\n\n- Row: Flexbox View with flexDirection set to 'row' with convenient props and dynamic behavior. \n\n- Col: Flexbox View with flexDirection set to 'column' with convenient props and dynamic behavior.\n\n- Grid: an optional, stateful, component with style={{flex: 1}}. The Grid uses the children-as-funnction pattern and passes its state to its children, and allows state to be declared in its props, which will have the latest screen and grid info after orientation changes. It also passes it's render-triggering async setState method to its children. \n\n**Important:**\n\n**Grid component is required if you need to re-run the render() function in response to orientation change (many examples here)** \n\n**Grid component is also required if you use aspectRatio prop on Rows or Columns since the selection of content of the closest aspect ratio requires re-running the render function after orientation change.**\n\nBelow is an example:\n\n```jsx \nexport const Home = () =\u003e (\n  \u003cGrid state={\n    {\n      someState: 'yyz', \n      anotherState: 'abc'\n    }}\u003e\n  {({state, setState}) =\u003e (\n       {/*  possibly other JSX here */}\n        \u003cCol fullWidth style={{backgroundColor: 'lightgray'}}\u003e \n          \u003cScrollView removeClippedSubviews={true} \u003e\n            \u003cRow fullHeight\u003e\n              {layout(state)}\n            \u003c/Row\u003e\n          \u003c/ScrollView\u003e\n        \u003c/Col\u003e\n      )}\n  \u003c/Grid\u003e)\n```\n\n## Utils\n\nimport { Row, Column as Col, ScreenInfo, Grid} from './grid'\n\n`ScreenInfo()` This will return the following data:\n\n```js\n{\n  mediaSize: mediaSizeWidth,\n  mediaSizeWidth,\n  mediaSizeHeight, \n  width: SCREEN_WIDTH, \n  height: SCREEN_HEIGHT, \n  aspectRatio: {currentNearestRatio, currentOrientation}\n}\n``` \n\n- mediaSize is one of `sm`, `md`, `lg`, `xl` screen width categories and is aliased to mediaSizeWidth\n- mediaSizeHeight is the same but for screen height. It's used for hiding/showing Rows wit `hidden` prop based on screen height category and for Row `size` props.  \n\nif `sizeOnly` is true it will drop aspectRatio and its 'nearest match' calculation (shaves a few ms)\n\n## Methods\n\nRow and Column both have `.hide()` and `.show()` instance methods. The instance reference you get from a ref callback will have these methods. See Example #1 for usage.\n\n## Instance Variables\n\nThese are provided mainly for unit tests, except for componentInstance`.hidden` and componentInstance`.shown` which can be used to tell the state of the component.\n\n## Props\n\nAll props are case sensitive.\n\n`aspectRatio` (see [Example 3](https://github.com/idibidiart/react-native-responsive-grid#example-3))\n\n`size` may be supplied as prop to Column (width) or Row (height). This number defines the width of the column or height of a row as a percentage of its parent view's computed or explicit width or height, respectively.  \n\n`smSize`, `mdSize`, `lgSize` and `xlSize` are device-dependent size values that are applied to Columns (which map to width percent) and Rows (which map to height percent.) In addition to their utility in deciding the size of content based on screen size (width in case of Columns and height in case of Rows), they may are also used for defining column wrapping behavior based on screen size. For example, Columns in as Row will wrap if Row width becomes smaller at smaller screen sizes.\n\n`sizePoints` may be supplied as prop to Column (which map to width points) or Row (which map to height points). This number defines the width of the column or height of a row as an asolute value in points.\n\n`smSizePoints`, `mdSizePoints`, `lgSizePoints`, and `xlSizePoints` are like their percentage-based equivalents but use point values. \n\n`offset` may be applied to Column. This number defines the marginLeft (or marginRight in csase of RTL mode) for the column as a percentage of its parent view's computed or explicitly set width. Offset values can also be negative. Default is 0. \n\n`smOffset`, `mdOffset`, `lgOffset` and `xlOffset` are device-dependent offset values that are applied to columns.\n\n`offsetPoints`, `mdOffsetPoints`, `lgOffsetPoints`, and `xlOffsetPoints` are like their percentage-based equivalents (i.e. applied to Column to produce offset) but use value in points instead of value in percent. \n\n_Using offset values in RTL mode moves things from right to left. Using them in normal LTR mode moves things from left to right. It's pretty normal to expect that. If you're working in both directions, this makes offsets more useful than using marginLeft or marginRight directly._\n\n_Specifying an offset value in normal LTR mode means marginLeft (if specified in style prop) will be overwritten by offset value. However, marginRight (if specified in style prop) will not be overwritten by the offset value. Specifying offset value in RTL mode means marginRight (if specified in style prop) will be overwritten by offset value. However, marginLeft (if specified in style prop) will not be overwritten by offset value._\n\n`smHidden`, `mdHidden`, `lgHidden` and `xlHidden` - may be applied to Column or Row which tells the parent Row or Column, respectively, to hide the affected child Column or child Row based on the current width (for child Columns) or height (for child Rows) of the screen.  \n\nThe screen-size-specific _size_ and _hidden_ props refer to the current screen width in case of Columns and current screen height in case of Rows, which changes with orientation. The _offset_ props only apply to Columns so they refer to the current screen width. \n\nThe following are the device width (for Columns) and height (for Rows) thresholds for these props:\n\nThe preset values may be overridden with `setBreakPoints` which merges the parameter object with the defaults.  Each cutoff specifies the upper end for that range.  `XLARGE_Width` is inferred from anything above `LARGE_Width`. BreakPoints should be set early in the app such as in `index.js`.  An example overriding the `SMALL_Width`, `MEDIUM_Width`, and `LARGE_Width` break points:\n```\nimport { setBreakPoints } from 'react-native-responsive-grid';\n\nsetBreakPoints({\n  SMALL_Width: 414,\n  MEDIUM_Width: 600,\n  LARGE_Width: 1024\n})\n```\n\n`vAlign` may be supplied as prop to Column to vertically align the elements and/or rows within it. Possible values are: `middle` | `center`, `top`, `bottom`, `space` and `distribute`. Default is top.\n\n`vAlign` may also be supplied as prop to Row to align the columns within it in the vertical direction. Possible values are: `top`, `middle` | `center`, `bottom`, `baseline` and `stretch`. Default is `stretch`.\n\n`hAlign` may be supplied as prop to Row to align its child Columns and/or elements within it in the horizontal direction. Possible values are: `center` | `middle`, `left`, `right`, `space` and `distribute`. Default is left.\n\n`hAlign` may also be supplied as prop to Column to align its child Rows and/or elements within it in the horizontal direction. Possible values are: `center` | `middle`, `left`, `right`, and `stretch`. Default is `stretch`.\n\n`rtl` may be supplied as prop to Row to both reverse the order of columns (or elements) inside a row as well as to set hAlign to 'right.' This is useful for right-to-left layouts. \n\n`fullHeight` may be supplied as prop to Row in place of size={100} or style={{height: '100%'}}  -- note that Rows have 0 height and width by default, but a fullHeight Row inside of a fullWidth Column will have height and width of 100% \n\n`fullWidth` may be supplied as prop to Column in place of size={100} or style={{width: '100%'}} -- note that Columns have 0 height and width by default, but a fullWidth Column inside of a fullHeight Row will have height and width of 100%\n\n`alignLines` may be supplied as prop to Row to vertically align the wrapped lines within the Row (not to be confused with the items that are inside each line.) Possible values are: top, middle, bottom, space, distribute, stretch. (See section on Aligning Wrapped Lines within Rows)\n\n`alignSelf` maybe supplied as prop to Row to override the hAlign prop of the parent Column for that Row.\nPossible values are: `auto`, `left`, `right`, `center` | `middle`, `stretch`\n\n`alignSelf` maybe supplied as prop to Column to override the vAlign prop of the parent Row for that Column.\nPossible values are: `auto`, `top`, `bottom`, `middle` | `center`, `stretch`, `baseline`\n\n`noWrap` may be supplied as prop to Row prevent child elements from wrapping. \n\n### Nesting\n\nIf you're nesting a column inside a row which is inside another column that is inside another row as below:\n\n```jsx\n  \u003cRow\u003e\n      \u003cCol size={50}\u003e\n        \u003cRow\u003e\n          \u003cCol size={50}\u003e\n            \u003cText\u003e\n              This column is 25% of the outer view's width (or 25% of the screen width if\n              the top level Row has no parent)\n            \u003c/Text\u003e\n          \u003c/Col\u003e\n        \u003c/Row\u003e\n      \u003c/Col\u003e\n  \u003c/Row\u003e\n```\n\nThe nested column's size will be the column size value (size, sm, md, lg, xl) as a percentage of the width of the preceding column in the hierarchy . \n\nThis nested percentages model applies to offsets, too. \n\n### RTL Support\n\nThis is intended for right-to-left (RTL) layouts and apps that have their text in any of the following languages: \n\n- Arabic\n- Aramaic\n- Azeri\n- Dhivehi/Maldivian\n- Hebrew\n- Kurdish (Sorani)\n- Persian/Farsi\n- Urdu\n\nNotice the reversed order of the Text relative to the physical order in the markup. Also notice that columns are justified as flex-end within the row and their content is rightAligned (except for the second column which is explicitly leftAligned to mimic the rightAligned behavior in normal ltr layout)\n\n\u003cimg src=\"https://s18.postimg.org/gr89vaghl/Screen_Shot_2017-04-07_at_6.47.22_PM.png\" width=480\u003e\n\n### Normal LTR Markup \n\n```jsx\n    \u003cRow style={{paddingTop: '11%', paddingBottom: '4%', backgroundColor: '#f3f3f3', borderBottomColor: 'lightgray', borderBottomWidth: 1}}\u003e\n        \u003cCol size={60} offset={6} \u003e\n          \u003cText style={{fontWeight: 'bold', fontSize: 18, color: 'black'}}\u003e\n          PREVIOUS ORDERS\n          \u003c/Text\u003e\n        \u003c/Col\u003e\n        \u003cCol size={30} hAlign='right'\u003e\n          \u003cText style={{ fontSize: 16, color: '#BD1206'}}\u003e\n            SEE ALL\n          \u003c/Text\u003e\n          \u003c/Col\u003e\n    \u003c/Row\u003e\n```\n\n### RTL Markup\n\nNotice the offset values work in RTL direction now. The addition of .7 offset is to mimic the fact that the left margin in the LTR layout is smaller than the right margin in that layout, whereas it's the opposite in the RTL direction. So the .7 offset is used in RTL layout instead of the 1 offset, so alignment is identical. \n\n```jsx\n    \u003cRow rtl style={{paddingTop: '11%', paddingBottom: '4%', backgroundColor: '#f3f3f3', borderBottomColor: 'lightgray', borderBottomWidth: 1}}\u003e\n        \u003cCol size={60} offset={4} \u003e\n          \u003cText style={{fontWeight: 'bold', fontSize: 18, color: 'black'}}\u003e\n          PREVIOUS ORDERS\n          \u003c/Text\u003e\n        \u003c/Col\u003e\n        \u003cCol size={30} hAlign='left'\u003e\n          \u003cText style={{ fontSize: 16, color: '#BD1206'}}\u003e\n            SEE ALL\n          \u003c/Text\u003e\n        \u003c/Col\u003e\n    \u003c/Row\u003e\n```\n\n### Utils\n\nYou may import ScreenInfo from grid and invoke inside of render() of your component to get current screen diemsnions and orientation. \n\n### Predictable, Dynamic Layout Behavior\n\nBeing able to readt to layout changes, including changes due to device rotation (for apps that allow it), is a key aspect of responsive design. This grid is designed to enable dynamic response to layout changes (see the demos at the start of this Readme)\n\nColumns and Rows have `position: 'relative'` by default to keep them within the layout flow, but they can have `position: 'absolute'` specified in style prop, for overlays and such. \n\nThe Grid component is a stateful top-level component (at root, above ScrollView, ListView, FlatList et al but below a Modal and Drawer) Grid should not be inside another Grid and it is only needed if you wish to respond to orientation and layout changes by re-running the render() function. It uses the children-as-funnction pattern to pass its state, including its dimensions and any user-defined state, along with screen dimensions, to its children. The user may define Grid state in its props. The Grid also passes it's async render-causing setState method to its children.\n\n## More Examples\n\n```jsx\nimport {Column as Col, Row} from 'react-native-responsive-grid';\n\n\u003cRow\u003e\n    \u003cCol smSize={50} mdSize={33.333} lgSize={25}\u003e\n        \u003cText\u003eFirst Column\u003c/Text\u003e\n    \u003c/Col\u003e\n\u003c/Row\u003e\n```\n\nIn the example above, on a phone in portrait mode, the Column would take up 50% of the row's computed width. On a phone in landscape nmode or a normal tablet the Column would take up 33.333% of the row's width. On a big tablet the Column would take up 25% of the row's width.\n\n```jsx\nimport {Column as Col, Row} from 'react-native-responsive-grid';\n\n\u003cRow style={{height: 20}}\u003e\n  \u003cCol smOffset={0} mdOffset={10} lgOffset={20} xlOffset={40}\u003e\n    \u003cText\u003etest\u003c/Text\u003e\n  \u003c/Col\u003e\n\u003c/Row\u003e\n```\n\nIn the example above, the text \"test\" will move further to the right with larger screen sizes.\n\n```jsx\nimport {Column as Col, Row} from 'react-native-responsive-grid';\n\n\u003cRow\u003e\n    \u003cCol smHidden\u003e\n        \u003cText\u003eColumn displayed when width is \u003c= 480\u003c/Text\u003e\n    \u003c/Col\u003e\n    \u003cCol mdHidden lgHidden xlHidden\u003e\n        \u003cText\u003eColumn displayed when width is \u003e 480\u003c/Text\u003e\n    \u003c/Col\u003e\n\u003c/Row\u003e\n```\n\nIn the example above, the column and all of it's children will be hidden on small screens like phones, but it will appear on bigger screens like tablets. The size-prefixed 'hidden' props may be applied to columns. Hidden props are all booleans. They default to false.\n\n## More Examples\n\n- [Responsive Layout](https://github.com/idibidiart/react-native-responsive-grid/blob/master/EvenMoreExamples.md#responsive-layout)\n- [Custom Components](https://github.com/idibidiart/react-native-responsive-grid/blob/master/EvenMoreExamples.md#custom-components)\n- [Wrapped Alignment](https://github.com/idibidiart/react-native-responsive-grid/blob/master/EvenMoreExamples.md#wrapped-alignment)\n\n## History\n\nBefore React Native v0.42 we didn't have a performant, declarative way of specifying percentage-based dimensions. Then came React Native v0.42 which gave us that ability. Since then several open source contributors have made responsive grids that take advantage of this new capability. This \"grid\" takes one of the simplest and most well-thought-out ones, namely, `react-native-flexbox-grid` (by @rundmt), and modifies it heavily to produce a simple yet powerful layout model that we can use to implement responsive and adaptive behavior. \n\n# Gridism\n\n## _When I first made a grid I happened to be thinking of the innocence of trees and then this grid came into my mind and I thought it represented innocence, and I still do, and so I painted it and then I was satisfied. I thought, this is my vision._ --[Agnes Martin](https://www.guggenheim.org/arts-curriculum/topic/grids)\n\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).\n\u003ca href=\"https://github.com/idibidiart/react-native-responsive-grid/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-native-responsive-grid#backer)]\n\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-native-responsive-grid#sponsor)]\n\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-responsive-grid/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-responsive-grid/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidibidiart%2Freact-native-responsive-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidibidiart%2Freact-native-responsive-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidibidiart%2Freact-native-responsive-grid/lists"}