Implement responsive grid view in React Native App

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:

1npm 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.

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

Create Example component which will render grid view.

1export default class Example extends Component {
2  constructor(props) {
3    super(props);
4    this.state = {};
5  }
6  render() {
7    return (
8      ...
9    );
10  }
11}

Set data in state

1export default class Example extends Component {
2  constructor(props) {
3    super(props);
4    this.state = { 
5      items: [
6        { name: 'TURQUOISE', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
7        { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
8        { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
9        { name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
10        { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
11        { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
12        { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
13        { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
14        { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
15        { name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' },
16      ]
17    };
18  }
19  render() {
20    return (
21      ...
22    );
23  }
24}

Define style sheet

1const styles = StyleSheet.create({
2  gridView: {
3    paddingTop: 25,
4    flex: 1,
5  },
6  itemContainer: {
7    justifyContent: 'flex-end',
8    borderRadius: 5,
9    padding: 10,
10    height: 150,
11  },
12  itemName: {
13    fontSize: 16,
14    color: '#fff',
15    fontWeight: '600',
16  },
17  itemCode: {
18    fontWeight: '600',
19    fontSize: 12,
20    color: '#fff',
21  },
22});

Define GridView in render function

1return (
2  <GridView
3    itemDimension={130}
4    items={items}
5    style={styles.gridView}
6    renderItem={item => (
7      <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
8        <Text style={styles.itemName}>{item.name}</Text>
9        <Text style={styles.itemCode}>{item.code}</Text>
10      </View>
11    )}
12  />
13);

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.

1import React, { Component } from 'react';
2import { StyleSheet, View, Text } from 'react-native';
3import { SuperGridSectionList } from 'react-native-super-grid';
4
5export default class Example extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      items: [
10        {
11          title: 'Title1',
12          data: [
13            { name: 'TURQUOISE', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
14            { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
15            { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
16            { name: 'NEPHRITIS', code: '#27ae60' },
17          ]
18        },
19        {
20          title: 'Title2',
21          data: [
22            { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
23            { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
24            { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
25          ]
26        },
27        {
28          title: 'Title3',
29          data: [
30            { name: 'BELIZE HOLE', code: '#2980b9' }, { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
31            { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
32            { name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' }
33          ]
34        }
35      ]
36    };
37  }
38
39  render() {
40    return (
41      <SuperGridSectionList
42        itemDimension={130}
43        sections={this.state.items}
44        style={styles.gridView}
45        renderItem={({ item }) => (
46          <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
47            <Text style={styles.itemName}>{item.name}</Text>
48            <Text style={styles.itemCode}>{item.code}</Text>
49          </View>
50        )}
51        renderSectionHeader={({ section }) => (
52          <Text style={{ color: 'green' }}>{section.title}</Text>
53        )}
54      />
55    );
56  }
57}
58
59const styles = StyleSheet.create({
60  gridView: {
61    paddingTop: 25,
62    flex: 1,
63  },
64  itemContainer: {
65    justifyContent: 'flex-end',
66    borderRadius: 5,
67    padding: 10,
68    height: 150,
69  },
70  itemName: {
71    fontSize: 16,
72    color: '#fff',
73    fontWeight: '600',
74  },
75  itemCode: {
76    fontWeight: '600',
77    fontSize: 12,
78    color: '#fff',
79  },
80});

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%'

1import React, { Component } from 'react';
2import { StyleSheet, View, Text } from 'react-native';
3import { SuperGridSectionList } from 'react-native-super-grid';
4
5export default class Example extends Component {
6  constructor(props) {
7    super(props);
8    this.state = {
9      items: [
10        { name: 'TURQUOISE', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
11        { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
12        { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
13        { name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
14        { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
15        { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
16        { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
17        { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
18        { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
19        { name: 'SILVER', code: '#bdc3c7' }, { name: 'ASBESTOS', code: '#7f8c8d' },
20      ]
21    };
22  }
23
24  render() {
25    return (
26      <GridView
27        itemDimension={130}
28        items={this.state.items}
29        style={styles.gridView}
30        renderItem={item => (
31          <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
32            <Text style={styles.itemName}>{item.name}</Text>
33            <Text style={styles.itemCode}>{item.code}</Text>
34          </View>
35        )}
36      />
37    );
38  }
39}
40
41const styles = StyleSheet.create({
42  gridView: {
43    paddingTop: 25,
44    flex: 1,
45  },
46  itemContainer: {
47    justifyContent: 'flex-end',
48    borderRadius: 5,
49    padding: 10,
50    height: 150,
51  },
52  itemName: {
53    fontSize: 16,
54    color: '#fff',
55    fontWeight: '600',
56  },
57  itemCode: {
58    fontWeight: '600',
59    fontSize: 12,
60    color: '#fff',
61  },
62});

Implement responsive grid view in React Native App

Related Post

Quick & Easy MobX Tutorial in ReactNative - Beginner Steps

Free React App Deployment with Heroku and CD

Selenium: Beginner's Guide for Automation Testing