Consuming an API using a React Native application

What’s an API?

This is what Mr.Google tells

We are going to create a simple react native application that accesses the NEWS API ( a set of functions and procedures) which provides the information about day to day news from different sources.

Create a react native app

Go to the console and type the below command to create a react native app (if you haven’t set up your environment for react-native follow the instructions here and then use the below command to create a new application)

react-native init NewsDataApp
cd NewsDataApp</span>

Since we will be using the native base components for the application user interface, we need to install them in our application folder using the below command.

npm install native-base --save</span>

And the dependencies of any npm package won’t be installed automatically so use the below command inside your application folder.

react-native link</span>

NEWS API

We will be using https://newsapi.org API to get the news data to use in our application.

It’s a platform which provides news data from various sources around the globe and it covers various topics. We can get specific country news or even industry-specific news like fashion, healthcare, technology etc. from various news journals and blogs on the internet.

For accessing the API, if you are a developer they provide a free account so you just need to register with the website. And they provide you with a unique API KEY, with which you can access the news data.

For example, if you want to access the top headline news from Tech Crunch, you can fetch it using the below URL along with your unique API KEY

[http://newsapi.org/v2/top-headlines?**sources=techcrunch**&apiKey=API_KEY](http://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=API_KEY)</span>

Click here to get to know in detail about the API and what are the various options it allows for fetching news data.

Testing an API

There are a lot of tools available to test an API and check how the result data is being received from the API server. One such tool is postman, which is a very powerful tool that can be used way beyond simple API testing. Here we will use it to test and check the API data.

1. The URL bar where we will put in our API request URL, and select the request type(i.e. GET, POST, PUT, DELETE etc.) and hit the “Send” button.
2. Custom formats(here it’s JSON) in which we want to view the result data.
3. API result data(list of news from various sources) received from the API server.

Building the application

Let’s build the NEWS app.

Open your react native application folder using any text editor,I personally recommend Visual studio code. And you can see the folders in the below structure.

I have created an src folder, with two subfolders /components(where all my react components reside)and /global(it holds the constant file, that will be used throughout the application).

App.js

In React Native there are many lifecycle methods that are essentially called(automatically by React Native) at different stages when a component gets rendered.

In App.js we use a lifecycle method called ComponentDidMount()as the name suggests this method is called when the component mounts on the DOM for the first time when it does that it calls whatever block of code we write inside that. So we will call our function getData()(calls the NEWS API and fetch the data) inside this method.

In getData() function we will use the Javascript native method called Fetch, it’s a networking API used for performing REST API calls. Here we use a simple GET request to the NEWS API which will return a set of data which can be parsed to JSON and used in our application. We have declared a constructor as well where we set the state value of variable data to an empty array and later use it to store the data from API.

Below is the App.js file, for reference.

ArticleData.js

In this component, we have built the entire application’s UI by importing Nativebase components.

We have used the basic Card component from Nativebase and used them to loop through our API data. Below is the Card design.

Card sample

1. Article source name
2. Article title
3. Article Image
4. News description
5. Full link to the source article

Below is the ArticleData.js file, for reference.

Running the React Native application

To run the application and check how it works. In the terminal window of your application folder, run below commands.

For ios app(in Mac)

react-native run-ios</span>

android app

react-native run-android</span>

Eureka !!

News App in an iPhone simulator

And that’s all we have here, if you like the blog hit some claps or if you have any queries drop in your responses will help out in whatever way possible :)

Photo by Belinda Fewings on Unsplash

Link to the Github repo.