React Native Simple Custom GridView Layout Android iOS Tutorial

GridView is a 2-Dimensional Rows + Column layout view used to display multiple items into Grid from. The GridView is fully responsive and scrollable component layout. In react native android and iOS mobile application development language. There are no specific GridView Component available but as according to user requirement developers can create Easy Custom GridView Layout using FlatList’s numColumns={ } property. This property allows us to create multiple columns in each row so that would display just like the a fully customized GridView . So let’s get started 🙂 .

React Native GridView

What we are doing in this tutorial :

We are creating a customized GridView for both android and iOS applications using FlatList’s numColumns={ Pass Number of Columns Here } Property.

Contents in this project Simple Custom GridView Layout Tutorial :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import AppRegistry, StyleSheet, FlatList, Text, View, Alert and Platform component in your project.

3. Create constructor in your project’s class and inside that constructor define super( ) method with props inside it. Now Using the State define the GridView items using key . In our tutorial we are just defining items as One to Twenty items table.

4. Create GetGridViewItem() function. This function would allow us to get the GridView clicked item value.

5. Define A Root View inside the render’s return block. This View is our main view and All the components must be declared inside it.

6. Create FlatList component inside the Root View and define numColumns={2} property with it. This property allows us to set number of columns inside the GridView.

data : Set the GridViewItems state value define inside the constructor.

renderItem : Used to display each item inside the FlatList.

numColumns={2} : Setting up the Number of columns in each row 2. So each row holds 2 Columns.

7. Create CSS Style sheet classes.

8. Complete source code for index.android.js / index.ios.js file:

Screenshot in Android mobile phone application with 2 columns in GridView :

React Native GridView

GridView in android app with 3 columns :

Screenshot in iOS iPhone application with 2 columns :

GridView in iOS iPhone app with 3 columns :

4 Comments

  1. bro, how possible to add text with icon each item

Leave a Reply

Your email address will not be published. Required fields are marked *