{"id":4014,"url":"https://github.com/saleel/react-native-super-grid","last_synced_at":"2025-05-14T11:12:29.264Z","repository":{"id":37664756,"uuid":"87586656","full_name":"saleel/react-native-super-grid","owner":"saleel","description":"Responsive Grid View for React Native","archived":false,"fork":false,"pushed_at":"2025-04-02T15:06:36.000Z","size":2637,"stargazers_count":1453,"open_issues_count":4,"forks_count":155,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-01T19:03:37.401Z","etag":null,"topics":["flatlist","grid","gridview","listview","react-native","responsive","responsive-grid"],"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/saleel.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-04-07T21:01:50.000Z","updated_at":"2025-05-01T11:00:24.000Z","dependencies_parsed_at":"2024-06-12T20:38:54.698Z","dependency_job_id":"b3d186cb-fc26-4932-b795-0d88a22d70cf","html_url":"https://github.com/saleel/react-native-super-grid","commit_stats":{"total_commits":203,"total_committers":41,"mean_commits":4.951219512195122,"dds":0.541871921182266,"last_synced_commit":"268a7cc9928d50d6ce688d7ba97b47202053f44d"},"previous_names":["saleel97/react-native-super-grid"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleel%2Freact-native-super-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleel%2Freact-native-super-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleel%2Freact-native-super-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleel%2Freact-native-super-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saleel","download_url":"https://codeload.github.com/saleel/react-native-super-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129525,"owners_count":22019628,"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":["flatlist","grid","gridview","listview","react-native","responsive","responsive-grid"],"created_at":"2024-01-05T20:16:58.483Z","updated_at":"2025-05-14T11:12:24.251Z","avatar_url":"https://github.com/saleel.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"# React Native Super Grid\n\n![npm version](https://img.shields.io/npm/v/react-native-super-grid.svg?colorB=brightgreen\u0026style=flat-square)\n![npm download](https://img.shields.io/npm/dt/react-native-super-grid.svg?style=flat-square)\n\n\n\n\nResponsive Grid View for React Native.\n\n\n\n## Getting Started\n\nThis library export two components - FlatGrid (similar to FlatList) and SectionGrid (similar to SectionList). Both components render a Grid layout that adapts itself to various screen resolutions.\n\nInstead of passing an itemPerRow argument, you pass ```itemDimension``` and each item will be rendered with a dimension size equal to or more than (to fill the screen) the given dimension.\n\nInternally, these components use the native [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) and [SectionList](https://facebook.github.io/react-native/docs/sectionlist.html).\n\n\n[Demo Snack](https://snack.expo.io/@saleel/react-native-super-grid)\n\n\n**Version 3.x, please refer [v3 branch](https://github.com/saleel/react-native-super-grid/tree/v3) for documentation**  \n\n**Version 2.x and older, please refer [v2 branch](https://github.com/saleel/react-native-super-grid/tree/v2) for documentation**  \n\n\n### Versions\n\n- Use version `6.0.0` for RN `0.74.0` and above\n- Use version `5.1.0` for older versions of RN\n\n\n### Installing\n\nYou can install the package via npm.\n\n```\nnpm install react-native-super-grid\n```\n\n\n\n### Usage (FlatGrid)\n```javascript\nimport { FlatGrid } from 'react-native-super-grid';\n```\n```javascript\n\u003cFlatGrid\n  itemDimension={130}\n  data={[1,2,3,4,5,6]}\n  renderItem={({ item }) =\u003e (\u003cText\u003e{item}\u003c/Text\u003e)}\n/\u003e\n```\n\n\n### Usage (SimpleGrid)\nThis component is similar to the FlatGrid but does not use a FlatList, instead, it simply maps over the data items. This is useful if you need to put a grid inside a ScrollView or if you have a small array.\n```javascript\nimport { SimpleGrid } from 'react-native-super-grid';\n```\n```javascript\n\u003cSimpleGrid\n  itemDimension={130}\n  data={[1,2,3,4,5,6]}\n  renderItem={({ item }) =\u003e (\u003cText\u003e{item}\u003c/Text\u003e)}\n/\u003e\n```\n\n### Usage (SectionGrid)\n\n```javascript\nimport { SectionGrid } from 'react-native-super-grid';\n```\n```javascript\n\u003cSectionGrid\n  itemDimension={130}\n  sections={[\n    {\n      title: 'Numbers',\n      data: [1,2,3,4,5,6],\n    },\n    {\n      title: 'Alphabets',\n      data: ['A', 'B', 'C', 'D', 'E'],\n    },\n  ]}\n  renderItem={({ item }) =\u003e (\u003cText\u003e{item}\u003c/Text\u003e)}\n  renderSectionHeader={({ section }) =\u003e (\n    \u003cText style={{ fontSize: 20 }}\u003e{section.title}\u003c/Text\u003e\n  )}\n/\u003e\n```\n\n\n#### Properties\n\n| Property | Type | Default Value | Description |\n|---|---|---|---|\n| renderItem | Function |  | Function to render each object. Should return a react native component. Same signature as that of FlatList/SectionList's renderItem (with an additional key `rowIndex`).  |\n| data (for FlatGrid) sections (for SectionGrid)  | Array |  | Data to be rendered. renderItem will be called with each item in this array. Same signature as that of FlatList/SectionList. |  |\n| itemDimension | Number | 120  | Minimum width or height for each item in pixels (virtual). |\n| fixed | Boolean | false  | If true, the exact ```itemDimension``` will be used and won't be adjusted to fit the screen. |\n| spacing | Number | 10 | Spacing between each item. |\n| style | [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) styles (Object) |  | Styles for the container. Styles for an item should be applied inside ```renderItem```. Note: If you set `adjustGridToStyles` to `true` then padding added in this prop will be used to adjust the total dimensions of the grid to reflect the padding in this style object. |\n| additionalRowStyle | styles (Object) | | Additional styles for rows (rows render multiple items within), apart from the generated ones.\n| itemContainerStyle | styles (Object) | | Style for item's container. Not needed for most cases.\n| staticDimension | Number | | Specifies a static width or height for the container. If not passed, `maxDimension` will be used.|\n| maxDimension | Number | | Specifies a maximum width or height for the container. If not passed, full width/height of the screen will be used. Note: If you set `adjustGridToStyles` to `true` then you can alternatively use the `contentContainerStyle` prop and set `maxWidth` or `maxHeight`.|\n| horizontal | boolean | false | If true, the grid will be scrolling horizontally. If you want your item to fill the height when using a horizontal grid, you should give it a height of '100%'. This prop doesn't affect the SectionGrid, which only scrolls vertically. |\n| onLayout | Function |  | Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function, thus invoked on mount and layout changes. |\n| listKey | String | | A unique identifier for the Grid. This key is necessary if you are nesting multiple FlatGrid/SectionGrid inside another Grid (or any VirtualizedList).|\n| keyExtractor | Function | | A function `(item, rowItemIndex) =\u003e {String}` that should return a unique key for the item passed.|\n| invertedRow | boolean | | Reverses the direction of row items. It can be used with the [`inverted`](https://reactnative.dev/docs/flatlist#inverted) property.|\n| maxItemsPerRow | number | | Specifies the maximum number of items to render per row|\n| contentContainerStyle | styles (Object) | | This is the regular FlatList/SectionList prop. If you set `adjustGridToStyles` to `true` and specify `maxWidth` or `maxHeight` it will be used the same as `maxDimension`. In addition, padding added here will be used to adjust the total dimensions of the grid to reflect the padding in this style object.|\n| adjustGridToStyles | boolean | | Set to true when you want the library to automatically adjust the total dimensions of the grid based on `style` and `contentContainerStyle` props |\n| customFlatList (for FlatGrid) | ElementType | | Replaces `FlatList` in FlatGrid with ElementType. E.g. `Animated.FlatList` |\n| customSectionList (for SectionGrid) | ElementType | | Replaces `SectionList` in SectionGrid with ElementType. E.g. `Animated.SectionList` |\n| onItemsPerRowChange | Function | | A callback `(itemsPerRow: number) =\u003e void` that is called when number of items per row is determined. |\n\nAll additional props you pass will be passed on to the internal FlatList/SectionList. This means you can make use of various props and methods like `ListHeaderComponent`, `onEndReached`, `onRefresh`...etc. While these are not tested for compatibility, most of them should work as expected.\n\nIn **SectionGrid**, `section` argument in methods like `renderSectionHeader`, `renderSectionFooter`, `ItemSeparatorComponent` will slightly different from the actual section you passed. The `data` key in the `section` will be the grouped versions of items (items that go in one row), and the original list of items can be found in `originalData` key. All other keys will remain intact.\n\n#### Full width items\n\nTo make an item full width, simply include `_fullWidth: true` in the data object for that item. For example: \n\n```javascript\n{ name: 'TURQUOISE', code: '#1abc9c', _fullWidth: true }\n```\n\n## FlatGrid Example\n```javascript\nimport React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport { FlatGrid } from 'react-native-super-grid';\n\nexport default function Example() {\n  const [items, setItems] = React.useState([\n    { name: 'TURQUOISE', code: '#1abc9c' },\n    { name: 'EMERALD', code: '#2ecc71' },\n    { name: 'PETER RIVER', code: '#3498db' },\n    { name: 'AMETHYST', code: '#9b59b6' },\n    { name: 'WET ASPHALT', code: '#34495e' },\n    { name: 'GREEN SEA', code: '#16a085' },\n    { name: 'NEPHRITIS', code: '#27ae60' },\n    { name: 'BELIZE HOLE', code: '#2980b9' },\n    { name: 'WISTERIA', code: '#8e44ad' },\n    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },\n    { name: 'SUN FLOWER', code: '#f1c40f' },\n    { name: 'CARROT', code: '#e67e22' },\n    { name: 'ALIZARIN', code: '#e74c3c' },\n    { name: 'CLOUDS', code: '#ecf0f1' },\n    { name: 'CONCRETE', code: '#95a5a6' },\n    { name: 'ORANGE', code: '#f39c12' },\n    { name: 'PUMPKIN', code: '#d35400' },\n    { name: 'POMEGRANATE', code: '#c0392b' },\n    { name: 'SILVER', code: '#bdc3c7' },\n    { name: 'ASBESTOS', code: '#7f8c8d' },\n  ]);\n\n  return (\n    \u003cFlatGrid\n      itemDimension={130}\n      data={items}\n      style={styles.gridView}\n      // staticDimension={300}\n      // fixed\n      spacing={10}\n      renderItem={({ item }) =\u003e (\n        \u003cView style={[styles.itemContainer, { backgroundColor: item.code }]}\u003e\n          \u003cText style={styles.itemName}\u003e{item.name}\u003c/Text\u003e\n          \u003cText style={styles.itemCode}\u003e{item.code}\u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    /\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  gridView: {\n    marginTop: 10,\n    flex: 1,\n  },\n  itemContainer: {\n    justifyContent: 'flex-end',\n    borderRadius: 5,\n    padding: 10,\n    height: 150,\n  },\n  itemName: {\n    fontSize: 16,\n    color: '#fff',\n    fontWeight: '600',\n  },\n  itemCode: {\n    fontWeight: '600',\n    fontSize: 12,\n    color: '#fff',\n  },\n});\n```\n\n\n\n| ![iPhone6 Portrait](/screenshots/iphone6_portrait.png?raw=true \"iPhone6 Portrait\")| ![iPhone6 Landscape](/screenshots/iphone6_landscape.png?raw=true \"iPhone6 Landscape\") |\n|:---:|:---:|\n| iPhone6 Portrait | iPhone6 Landscape  |\n\n| ![iPad Air 2 Portrait](/screenshots/ipadair2_portrait.png?raw=true \"iPad Air 2 Portrait\") | ![iPad Air 2 Landscape](/screenshots/ipadair2_landscape.png?raw=true \"iPad Air 2 Landscape\") |\n|:---:|:---:|\n| iPad Air 2 Portrait | iPad Air 2 Landscape  |\n\n| ![Android Portrait](/screenshots/android_portrait.png?raw=true \"Android Portrait\") | ![Android Landscape](/screenshots/android_landscape.png?raw=true \"Android Landscape\") |\n|:---:|:---:|\n| Android Portrait | Android Landscape  |\n\n| ![Android Horizontal Portrait](/screenshots/android_horizontal_portrait.png?raw=true \"Android Horizontal Portrait\") | ![Android Horizontal Landscape](/screenshots/android_horizontal_landscape.png?raw=true \"Android Horizontal Landscape\") |\n|:---:|:---:|\n| Android Horizontal Portrait | Android Horizontal Landscape  |\n\n| ![iPhone Horizontal Portrait](/screenshots/iphone_horizontal_portrait.png?raw=true \"iPhone Horizontal Portrait\")| ![iPhone Horizontal Landscape](/screenshots/iphone_horizontal_landscape.png?raw=true \"iPhone Horizontal Landscape\") |\n|:---:|:---:|\n| iPhone Horizontal Portrait | iPhone Horizontal Landscape  |\n\n## SectionGrid Example\n```javascript\nimport React, { Component } from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport { SectionGrid } from 'react-native-super-grid';\n\nexport default function Example() {\n  const [items, setItems] = React.useState([\n    { name: 'TURQUOISE', code: '#1abc9c' },\n    { name: 'EMERALD', code: '#2ecc71' },\n    { name: 'PETER RIVER', code: '#3498db' },\n    { name: 'AMETHYST', code: '#9b59b6' },\n    { name: 'WET ASPHALT', code: '#34495e' },\n    { name: 'GREEN SEA', code: '#16a085' },\n    { name: 'NEPHRITIS', code: '#27ae60' },\n    { name: 'BELIZE HOLE', code: '#2980b9' },\n    { name: 'WISTERIA', code: '#8e44ad' },\n    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },\n    { name: 'SUN FLOWER', code: '#f1c40f' },\n    { name: 'CARROT', code: '#e67e22' },\n    { name: 'ALIZARIN', code: '#e74c3c' },\n    { name: 'CLOUDS', code: '#ecf0f1' },\n    { name: 'CONCRETE', code: '#95a5a6' },\n    { name: 'ORANGE', code: '#f39c12' },\n    { name: 'PUMPKIN', code: '#d35400' },\n    { name: 'POMEGRANATE', code: '#c0392b' },\n    { name: 'SILVER', code: '#bdc3c7' },\n    { name: 'ASBESTOS', code: '#7f8c8d' },\n  ]);\n\n  return (\n    \u003cSectionGrid\n      itemDimension={90}\n      // staticDimension={300}\n      // fixed\n      // spacing={20}\n      sections={[\n        {\n          title: 'Title1',\n          data: items.slice(0, 6),\n        },\n        {\n          title: 'Title2',\n          data: items.slice(6, 12),\n        },\n        {\n          title: 'Title3',\n          data: items.slice(12, 20),\n        },\n      ]}\n      style={styles.gridView}\n      renderItem={({ item, section, index }) =\u003e (\n        \u003cView style={[styles.itemContainer, { backgroundColor: item.code }]}\u003e\n          \u003cText style={styles.itemName}\u003e{item.name}\u003c/Text\u003e\n          \u003cText style={styles.itemCode}\u003e{item.code}\u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n      renderSectionHeader={({ section }) =\u003e (\n        \u003cText style={styles.sectionHeader}\u003e{section.title}\u003c/Text\u003e\n      )}\n    /\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  gridView: {\n    marginTop: 20,\n    flex: 1,\n  },\n  itemContainer: {\n    justifyContent: 'flex-end',\n    borderRadius: 5,\n    padding: 10,\n    height: 150,\n  },\n  itemName: {\n    fontSize: 16,\n    color: '#fff',\n    fontWeight: '600',\n  },\n  itemCode: {\n    fontWeight: '600',\n    fontSize: 12,\n    color: '#fff',\n  },\n  sectionHeader: {\n    flex: 1,\n    fontSize: 15,\n    fontWeight: '600',\n    alignItems: 'center',\n    backgroundColor: '#636e72',\n    color: 'white',\n    padding: 10,\n  },\n});\n```\n| ![iPhone SectionGrid Portrait](/screenshots/iphone_section_grid_portrait.png?raw=true \"iPhone SectionGrid Portrait\")| ![iPhone6 Landscape](/screenshots/iphone_section_grid_landscape.png?raw=true \"iPhone6 Landscape\") |\n|:---:|:---:|\n| iPhone SectionGrid Portrait | iPhone6 Landscape  |\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n\n\n\n## Changelog\n\n### [6.0.0] - 2024-06-12\n- Remove proptypes; Support for react native version 0.74.0 @saleel\n\n### [5.1.0] - 2024-03-28\n- Add support for fullWidth items @devjeff\n\n### [5.0.1] - 2024-03-23\n- Add readonly to types @annepham25\n\n### [5.0.0] - 2022-11-28\n- Add SimpleGrid component @paulrostorp\n\n### [4.6.0] - 2022-09-12\n- Add onItemsPerRowChange  @wjaykim\n\n### [4.5.1] - 2022-09-08\n- Fix SectionGrid renderItem types @wjaykim\n\n### [4.5.0] - 2022-08-23\n- Add ability to add custom interfaces @Ryanjso \n\n### [4.4.3] - 2022-08-03\n- Update type defs to handle `ref` attribute @leezumstein\n\n### [4.4.2] - 2022-07-06\n- Fix itemIndex in keyExtractor\n\n### [4.4.1] - 2022-07-06\n- Fix SectionGrid types (title) @LightenedLimited\n\n### [4.4.0] - 2022-04-30\n- Introduce `adjustGridToStyles` prop @levic92\n\n### [4.3.0] - 2022-04-23\n- Add maxItemsPerRow option @levic92\n\n### [4.2.0] - 2021-05-27\n- Add invertedRow option @JeffGuKang\n\n### [4.1.2] - 2021-05-27\n- Fix prop-type for styles @siarheipashkevich\n\n### [4.1.1] - 2021-02-03\n- Update type definition @henrymoulton\n\n### [4.1.0] - 2021-01-16\n- Add additionalRowStyle prop @sanghavan\n\n### [4.0.3] - 2020-07-14\n- Remove ViewPropTypes @miracle2k\n\n### [4.0.2] - 2020-06-05\n- Fix type definition of v4 FlatList\n\n### [4.0.1] - 2020-06-05\n- Remove accidental console.log @ianmartorell\n\n### [4.0.0] - 2020-05-23\n- Improve SectionList performance by using hooks @IsaaX\n- Improve FlatList performance by using hooks\n- Add maxDimension prop @ianmartorell\n\n### [3.2.0] - 2020-04-03\n- Add keyExtractor prop @sammarks\n\n### [3.1.2] - 2019-09-27\n- Security updates in packages @dependabot\n\n### [3.1.1] - 2019-09-27\n- Fix type definitions @JulienKode\n\n### [3.1.0] - 2019-09-16\n- Support overriding of renderItem in SectionList @paldepind\n\n### [3.0.9] - 2019-08-16\n- Improve type definitions @Grohden\n\n### [3.0.8] - 2019-07-16\n- Fix type definitions @Grohden\n\n### [3.0.7] - 2019-06-29\n- Add listKey prop @josemiguelo\n\n### [3.0.6] - 2019-05-18\n- Fix type definitions @zhigang1992\n\n### [3.0.5] - 2019-05-04\n- Fix type definitions @zhigang1992\n\n### [3.0.4] - 2019-04-16\n- Fix type definitions @hisankaran\n\n### [3.0.3] - 2019-02-25\n- Fix type definitions @jgbernalp\n\n### [3.0.2] - 2019-02-20\n- Fix calculation bug where itemsPerRow became zero (#81).\n\n### [3.0.1] - 2019-02-02\n- Fix in section key passed to various SectionGrid props.\n\n### [3.0.0] - 2019-01-20\n- Rename components, FlatList renderItem signature, Performance improvements.\n\n### [2.4.3] - 2018-07-22\n- Fix deep copying issue in SectionGrid @andersonaddo\n\n### [2.4.2] - 2018-07-21\n- Add itemContainerStyle prop @KseniaSecurity\n\n### [2.4.1] - 2018-07-07\n- Add onLayout prop @ataillefer\n\n### [2.4] - 2018-05-11\n- renderItem index fix @andersonaddo\n\n### [2.3.2] - 2018-05-23\n- Typescript support for SuperGridSectionList @Anccerson\n\n### [2.3.0] - 2018-03-17\n#### Added\n- Add SuperGridSectionList @andersonaddo\n\n### [2.1.0] - 2018-03-17\n#### Added\n- Use FlatList instead of ListView\n- Fix spacing issues\n\n### [2.0.2] - 2018-01-11\n#### Added\n- Allow dynamic update of itemDimension\n\n### [2.0.1] - 2017-12-13\n#### Added\n- Fixed render empty section headers Warning. @mannycolon\n\n### [2.0.0] - 2017-12-02\n#### Added\n- Add ability to have a horizontal grid. @Sh3rawi\n\n\n### [1.1.0] - 2017-11-03 (Target React Native 0.49+)\n#### Added\n- Replace view.propTypes to ViewPropTypes for 0.49+. @caudaganesh\n\n\n### [1.0.4] - 2017-10-09\n#### Added\n- Optional staticWidth prop @thejettdurham.\n- Use prop-types package instead of deprecated react's PropTypes.\n\n\n### [1.0.3] - 2017-06-06\n#### Added\n- Pass row index to renderItem @heaversm.\n\n\n\n## Acknowledgments\n\nColors in the example from https://flatuicolors.com/.\n\nScreenshot Mockup generated from https://mockuphone.com.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleel%2Freact-native-super-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaleel%2Freact-native-super-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleel%2Freact-native-super-grid/lists"}