Example of GridView List in React Native with Local Data

Hello friends, In today’s tutorial we would learn about creating a simple GridView in react native using FlatList component. GridView is not so much different from the List. In a List there are only one column present in a single row other then in a GridView there can be multiple columns present inside a single row. In react native if we want to make GridView then we have to use FlatList component with numColumns={ } prop. In the numColumns prop we would define how many columns we want in a single row. In current tutorial we are only making 2 Columns per row. So in this tutorial we would learn about Example of GridView List in React Native with Local Data.

Contents in this project Example of GridView List in React Native with Local Data :-

1. Open your project’s main App.js file and import View, StyleSheet, SafeAreaView, FlatList and Text component.

2. Creating our main App component.

3. Creating a Array List named as PetNames. We would use this array as our GridView items.

4. Creating a component named as GridView with name prop. We would call this component inside our FlatList to render grid items.

5. Creating return() block, Now we would make the FlatList with numColumns={ } prop and define our columns value as 2. So it will make 2 columns inside a single row.

6. Creating Style.

7. Complete Source Code for App.js File :-

Screenshot :-

Example of GridView List in React Native with Local Data

Leave a Reply

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