This tutorial explains how to create simple custom grid view in react native application. Grid View that displays items in a two-dimensional, scrollable grid layout. The grid items are automatically inserted to the layout using a renderItem props. The GridView is fully responsive and scrollable component layout. Officially there are no specific GridView Component available in react native application, but we can create Grid layout using FlatList Component by specifying numColumns props  (example : numColumns={2}) in FlatList Component. This props allows us to create multiple columns in each row in responsive order.



In this example, we will create grid view layout using simple FlatList Component. you need to specify numColumns props ( numColumns={ Number of Columns to display } )  in FlatList Component, in order to form grid view layout.

Example : 

data={ this.state.GridListItems }
renderItem={ ({item}) =>
 style={styles.GridViewContainer}>
 style={styles.GridViewTextLayout} onPress={this.GetGridViewItem.bind(this, item.key)} > {item.key} 
 }
numColumns={2}
 />

React Native Grid View Layout Using FlatList Compoent :

Lets follow the below steps to create custom grid layout in React Native.

import React, { Component } from "react";
import { Platform, StyleSheet, FlatList, Text, View, Alert } from "react-native";

constructor(props) {
super(props);

this.state = {
GridListItems: [
{ key: "Skptricks" },
{ key: "Sumit" },
{ key: "Amit" },
{ key: "React" },
{ key: "React Native" },
{ key: "Java" },
{ key: "Javascript" },
{ key: "PHP" },
{ key: "AJAX" },
{ key: "Android" },
{ key: "Selenium" },
{ key: "HTML" },
{ key: "Database" },
{ key: "MYSQL" },
{ key: "SQLLite" },
{ key: "Web Technology" },
{ key: "CSS" },
{ key: "Python" },
{ key: "Linux" },
{ key: "Kotlin" },
]
};
}

Step-5 : Create GetGridViewItem method to show the selected FlatList item name with help of alert dialog box.

GetGridViewItem(item) {
Alert.alert(item);
}

Step-6 : Implement render method and return FlatList component wrapped by root View component. Specify the below parameters in FlatList component as props, that helps to form grid view layout.The basic key props that are necessary, while using FlatList component to display content in grid view layout.

• data - The array of items that need to be listed.
• renderItem - Function that returns the component of each item.
• numColumns- Specify the number of columns to display. Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. 

 return (
View style={styles.container}>
FlatList
            data={ this.state.GridListItems }
            renderItem={ ({item}) =>
View style={styles.GridViewContainer}>
Text style={styles.GridViewTextLayout} onPress={this.GetGridViewItem.bind(this, item.key)} > {item.key} Text>
View> }
            numColumns={2}
/>
View>
);

Step-8 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
},
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
},
GridViewContainer: {
   flex:1,
   justifyContent: 'center',
   alignItems: 'center',
   height: 100,
   margin: 5,
   backgroundColor: '#7B1FA2'
},
GridViewTextLayout: {
   fontSize: 20,
   fontWeight: 'bold',
   justifyContent: 'center',
   color: '#fff',
   padding: 10,
}
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, FlatList, Text, View, Alert } from "react-native";

export default class HomeActivity extends Component {
  constructor(props) {
super(props);

this.state = {
GridListItems: [
{ key: "Skptricks" },
{ key: "Sumit" },
{ key: "Amit" },
{ key: "React" },
{ key: "React Native" },
{ key: "Java" },
{ key: "Javascript" },
{ key: "PHP" },
{ key: "AJAX" },
{ key: "Android" },
{ key: "Selenium" },
{ key: "HTML" },
{ key: "Database" },
{ key: "MYSQL" },
{ key: "SQLLite" },
{ key: "Web Technology" },
{ key: "CSS" },
{ key: "Python" },
{ key: "Linux" },
{ key: "Kotlin" },
]
};
}

GetGridViewItem(item) {
Alert.alert(item);
}

  render() {
return (
View style={styles.container}>
FlatList
            data={ this.state.GridListItems }
            renderItem={ ({item}) =>
View style={styles.GridViewContainer}>
Text style={styles.GridViewTextLayout} onPress={this.GetGridViewItem.bind(this, item.key)} > {item.key} Text>
View> }
            numColumns={2}
/>
View>
);
}

}