React Native Create FlatList using JSON Parsing Data Example Tutorial

FlatList is the advance version of ListView with more user handy features like it is fully cross platform and dose support both Android and iOS mobile phone devices. It has also an optional horizontal mode which is used to display the FlatList in horizontal mode. So in this tutorial we would going to create a simple FlatList using JSON Parsing Data which is coming straight from our online hosting server android and iOS tutorial. The JSON data is already stored into a MySQL database. So let’s get started ūüôā .

Contents in this project Create FlatList using JSON Parsing Data :

1. Create MySQL database on your local or online hosting server.

2. Inside that MySQL database create a fresh table named as FruitsNameListTable with 2 columns first one is id second is fruit_name . Set id as primary key in MySQL table. Now insert some records inside your MySQL database table like i did in below screenshot.

3. Create PHP Script to Convert MySQL database data into JSON form :

Create 2 PHP files 1st one is DBConfig.php and 2nd is FruitsList.php.

FruitsList.php : This file would get all the Records from MySQL db table and ECHO (Print) them on screen into JSON data form.

DBConfig.php : This file holds all the important information like Server Host Name, Database Name, Database Password and Database User Name.

Code for DBConfig.php file :

Code for FruitsList.php file :

Screenshot of JSON data after uploading and running FruitsList.php file into web browser :

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

5. Import AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform in import block.

6. Create constructor with props parameter. Define a new state variable inside the constructor named as isLoading and set its value as True . This variable is used to show and hide the ActivityIndicator after parsing the JSON data into FlatList.

7. Create componentDidMount() method after constructor. This is a inbuilt function and automatically called on App start time. Inside the componentDidMount() function define the fetch web API code. The JSON would be parse using fetch API.

8. Create FlatListItemSeparator() function after componentDidMount() function. This function would Create a custom FlatList item divider line between each FlatList item.

9. Create GetFlatListItem() function . This function is used to PRINT the selected FlatList item value using Alert message on app screen.

10. Set a if condition inside the render block. Using this if condition we would check the isLoading state’s value and show and hide the¬†ActivityIndicator .

11. Now create FlatList component inside the render’s return block inside a Parent View.

data : Set the dataSource created in componentDidMount() method inside the fetch API.

ItemSeparatorComponent : Call the FlatListItemSeparator() function.

renderItem : render the FlatList item using Text component.

onPress : Call the GetFlatListItem function to show the clicked item value.

12. Create Custom Style sheet class.

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

Screenshot of Application in iOS mobile phone device :

FlatList using JSON Parsing Data

Screenshot of Application in Android mobile phone device :

10 Comments

  1. how to re-render flatlist item on load after add data item in mysql? and how to use extraData attribute in flatlist?

  2. Is there any way out to create .PhP files in React native itself…

    or we must use text editors only…..

  3. Thank you so much for this .. you have no idea how much i needed it. i have one question please, what if i want to fetch the json file from the app directory instead of the web.. the same file you scereenshoted .. it creates an error.
    (attempt to invoke string.equals(object) on a null ref)

  4. hey it is possible to fetch data without using listview or flatlist?
    like in simple View components?

  5. Michael Humphries

    Thanks – this is really helpful

  6. Hello My friend, very much tanks for the tutorial, i have a trouble when run the application, i get the error “Unexpected token < in JSON at position 0". You know how i can fix it.

    my dependences
    "dependencies": {
    "expo": "^35.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "0.59.10",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.2.0",
    "react-native-screens": "~1.0.0-alpha.23",
    "react-native-unimodules": "0.6.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3"

    Thanks in advance.
    Berna.

  7. how to bind one or more field in
    renderItem={({item}) => {item.firstname} }

    here

    and I got a warning in your code failed child context type : invalid child context ‘virtuilizedCell.cellKey’

Leave a Reply

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