How to Make API Calls in React Native

Guest User

3 years ago

How to Make API Calls in React Native

With API calls, you can request some information or data from other applications. Apart from the brief description of the concept of GET requests and API calls, this article provides you with the learning of how you can make API calls in React Native.

We have extended the concept of React Native mobile app development services in a way to associate React Native app development with making API calls through GET requests.

What is a GET request?

GET request refers to the process of obtaining data from a web server. With GET requests imported into your codebase, you make an order to get certain information. In this process, you make API calls. Using GET method, you don’t make any changes to the collected data but only create a pathway to display the same to the defined screen. The method of making GET requests is similar to that of HTTP requests.

GET requests cannot be a direct process, you need some third-party applications. Here, API or API calls play the role.

What is an API?

API is an Application Programming Interface. It is the tool that establishes a link between two applications allowing you to fetch data from an internet server. If you are creating a program, using API will pace up the development process by simplifying the repetition of code. Thus, API can be a time savior and productivity enhancement tool.

Now let’s discuss the steps of how you can use API calls and GET requests simultaneously to fetch data from a defined web server.

Prerequisite terms used in the tutorial

useEffect- useEffect is a React Hook that allows users to perform operations like collecting data, and set timers within the defined components. You have to import useEffect from React.

Console.log- It is a JS function that prints any defined variables. It is also used to print or display messages to users.

useState- useState is particularly used in functional components. You can import useState() from React to get the state variables. It means that you can specify the state of every variable used in the project.

ActivityIndicator- Users import ActivityIndicator from React Native to show the loading state of any operations like data loading. With this component, you can display a loading indicator on the screen.

ScrollView- It is a scrolling-based container containing numerous views and components. It loads every content and allows you to display those content on screen.

Detailed explanation of codelines

import React, {useEffect, useState} from ‘react’;

import {ActivityIndicator, ScrollView, Text, View} from ‘react-native’;

Start the code line by importing useState and useEffect from React. It will allow you to change the state of different variables and fetch data from the chosen web server respectively.
Next, import different react native components such as ScrollView, View, Text, and ActivityIndicator.

const App = () => {

const [isLoading, setIsLoading] = useState(true);

const [response, setResponse] = useState(null);

const [error, setError] = useState(false);

const App is a function under which I have included different objects isLoading, response, and error.
I have used useState to define the state variable of each object.
useState of isLoading is true as it defines that the API called for fetching data is loading.
useState of response is null since the data called from the server is not in the response container.
useState of error is false as it defines that there is no error in submitting data.

useEffect(() => {

fetch(‘https://covid-19-statistics.p.rapidapi.com/regions’, {

method: ‘GET’,

url: ‘https://covid-19-statistics.p.rapidapi.com/regions’,

headers: {

‘X-RapidAPI-Key’: ‘5ad52ae891msha57664fb78d9e38p1be7edjsn79ae240f9e3a’,

‘X-RapidAPI-Host’: ‘covid-19-statistics.p.rapidapi.com’,

})

Using the functions useEffect() and fetch(), I have made an API call from https://covid-19-statistics.p.rapidapi.com/regions.
Creating an API is a backend operation. Since in this tutorial we are focused on frontend operation, I have taken a sample API URL from a website rapidapi.com.
It is a quite useful site where you can access thousands of free APIs without any subscription.
However, note that you have to take the key and host of the same API URL. in the above code line, you can see that I have added the API key and the API host under headers.

.then(response => response.json())

.then(data => {

console.log(‘data’, data);

setIsLoading(false);

setResponse(data);

})

.catch(error => {

console.log(‘something failed miserably’);

setIsLoading(false);

setError(true);

});

}, []);

Using the .then() function I will collect the data response in json format.
Here, console.log() is used to show the response in the expo terminal.
Two variables setIsLoading and setError have been used. One is to display whether the data is loading or not. The other variable setResponse shows the JSON data if setIsLoading is false.
.catch (error) is used to log the error in the project terminal if setError is true and setIsLoading is false.

return (

<View>

{isLoading ? (

) : error ? (

<Text>ERROR OCCURED</Text>

) : (

<Text>{JSON.stringify(response)}</Text>

</ScrollView>

)}

</View>

);

};

export default App;

return() function is used for two operations.
One for showing ActivityIndicator if the state isLoading is true or not.
Another operation is to display the JSON response in string format.
Also, the code states that if the isLoading state is false and is unable to print the data. It will show some text ‘ERROR OCCURED’.
The <ScrollView> is used to allow users to scroll through all the data.

Conclusion

API calls being a crucial part of the react native app development services, this article provides a hand-on experience of the process. Also, if you are not aware of backend API creating operations, we have made an effort to do the research on your behalf and made the API calling process super easy. Check this article to take your app development journey to the next level.