{"id":19236692,"url":"https://github.com/pavlelekic/react-native-gridview","last_synced_at":"2025-04-21T05:32:32.448Z","repository":{"id":57336675,"uuid":"80929190","full_name":"pavlelekic/react-native-gridview","owner":"pavlelekic","description":"A React Native component that renders a grid of items. It uses ListView under the hood.","archived":false,"fork":false,"pushed_at":"2019-03-06T07:09:20.000Z","size":134,"stargazers_count":17,"open_issues_count":2,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-11T00:02:07.971Z","etag":null,"topics":["grid","gridview","listview","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/pavlelekic.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":"2017-02-04T15:44:31.000Z","updated_at":"2023-07-09T01:02:04.000Z","dependencies_parsed_at":"2022-09-11T09:00:27.145Z","dependency_job_id":null,"html_url":"https://github.com/pavlelekic/react-native-gridview","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavlelekic%2Freact-native-gridview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavlelekic%2Freact-native-gridview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavlelekic%2Freact-native-gridview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavlelekic%2Freact-native-gridview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavlelekic","download_url":"https://codeload.github.com/pavlelekic/react-native-gridview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250002296,"owners_count":21359089,"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":["grid","gridview","listview","react-native"],"created_at":"2024-11-09T16:22:22.600Z","updated_at":"2025-04-21T05:32:31.965Z","avatar_url":"https://github.com/pavlelekic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native GridView Component\n\nHere is how it looks:\n\n![alt text](https://s24.postimg.org/ir4zxi25x/Simulator_Screen_Shot_Feb_7_2017_15_09_37.png \"iPhone 5s\")\n\n## Instalation\n\nVia NPM\n\n`npm install react-native-easy-gridview --save`\n\n## Why do you need this?\n\nIf you try to make a grid view in React Native the way it is described in the docs you will encounter several problems.\nYou need to specify exact width in pixels of your items in the grid. To do that you need to measure the available width for the whole grid, and divide that number by the number of columns you wish to have. There is no way to use percentages (they are not yet supported in RN) or flexbox to define the width of items, you have to do these calculations manually.\n\nWhen you divide the available width with the number of columns, you will get a number that is most likely not a whole number, and antialiasing will kick in when rendering borders of your items. You might not care about this problem, but if you have 1px borders of your items they will not look nice and crisp.\n\nThis is why I created this component. It will fix antialiasing issues and do all these measuring and calculations for you. It uses ListView component underneath (so performance is good), and therefore accepts all the props that the original RN ListView component receives, plus one extra prop to set the number of columns (`numberOfItemsPerRow`).\n\n## Example\n\nTo run the example just do `npm install` in the `/Example` dir and then run `react-native run-ios`, or open it in Xcode and run it from there.\n\nOr you can copy this piece of code and try it out yourself:\n\n```javascript\nimport React, { Component } from 'react';\nimport {AppRegistry, View, StyleSheet, ListView, Text} from 'react-native';\nimport GridView from 'react-native-easy-gridview';\n\nconst styles = StyleSheet.create({\n    listContainer: {flex: 1, backgroundColor: 'powderblue'},\n    item: {backgroundColor: 'navajowhite', margin: 3, paddingVertical: 7, borderWidth: 4, borderColor: 'orange', alignItems: 'center', justifyContent: 'center'}\n});\n\nconst Example = React.createClass({\n    getInitialState: function() {\n        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =\u003e r1 !== r2});\n        var data = Array.apply(null, {length: 40}).map(Number.call, Number);\n\n        return {\n            dataSource: ds.cloneWithRows(data)\n        };\n    },\n\n    render: function() {\n        return (\n            \u003cView style={styles.listContainer}\u003e\n                \u003cGridView\n                    dataSource={this.state.dataSource}\n                    renderRow={this._renderRow}\n                    numberOfItemsPerRow={5}\n                    removeClippedSubviews={false}\n                    initialListSize={1}\n                    pageSize={5}\n                /\u003e\n            \u003c/View\u003e\n        );\n    },\n\n    _renderRow: function(rowData) {\n        return (\n            \u003cView style={styles.item}\u003e\n                \u003cText\u003e{rowData}\u003c/Text\u003e\n            \u003c/View\u003e\n        );\n    }\n});\n```\n\n## Props\n\n`numberOfItemsPerRow` - Like the name implies, it's the number of items per row (number of columns).\n\n[ListView props...]\n\n**Tip:** set `pageSize` to be the same as `numberOfItemsPerRow` to avoid rendering issues with ListView.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavlelekic%2Freact-native-gridview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavlelekic%2Freact-native-gridview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavlelekic%2Freact-native-gridview/lists"}