Read More
Read now

How to Hit Api in React native and set Data in Flat List

Save

API integration in react native

In react-native we can use the fetch as per our need you can simply call the URL through fetch and make requests to the server as per need.

Lifecycle Method in React Native: There are several lifecycle methods in react-native. We’ll be using three of these lifecycle methods in this article: constructor, componentDidMount and Render.

First Step:

Firstly I will create the data source which stores the JSON data in the array.

Second Step:

After completing the constructor part, We now move along with the part we are here for, i.e fetching data from an API for listing.

Now we will use the componentDidMount method as I want the API to be called at the beginning of the app.

I used the fetch to call the URL and then it returned a promise with then and catch. It’s similar to try and catch. The response from the API is in form of JSON which is fetched and then set into states we have already created. Check out the code for a more better understanding.

Third Step:

Now we have store the data in a dataSource array and now we move to design part. now we will use flatlist to show the data.

FlatList is a component of react native and It’s an easy way to make an efficient scrolling list of data. and we used render function to make the UI.

So here is the complete code for that.

Now once you are done with all the coding part here is how the screen will look to you.

 

 

Conclusion

We learned about what is an API and how it works to react native. We learned about the FlatList and how to use it in react-native and also there various lifecycle methods used in react-native.

 

 

 

 

 

 

. . .

Leave a Comment

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


2 comments

  • Domingos Amândio Neto
    How do I show all data from an api like this

    [
    {
    “id”: “1”,
    “data”: “any”,
    “Exemplo”: [
    {
    “id”: “1”,
    “data”: “any”
    },
    {
    “id”: “2”,
    “data”: “any”
    }
    ]
    },
    {
    “id”: “2”,
    “data”: “any”,
    “Exemplo”: [
    {
    “id”: “1”,
    “data”: “any”
    },
    {
    “id”: “2”,
    “data”: “any”
    }
    ]
    }
    ]

    }

    ]

    • jitendra kumar (Moderator)
      Hello,

      Kindly contact us at [email protected]. So that we could assist you in a better way.

      Thanks.

  • css.php

    Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!

    Deniel Kerr

    Owner and Founder. Opencart

    Talk to Sales
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home