{"id":22308785,"url":"https://github.com/ratson/react-native-superb-grid","last_synced_at":"2026-05-20T07:41:33.081Z","repository":{"id":236813132,"uuid":"793200144","full_name":"ratson/react-native-superb-grid","owner":"ratson","description":"Responsive Grid View for React Native in TypeScript","archived":false,"fork":false,"pushed_at":"2024-04-29T13:06:18.000Z","size":2331,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-28T02:49:10.367Z","etag":null,"topics":["grid","react-native","react-native-grid"],"latest_commit_sha":null,"homepage":"","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/ratson.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}},"created_at":"2024-04-28T17:52:39.000Z","updated_at":"2024-05-09T12:20:27.000Z","dependencies_parsed_at":"2025-03-26T01:32:50.690Z","dependency_job_id":"6c1b1830-0e75-4b02-96c5-1c66c6f7ad3b","html_url":"https://github.com/ratson/react-native-superb-grid","commit_stats":null,"previous_names":["ratson/react-native-superb-grid"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ratson/react-native-superb-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-native-superb-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-native-superb-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-native-superb-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-native-superb-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ratson","download_url":"https://codeload.github.com/ratson/react-native-superb-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-native-superb-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262696802,"owners_count":23349871,"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","react-native","react-native-grid"],"created_at":"2024-12-03T20:15:17.423Z","updated_at":"2026-05-20T07:41:28.052Z","avatar_url":"https://github.com/ratson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Superb Grid\n\n![npm version](https://img.shields.io/npm/v/react-native-superb-grid.svg?colorB=brightgreen\u0026style=flat-square)\n![npm download](https://img.shields.io/npm/dt/react-native-superb-grid.svg?style=flat-square)\n\nResponsive Grid View for React Native.\n\n## Features\n\nThis is a fork of [react-native-super-grid](https://github.com/saleel/react-native-super-grid) with the following differences,\n\n- Rewrite in TypeScript\n- Remove 'prop-types` dependency\n- Remove usage of `defaultProps`\n- Various fixes to React hooks usages\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### Installing\n\nYou can install the package via npm.\n\n```\nnpm install react-native-superb-grid\n```\n\n### Usage (FlatGrid)\n\n```javascript\nimport { FlatGrid } from \"react-native-superb-grid\";\n```\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### Usage (SimpleGrid)\n\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\n```javascript\nimport { SimpleGrid } from \"react-native-superb-grid\";\n```\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-superb-grid\";\n```\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#### 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\n```javascript\nimport React from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport { FlatGrid } from \"react-native-superb-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| ![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\n```javascript\nimport React, { Component } from \"react\";\nimport { StyleSheet, View, Text } from \"react-native\";\nimport { SectionGrid } from \"react-native-superb-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\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\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\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%2Fratson%2Freact-native-superb-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fratson%2Freact-native-superb-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fratson%2Freact-native-superb-grid/lists"}