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

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.

 

 

 

 

 

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close