{"_id":"@adrianhwang/react-native-easy-grid","_rev":"2-a5ddbd39682e9158036ad7558cbc131a","name":"@adrianhwang/react-native-easy-grid","description":"Easy React Native Layout & Grid for the Dumb","dist-tags":{"latest":"0.1.13"},"versions":{"0.1.13":{"name":"@adrianhwang/react-native-easy-grid","description":"Easy React Native Layout & Grid for the Dumb","version":"0.1.13","dependencies":{"lodash":"^4.11.1"},"scripts":{"test":"jest"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["acorn","core-js","isarray","wordwrap","convert-source-map","source-map","which","assert-plus","esprima","path-exists","glob","object-assign","repeating","supports-color","json-stable-stringify","minimist","duplexer2","readable-stream","extend","lru-cache","minimatch","async","punycode","clone","graceful-fs","strip-bom","through2","vinyl","camelcase"]},"devDependencies":{"babel-eslint":"^6.0.4","eslint":"^2.9.0","eslint-plugin-react":"^5.0.1","eslint-plugin-react-native":"^1.0.0","babel-jest":"20.0.3","babel-preset-react-native":"1.9.2","jest":"20.0.3","react-test-renderer":"16.0.0-alpha.6","react":"16.0.0-alpha.6","react-native":"0.44.0"},"repository":{"type":"git","url":"git+https://github.com/AdrianHwang/react-native-easy-grid.git"},"main":"index.js","license":"MIT","bugs":{"url":"https://github.com/AdrianHwang/react-native-easy-grid/issues"},"homepage":"https://github.com/AdrianHwang/react-native-easy-grid#readme","author":"","gitHead":"c16bd60b726dbe91c6f012648a12ad34ab919534","_id":"@adrianhwang/react-native-easy-grid@0.1.13","_shasum":"1ad52e514056cf6418ff96383f47fbf36830d7a4","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.1","_npmUser":{"name":"adrianhwang","email":"boardsky@126.com"},"dist":{"shasum":"1ad52e514056cf6418ff96383f47fbf36830d7a4","tarball":"https://registry.npmjs.org/@adrianhwang/react-native-easy-grid/-/react-native-easy-grid-0.1.13.tgz","integrity":"sha512-sehU+WDIB/QYnPVVwrUrAhGq3X+trPLy2lKvuLj8FPTsqCxEuMRR02806h+7psd5Q9+6eTHOUew5U/DiCZX2TA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPKYkmU08nsV875nYWsZyAk5AM89xn3y2l9R1DKQRF1wIgOgh+DDUz9MSgiSLQD0o5nock/lBbGNMRY1SXpmkxrX8="}]},"maintainers":[{"name":"adrianhwang","email":"boardsky@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-easy-grid-0.1.13.tgz_1503393965568_0.7890602753031999"}}},"readme":"# React Native Easy Grid 🐵\n![Master Build Status](https://travis-ci.org/GeekyAnts/react-native-easy-grid.svg?branch=master) <br />\n\nThis is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.\n\n## Installation\n\n```\nnpm install react-native-easy-grid --save\n```\n\n## Usage\n\n### Include the components\n\n```\nimport { Col, Row, Grid } from \"react-native-easy-grid\";\n```\n\n### 1. Two columns (50% and 50%)\n\n```\n<Grid>\n    <Col></Col>\n    <Col></Col>\n</Grid>\n```\n\n![col-50-50](Examples/col-50-50.png \"Column 50% and 50% example\")\n\n\n\n> Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings\n\n### 2. Two rows\n\n```\n<Grid>\n    <Row></Row>\n    <Row></Row>\n</Grid>\n```\n\n![row-50-50](Examples/row-50-50.png \"Row 50% and 50% example\")\n\n\n### 3. Two rows (75% and 25%)\n\n```\n<Grid>\n    <Row size={75}></Row>\n    <Row size={25}></Row>\n</Grid>\n```\n\nThis is exactly same as\n\n```\n<Grid>\n    <Row size={3}></Row>\n    <Row size={1}></Row>\n</Grid>\n```\n\n![row-75-25](Examples/row-75-25.png \"Row 75% and 25% example\")\n\n> Same concept applies to `<Col />`\n\n\n### 4. Three columns (33.33% each)\n\n```\n<Grid>\n    <Col></Col>\n    <Col></Col>\n    <Col></Col>\n</Grid>\n```\n![col-33-33-33](Examples/col-33-33-33.png \"Column 33.33% each\")\n\n### 5. Three rows (50%, 25% and 25%)\n\n```\n<Grid>\n    <Row size={2}></Row>\n    <Row size={1}></Row>\n    <Row size={1}></Row>\n</Grid>\n```\n\n![row-50-25-25](Examples/row-50-25-25.png \"Row 50%, 25% and 50% example\")\n\n### 6. Nested Layout or Grid\n\n<table width=\"100\" height=\"100\">\n    <tr>\n        <td rowspan=\"2\" bgcolor=\"red\" width=\"50\">1</td>\n        <td bgcolor=\"yellow\" width=\"50\" height=\"50\">2</td>\n    </tr>\n    <tr>\n        <td bgcolor=\"blue\">3</td>\n    </tr>\n</table>\n\n```\n<Grid>\n    <Col>\n        <Text>1</Text>\n    </Col>\n    <Col>\n        <Row>\n            <Text>2</Text>\n        </Row>\n        <Row>\n            <Text>3</Text>\n        </Row>\n    </Col>\n</Grid>\n```\n\n![complex](Examples/complex.png \"Complex and Nested Layouts\")\n\n\n\n### 7. Fixed width and fluid width combination\n\n```\n<Grid>\n    <Col style={{ width: 40 }}>\n        <Text>Fixed width</Text>\n    </Col>\n    <Col>\n        <Text>Fluid width</Text>\n    </Col>\n</Grid>\n```\n\n![col-fluid-fixed.png](Examples/col-fluid-fixed.png \"Column fluid and fixed example\")\n\n\n### 8. Fixed height and fluid height combination\n\n```\n<Grid>\n    <Row style={{ height: 40 }}>\n        <Text>Fixed width</Text>\n    </Row>\n    <Row>\n        <Text>Fluid width</Text>\n    </Row>\n</Grid>\n```\n\nDo you think anything could be simpler than that? This repo is part of our bigger project called [NativeBase.io](http://nativebase.io). Do check that!\n\n# Important note about usage with `<ScrollView />`\n\n> Note: If you're using `<Row />` inside a `<ScrollView />`, the height of the <Row /> component would be flexible according to the content, though you can always apply the `height` styling.\n","maintainers":[{"name":"adrianhwang","email":"boardsky@126.com"}],"time":{"modified":"2022-06-12T14:19:40.838Z","created":"2017-08-22T09:26:05.654Z","0.1.13":"2017-08-22T09:26:05.654Z"},"homepage":"https://github.com/AdrianHwang/react-native-easy-grid#readme","repository":{"type":"git","url":"git+https://github.com/AdrianHwang/react-native-easy-grid.git"},"bugs":{"url":"https://github.com/AdrianHwang/react-native-easy-grid/issues"},"license":"MIT","readmeFilename":"README.md"}