How to Make API Calls in React Native

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.

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 fetch() method, passing in the URL of the API endpoint. The fetch() method returns a Promise 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:

fetch('https://api.github.com/users/johndoe')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

The response.json() method parses the response body as JSON and returns a Promise object containing the parsed data. You can then access the data by calling the then() method on the Promise 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 axios.get() method, passing in the URL of the API endpoint. The axios.get() method returns a Promise 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:

axios.get('https://api.github.com/users/johndoe')
  .then(response => {
    console.log(response.data);
  });

The response object contains the response data from the API. You can access the data by calling the then() method on the Promise 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 JSON.parse() method.

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

const data = JSON.parse(response);
console.log(data);

The parsed data will be an object that contains the response data. You can then access the data by calling the console.log() 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 <Text> component.

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

<Text>
  {data.name}
</Text>

The <Text> component will render the data as text in the React Native UI. You can also use other components such as <Image> or <View> 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.