React Native JSON FlatList with Images and Text iOS Android Tutorial

As you can see in our previous tutorials we have created several types of JSON flatlist and now we are creating completely dynamic custom JSON FlatList with Images and Text component in react native application. The images is uploaded on our online web hosting server and images URL(Path) along with image name is stored inside MySQL database. We are using PHP scripting language as a server language in order to convert MySQL database data into JSON format because react native supports JSON format and we should convert all the MySQL data into JSON in order to use inside react native app. So let’s get started 🙂 .

Contents in this project Create JSON FlatList with Images and Text in react native iOS Android react native app:

1. We already have define all the process of creating MySQL database, Storing images path along with their names in MySQL and converting MySQL data into JSON in our previous ListView tutorial, So read this tutorial Here before going further because we are using the same database and JSON.

Screenshot of JSON after running FlowersList.php file in web browser(Google chrome):

2. Import StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert and YellowBox components in your project’s class.

3. Create constructor() in your class and make a Boolean State named as isLoading and set its default value as True. This state is used to show and hide the ActivityIndicator on data loading. We would also putting the YellowBox warning ignoring code in order to remove the Yellow box warning message of Warning componentwillmount is Deprecated.

4. Create a function named as GetItem() with flower_name parameter, This function is called on FlatList single item click event and display us the selected flower name in Alert message.

5. Create a function named as FlatListItemSeparator(), This function would render a horizontal .5 pixel line between each FlatList item.

6. Creating a function named as webCall(), Inside this function we would call the JSON using fetch() web API method. We are calling the online URL and parse the fetched JSON in this function.

7. Creating componentDidMount() inbuilt function and call the above webCall() function. This function would automatically calls on app startup time so when the app stars it will parse the JSON.

8. Creating a IF conditional block with isLoading state in render’s block, So if the state value is true then it will display the ActivityIndicator and when data loading is stop or done then it will hide the ActivityIndicator.

9. Creating the FlatList component inside render’s return block to show JSON FlatList with Images and Text.

data : Setting up the dataSource state inside it.

ItemSeparatorComponent : Calling the FlatListItemSeparator() function to show separator line.

10. Creating Style.

11. Complete source code for App.js File :

Screenshot in Android device:

JSON FlatList with Images and Text Screenshot in iOS device:

18 Comments

  1. Can you provide a tutorial on how to send remote push notifications to desired user using mysql and php?

    • Sorry Shyam currently there are no proper component available in react native for push notification but when it came i will sure post tutorial regarding to your query.

  2. Bro, im having a situation, when the app tries to load data says JSON Parse error: unrecognize token <

    but when i test the json url, the values are correct, what am i doing wrong?
    you can test the data here: http://solutiontech.eshost.com.ar/1/data/

  3. Sorry for the delay jeje, i can’t, my client strongly told me that i cannot share the code even to get help. i will give you a pic of the issue better.

  4. bro, i curently am learning and using listview
    but i found out listview is soon deprecated
    should i migrate all my code to flatlist ?

  5. is there any way to extract json data without flatlist?
    i want to extract json data for dispalying in image for creating image swiper

  6. Admin Bro,

    Please make a tutorial on “How to take image from mobile camera” or gallery and insert into mysql database, by using online server.
    And CRUD operation with image…..

  7. Thanks for immediate reply Admin,

    we will be waiting……

  8. how will i assign two images in a row then next two images in next row using flatlist..

Leave a Reply

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