You may be wondering if you can make a GET request from the React Native app. You know the answer is yes. If you are unaware, this article will give you detailed steps on how to make a GET request to an API from  React Native apps.

Making GET requests is a vital segment when you want to retrieve data from a  particular web server. To hire react native developers may not be suitable for you, so we make a detailed effort to explain each code line in this tutorial.

What is a GET request?

A GET request is a process to get data or any information from an online site. In simple terms, it is the order that you make for anything over the internet. GET requests are somewhat similar to HTTP requests. With GET requests, you can fetch or retrieve information from a site without affecting the data.

Whether the data that you receive is organized or not depends on the extra effort that you put into the codebase. You can display the data in an organized manner by importing different components such as ScrollView, Pressable, and Buttons. Since we are only concerned about making GET requests, we will cover the beginner phase of API calling using GET requests.

API Call

As far as the API Call is concerned, it is the middleman which allows you to fetch the data. For example, if you want to make an online purchase, take the role of an eCommerce platform as the API. API is abbreviated as Application Programming Interface. Hope you have got a brief idea of API calls, let’s now become familiar with the concept of API.

What is API?

API can be protocols, procedures, and tools that establish a sort of connection between two apps. It is also referred to as the software using which you fetch data from online sites. While creating an API, you may need an API. It not only makes the development process easy but you don’t have to repeat the complex coding process.

So that you have become familiar with these two concepts of GET requests and API calls, let’s see some of the terms or rather specific React Native components that we have used in this tutorial.

Considered terms or React Native  components

1. ScrollView-  It is the container that users use for scrolling different views and components. Let’s take the case that you have huge data or information that you want to show on your app screen. You have  to import the ScrollView component from React Native to allow your users to scroll through every item.
2. useState- Users use the useState Hook from  React. This is to track the state variable of functional components.  In React Native components, you have to use useState as this.state.
3. useEffect- useEffect is another Hook that you can use in your project. However, you need to import this Hook from React.  With useEffect, you can undertake common operations like fetching data, timers, and updating DOM.
4. ActivityIndicator- It is a  component of react native that displays a loading symbol in a circular motion. You can design the color and size of an ActivityIndicator as per your needs.
5. Console.log- Console.log is a JS-based function that prints variables or any messages. As soon as you start the Metro bundler on the cmd to run your react native, you can see the console log in the terminal.

A detailed explanation of code lines

Follow along the code lines and the below-given explanation for the respective segments of the code base.

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

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

• Import useEffect and useState from
• Import ScrollView, View, Text, and ActivityIndicator from React Native.

const App = () => {

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

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

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

• const App is a function that returns ReactNode.
• It will contain different objects with specific properties such as isLoading, response, and error.
• Using the useState function, you can change the variable of the state for each property.
• The error variable is set as false until it shows any form of error on API calls.
• The isLoading variable is true till the fetched data loads are displayed on the screen.
• The response variable is set as null until the GET requests get a data response from the web server.

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’,

},

})

• With useEffect, fetch data from the URL https://covid-19-statistics.p.rapidapi.com/regions.
• Since API creation is a backend operation, we get a sample API from com.
• Here, I have chosen an API URL to collect data on the regions that are affected by Covid.
• Please note, that you have to take the particular API key and API host for the
• Using this fetch() function, I will show a JSON response from the web server.

.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);

});

}, []);

Read Also: Does Cybersecurity Require Coding?

• With .then(), I have called the data response in JSON format.
• setIsLoading is specified as false and setResponse as data. The former variable setIsLoading is false as the web server is done with loading and shows the data from the server in setResponse.
• .catch(error => is used to print an error with the text ‘Something failed miserably’ in case any error shows up in the API calling process.

return (

<View>

{isLoading ? (

<ActivityIndicator size={30} />

) : error? (

<Text>ERROR OCCURED</Text>

) : (

<ScrollView>

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

</ScrollView>

)}

</View>

);

};

export default App;

• With <View></View>, I have designed the operations of the fetched data.
• It states that if it is loading, the ActivityIndicator with  loading  indicator will show up, or else it will display the text ‘ERROR OCCURED’
• It also contains the <ScrollView> to display the requested data in JSON string format.

Summary

Making GET requests to an API  has never been so easy. Right? You might have to search for some data in the internet browser. However, this article has made use of a react native app to make API calls with GET requests. So the wait is over. Get your hands on creating a real-time React Native expo app and make custom API calls from any web servers you want.