React Native is a powerful platform for creating mobile applications. It is open-source and allows developers to use their existing web development skills to create mobile apps for both iOS and Android. One of the most useful features of React Native is the ability to make API requests.

In this guide, we’ll show you how to make API calls in React Native, using two popular libraries: the Fetch API and Axios. We’ll also discuss how to parse JSON data and display it in the React Native UI.

![api calls react native](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover2.jpg)
## Making Requests with the Fetch API in React Native

The Fetch API is a built-in browser API for making HTTP requests. It is supported by all major browsers and React Native provides a wrapper around it.

To make a request, you simply call the &#96;fetch()&#96; method, passing in the URL of the API endpoint. The &#96;fetch()&#96; method returns a &#96;Promise&#96; object, which contains the response from the API.

For example, to make an API request to the GitHub API, you could use the following code:

&#96;&#96;&#96;javascript
fetch(&#x27;https:&#x2F;&#x2F;api.github.com&#x2F;users&#x2F;johndoe&#x27;)
  .then(response =&gt; response.json())
  .then(data =&gt; {
    console.log(data);
  });
&#96;&#96;&#96;

The &#96;response.json()&#96; method parses the response body as JSON and returns a &#96;Promise&#96; object containing the parsed data. You can then access the data by calling the &#96;then()&#96; method on the &#96;Promise&#96; object.

## Making Requests with Axios in React Native

Axios is a popular library for making HTTP requests. It is easy to use and provides a number of helpful features, such as automatic transforms of JSON data.

To make a request with Axios, you simply call the &#96;axios.get()&#96; method, passing in the URL of the API endpoint. The &#96;axios.get()&#96; method returns a &#96;Promise&#96; object, which contains the response from the API.

For example, to make an API request to the GitHub API, you could use the following code:

&#96;&#96;&#96;javascript
axios.get(&#x27;https:&#x2F;&#x2F;api.github.com&#x2F;users&#x2F;johndoe&#x27;)
  .then(response =&gt; {
    console.log(response.data);
  });
&#96;&#96;&#96;

The &#96;response&#96; object contains the response data from the API. You can access the data by calling the &#96;then()&#96; method on the &#96;Promise&#96; object.

## Parsing JSON Data in React Native

Once you have retrieved the response from the API, you will need to parse it as JSON. This can be done using the &#96;JSON.parse()&#96; method.

For example, to parse the response from the GitHub API, you could use the following code:

&#96;&#96;&#96;javascript
const data = JSON.parse(response);
console.log(data);
&#96;&#96;&#96;

The parsed data will be an object that contains the response data. You can then access the data by calling the &#96;console.log()&#96; method to display the data in the console.

## Displaying API Data in React Native

Once you have parsed the response from the API, you can display it in the React Native UI. This can be done using the &#96;&lt;Text&gt;&#96; component.

For example, to display the data from the GitHub API, you could use the following code:

&#96;&#96;&#96;javascript
&lt;Text&gt;
  {data.name}
&lt;&#x2F;Text&gt;
&#96;&#96;&#96;

The &#96;&lt;Text&gt;&#96; component will render the data as text in the React Native UI. You can also use other components such as &#96;&lt;Image&gt;&#96; or &#96;&lt;View&gt;&#96; to display the data in a more structured way.

## Conclusion

In this guide, we’ve shown you how to make API calls in React Native, using two popular libraries: the Fetch API and Axios. We’ve also discussed how to parse JSON data and display it in the React Native UI. With these tools, you’ll be able to make powerful API requests and display the data in an effective way.

How to Make API Calls in React Native

About

Legal

Products

Resources

Category: