HomeOur TeamContact

Flat Grid

By Utkarsh Lubal
Published in UI
February 20, 2023
1 min read
Flat Grid

Table Of Contents

01
Introduction
02
Installing
03
Usage (FlatGrid)
04
Properties
05
Example
06
Tutorial

Introduction

This 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.

Instead 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.

This article is about FlatGrid.

Installing

npm install react-native-super-grid

Usage (FlatGrid)

import { FlatGrid } from 'react-native-super-grid';
<FlatGrid
  itemDimension={130}
  data={[1,2,3,4,5,6]}
  renderItem={({ item }) => (<Text>{item}</Text>)}
/>

Properties

PropertyTypeDefault ValueDescription
renderItemFunctionFunction 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)ArrayData to be rendered. renderItem will be called with each item in this array. Same signature as that of FlatList/SectionList.
itemDimensionNumber120Minimum width or height for each item in pixels (virtual).
fixedBooleanfalseIf true, the exact itemDimension will be used and won’t be adjusted to fit the screen.
spacingNumber10Spacing between each item.
styleFlatList 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.
additionalRowStylestyles (Object)Additional styles for rows (rows render multiple items within), apart from the generated ones.
itemContainerStylestyles (Object)Style for item’s container. Not needed for most cases.
staticDimensionNumberSpecifies a static width or height for the container. If not passed, maxDimension will be used.
maxDimensionNumberSpecifies 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.
horizontalbooleanfalseIf 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.
onLayoutFunctionOptional callback ran by the internal FlatList or SectionList’s onLayout function, thus invoked on mount and layout changes.
listKeyStringA unique identifier for the Grid. This key is necessary if you are nesting multiple FlatGrid/SectionGrid inside another Grid (or any VirtualizedList).
keyExtractorFunctionA function (item, rowItemIndex) => {String} that should return a unique key for the item passed.
invertedRowbooleanReverses the direction of row items. It can be used with the inverted property.
maxItemsPerRownumberSpecifies the maximum number of items to render per row
contentContainerStylestyles (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.
adjustGridToStylesbooleanSet 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)ElementTypeReplaces FlatList in FlatGrid with ElementType. E.g. Animated.FlatList
customSectionList (for SectionGrid)ElementTypeReplaces SectionList in SectionGrid with ElementType. E.g. Animated.SectionList
onItemsPerRowChangeFunctionA callback (itemsPerRow: number) => void that is called when number of items per row is determined.

All 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.

In 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.

Example

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

export default function Example() {
  const [items, setItems] = React.useState([
    { name: 'TURQUOISE', code: '#1abc9c' },
    { name: 'EMERALD', code: '#2ecc71' },
    { name: 'PETER RIVER', code: '#3498db' },
    { name: 'AMETHYST', code: '#9b59b6' },
    { name: 'WET ASPHALT', code: '#34495e' },
    { name: 'GREEN SEA', code: '#16a085' },
    { name: 'NEPHRITIS', code: '#27ae60' },
    { name: 'BELIZE HOLE', code: '#2980b9' },
    { name: 'WISTERIA', code: '#8e44ad' },
    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
    { name: 'SUN FLOWER', code: '#f1c40f' },
    { name: 'CARROT', code: '#e67e22' },
    { name: 'ALIZARIN', code: '#e74c3c' },
    { name: 'CLOUDS', code: '#ecf0f1' },
    { name: 'CONCRETE', code: '#95a5a6' },
    { name: 'ORANGE', code: '#f39c12' },
    { name: 'PUMPKIN', code: '#d35400' },
    { name: 'POMEGRANATE', code: '#c0392b' },
    { name: 'SILVER', code: '#bdc3c7' },
    { name: 'ASBESTOS', code: '#7f8c8d' },
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      // staticDimension={300}
      // fixed
      spacing={10}
      renderItem={({ item }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  gridView: {
    marginTop: 10,
    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',
  },
});

Tutorial

Coming Soon…


Previous Article
Using react-native-gifted-chat
Next Article
Section Grid
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media