Implement responsive grid view in React Native App

React Native Aug 7, 2018

Grid view is a 2-Dimensional Rows + Column layout view used to display multiple items into Grid from. The Grid view is fully responsive and scrollable component layout in react native android and iOS mobile application development language.

There is no specific Grid Layout Component available in React Native but some custom components are available for that. React Native Super Grid is one of them.

Here we are going to see by example how to use React Native Super Grid to implement grid view which displays items in a two-dimensional, scrollable grid view.

React Native Super Grid component renders a Grid view 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. Internally, these components use the native FlatList or SectionList.

Installation:

npm i react-native-super-grid -s

React Native Super Grid usage steps :

Start a fresh React Native project. If you don’t know how then read this or can create a custom module in an existing react native project.
Add necessary package including react-native-super-grid and then npm install.
Open your newly created project's App.js file or open custom module into your any favorite code editor.
Import all required components from react, react-native packages and react-native-super-grid package.

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

Create Example component which will render grid view.

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      ...
    );
  }
}

Set data in state

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      items: [
        { 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' },
      ]
    };
  }
  render() {
    return (
      ...
    );
  }
}

Define style sheet

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

Define GridView in render function

return (
  <GridView
    itemDimension={130}
    items={items}
    style={styles.gridView}
    renderItem={item => (
      <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
        <Text style={styles.itemName}>{item.name}</Text>
        <Text style={styles.itemCode}>{item.code}</Text>
      </View>
    )}
  />
);

Here. itemDimension is a width or height, items is for data, style is for style sheet and render item is for child element.

SuperGridSectionList Example:
This is a SectionList modified to have a grid layout. Sections and renderItem prop has same signature as of SectionList.

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

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
          title: 'Title1',
          data: [
            { 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' },
          ]
        },
        {
          title: 'Title2',
          data: [
            { 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' },
          ]
        },
        {
          title: 'Title3',
          data: [
            { name: 'BELIZE HOLE', code: '#2980b9' }, { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
            { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
            { name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' }
          ]
        }
      ]
    };
  }

  render() {
    return (
      <SuperGridSectionList
        itemDimension={130}
        sections={this.state.items}
        style={styles.gridView}
        renderItem={({ item }) => (
          <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={{ color: 'green' }}>{section.title}</Text>
        )}
      />
    );
  }
}

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

GridView(Flat List)
This is a FlatList modified to have a grid layout. itemDimension is Minimum width or height for each item in pixels (virtual). If you want your item to fill the height when using a horizontal grid, you should give it a height of '100%'

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

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { 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' },
      ]
    };
  }

  render() {
    return (
      <GridView
        itemDimension={130}
        items={this.state.items}
        style={styles.gridView}
        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: {
    paddingTop: 25,
    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',
  },
});

Screen-Shot-2018-08-07-at-2.13.09-AM