Sunday, September 30, 2018

React Native Simple Custom GridView Layout Example Android

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.

React Native Simple Custom GridView Layout Example Android


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

<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}
 />

React Native Grid View Layout Using FlatList Compoent :

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





Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.
import React, { Component } from "react";
import { Platform, StyleSheet, FlatList, Text, View, Alert } from "react-native";

Step-4 : Create constructor in your HomeActivity class with props parameter and Create super method with props parameter in constructor. Now using this.state  we are defining the FlatList items array with key and Key should be added with items. This state object helps to render content in FlatList 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" },
      ]
    };
  }

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,
 }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple grid view layout design with the help of FlatList Component in react native application.
/**
 * 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>
    );
  }

}


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,
 }
});

Screenshot :
React Native Simple Custom GridView Layout Example Android

React Native Simple Custom GridView Layout Example Android

React Native Simple Custom GridView Layout Example Android

React Native Simple Custom GridView Layout Example Android


NOTE : if you want to display three columns in your grid view layout, then you need to set numColumns props to 3 (numColumns={3}) in FlatList Component. The grid view layout structure look like below.

React Native Simple Custom GridView Layout Example Android

This is all about grid view layout design in react nativeThank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment