react-native-super-grid

SectionGrid is a component used to render a grid of items organized into multiple sections, each with its own header.

Key props:

• itemDimension: The size of each item (number).
• sections: An array of section objects. Each object must contain a title and a data array.
• renderItem: A function called to render each item. It receives an object containing { item, section, index }.
• renderSectionHeader: A function called to render the header for each section. It receives an object containing { section }.
• style: The style for the grid container.

Note: You can also use staticDimension, spacing, and fixed (though these are commented out in the example, they are available configuration options).

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { SectionGrid } from 'react-native-super-grid';

export default function Example() {
  const [items, setItems] = React.useState([
    { name: 'TURQUOISE', code: '#1abc9c' },
    { name: 'EMERALD', code: '#2ecc71' },
    // ... other items
  ]);

  return (
    <SectionGrid
      itemDimension={90}
      sections={[
        {
          title: 'Title1',
          data: items.slice(0, 6),
        },
        {
          title: 'Title2',
          data: items.slice(6, 12),
        },
        {
          title: 'Title3',
          data: items.slice(12, 20),
        },
      ]}
      style={styles.gridView}
      renderItem={({ item, section, index }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
      renderSectionHeader={({ section }) => (
        <Text style={styles.sectionHeader}>{section.title}</Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  gridView: {
    marginTop: 20,
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'flex-end',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
  sectionHeader: {
    flex: 1,
    fontSize: 15,
    fontWeight: '600',
    alignItems: 'center',
n    backgroundColor: '#636e72',
    color: 'white',
    padding: 10,
  },
});

The SectionGrid component is similar to React Native's SectionList. It allows you to render grouped data in a grid format.

Note on Section Data: In SectionGrid, the section argument provided to methods like renderSectionHeader, renderSectionFooter, and ItemSeparatorComponent is slightly different from the original section object. The section.data key will contain the grouped versions of items (items that occupy a single row), while the original list of items can be found in the section.originalData key.

import { SectionGrid } from 'react-native-super-grid';

<SectionGrid
  itemDimension={130}
  sections={[
    {
      title: 'Numbers',
      data: [1,2,3,4,5,6],
    },
    {
      title: 'Alphabets',
      data: ['A', 'B', 'C', 'D', 'E'],
    },
  ]}
  renderItem={({ item }) => (<Text>{item}</Text>)}
  renderSectionHeader={({ section }) => (
    <Text style={{ fontSize: 20 }}>{section.title}</Text>
  )}
/>

The following props are available for FlatGrid and SectionGrid. All additional props passed to these components are forwarded to the underlying FlatList or SectionList.

| Property | Type | Default Value | Description |
|---|---|---|---|
| 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`). |
| 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. |
| itemDimension | Number | 120  | Minimum width or height for each item in pixels (virtual). |
| fixed | Boolean | false | If true, the exact `itemDimension` will be used and won't be adjusted to fit the screen. |
| spacing | Number | 10 | Spacing between each item. |
| 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. |
| additionalRowStyle | styles (Object) | | Additional styles for rows (rows render multiple items within), apart from the generated ones. |
| itemContainerStyle | styles (Object) | | Style for item's container. Not needed for most cases. |
| staticDimension | Number | | Specifies a static width or height for the container. If not passed, `maxDimension` will be used.| 
| 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`.|
| 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. |
| onLayout | Function |  | Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function, thus invoked on mount and layout changes. |
| 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).|
| keyExtractor | Function | | A function `(item, rowItemIndex) => {String}` that should return a unique key for the item passed.| 
| invertedRow | boolean | | Reverses the direction of row items. It can be used with the [`inverted`](https://reactnative.dev/docs/flatlist#inverted) property.| 
| maxItemsPerRow | number | | Specifies the maximum number of items to render per row| 
| 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 this object.| 
| 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 |
| customFlatList (for FlatGrid) | ElementType | | Replaces `FlatList` in FlatGrid with ElementType. E.g. `Animated.FlatList` |
| customSectionList (for SectionGrid) | ElementType | | Replaces `SectionList` in SectionGrid with ElementType. E.g. `Animated.SectionList` |
| onItemsPerRowChange | Function | | A callback `(itemsPerRow: number) => void` that is called when number of items per row is determined. |