React Native Change ListView Mode To GridView Dynamically on Button Click

FlatList has its own Prop named as numColumns={Define Column Value in Number}, which would allow us to change the FlatList mode from FlatList ListView to GridView. All we have to do is set the value in number from inside the numColumns={} prop. So in this tutorial we would going to create a JSON Parsing FlatList ListView with Images and Text dynamically come from MySQL database and dynamically change the numColumns={} prop value using State on button click. This would allow us to change the FlatList ListView state and permit us to dynamically Toggle Change ListView Mode between GridView on button click in react native Android and iOS application …Happy Reading 🙂 .

Contents in this project Change ListView Mode To GridView Dynamically on Button Click :

1. Read our previous tutorial about Custom JSON ListView with Images. Because we are creating the FlatList in this tutorial using JSON which i have already created inside Custom JSON ListView with Image tutorial.

2. Screenshot of JSON used in this tutorial.

3. Import StyleSheet, View, Platform, Text, FlatList, TouchableOpacity, Alert, ActivityIndicator and Image component inside your project.

4. Create constructor() in your class and create 3 State variables named as GridColumnsValue, ButtonDefaultText and isLoading.

GridColumnsValue : This state holds Boolean value. This state is used to Toogle between ListView to GridView. If the GridColumnsValue == true then it will set the numColumns={} value as 1 which would display the ListView and If the GridColumnsValue == false then it will set numColumns={} value as 2 which will display the GridView with 2 columns.

ButtonDefaultText : This state is used to set Button above text.

isLoading : This is used to Show and Hide ActivityIndicator . If the isLoading == true then it will show the ActivityIndicator and if the isLoading == false then it will hide the ActivityIndicator.

5. Create componentDidMount() method in your class. This method is a pre define inbuilt method and executes on app start time. Inside this method we would parse the JSON coming from HTTP URL and store the JSON into dataSource state. After parsing the JSON we would set the isLoading value false and hide the ActivityIndicator.

6. Create function named as ChangeGridValueFunction(). We would call this function on Button onPress. This function would check the GridColumnsValue stale value and set button above text.

7. Create another function GetGridViewItem(). We would call this function on FlatList item press and show the selected value on screen using Alert.

8. Create a If condition inside render’s block . In this block we would check the Show and hide the ActivityIndicator according to isLoading State.

9. Create a Root View in render’s return block. Now make a FlatList and render the JSON data inside FlatList.

10. Now make the CHANGE TO GRIDVIEW Button using TouchableOpacity. We would set the Button above text using ButtonDefaultText State.

11. Create CSS Styles for Root View, Flat List and Text component and Image component.

12. Complete source code for App.js File :

Screenshot in Android app :

Change ListView ModeScreenshot in iOS device:

6 Comments

  1. Thank’s for all the tutorials!
    i’m learning React Native trough this website and waiting for offline/embedded database tutorial, like sqlite. can React Native do it?

  2. Thanks for great tutorial for beginners

Leave a Reply

Your email address will not be published.