Handling API in React Native
If you’ve worked on any project with a list of elements, such as name, address, images, videos, etc., then you’ve most likely seen the term API.
API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you’re using an API.
How Does an API Work?
Imagine that you’re sitting at a table in a restaurant, with a menu of choices to order from. The kitchen is the part of the “system” that will prepare your order. What’s missing is the critical link to communicate your order to the kitchen and deliver your food back to your table.
That’s where the waiter, or API, comes in. The waiter is the messenger (or API), that takes your request and tells the kitchen (the system) what to do.
Then the waiter delivers the response back to you — in this case, it is the food.
Basic Terms You Must Know:
If you are familiar with JavaScript and ES6, then you must be familiar with fetch.
fetch is a fantastic networking API that was made for React Native, but because it is relatively new, there are a few things to be aware of when using it.
Promise: a Promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value, or reason for failure, will materialize. It will either give you a response or an error, i.e. rejection.
Integrating an API in React Native:
In React Native, we can use the Fetch to suit our needs. You can simply call the URL through Fetch, and make requests to the server as needed.
Lifecycle method in React Native. There are several lifecycle methods to React Native. We’ll use three of these lifecycle methods in this article; constructor, componentDidMount and Render.
I’m assuming you’re aware of states and constructor, and their use in React Native. If not, please go through the basics here, and return here to enjoy the fun of handling an API.
First Step
Here, I created two states. One is a boolean state and the other is an array.
The loading state is for the loader image, which is displayed until the API calls are made in the back end, and data is fetched.
Datasource is an empty array, in which all the JSON values will be added; to be used later in our code.
Second Step
Once the constructor part is finished, we’ll continue with the part that we’re here for — fetching data from an API for listing.
We will now use the componentDidMount method, as I want the API to be called at the beginning of the app.
As an URL, I am using a dummy API, which you can easily find by Googling.
I used the Fetch to call the URL, and it then returned a Promise with then and catch. It’s similar to try and catch.
The response from the API is in the form of JSON, which is fetched and then set into states that we have already created.
Check out the code to illustrate this:
Final Step
Now, the final part — using this data we fetched in our React Native project.
We will be using the FlatList component of React Native for the listing, as this is advised and easy to implement. In our render function, we will write the code as:
The FlatList component asks for a source, a key, and what needs to be rendered.
We’ll be using the datasource as a source for content, id value as the key, and the view we need is to be rendered in the renderItem method.
We want a simple listing of a person’s name, email id, and the company the person belongs to.
So here’s the code for that.
You can add styling and more elements. You can add as many as you need, and are present in the array JSON.
I’ll provide you with the full code snippet here. Check it out and rule API like a boss!
Now please, don’t just copy and paste the code — it spoils all the efforts in this article.
Once you are finished with the coding part, here’s how the screen will look to you.
Conclusion
We learned about what an API is, and how it works. We learned about FlatList and how to use it in React Native. We learned about the various lifecycle methods used in React Native.
Now it’s time to get out there and list everything, from your future plans to your favorite destinations, in your app.
Please feel free to leave any feedback.
