How to use Fetch API with React Native?

This is where the Fetch API comes in; it's a modern JavaScript API for making API requests supported by most modern browsers and environments, including React Native.

Getting started

To get our React Native project up and running, we'll use the Expo CLI. Expo CLI is a command-line interface for creating, developing, and deploying React Native apps.

Step #1

Install Node.js and npm on your computer. You can download the installer from here.

Step #2

Open a command prompt or terminal window and run the following command:

sh
Copy
npx create-expo-app@latest --example with-router

Step #3

Create a new folder and make an index.js and _layout.js file in it. Add the following code in your _layout.js file:

js
Copy
import { Stack } from "expo-router";
export default function Layout() {
  return <Stack />;
}

Step #4

Once you’ve created these files, install Axios by running this command:

sh
Copy
npm install axios 

Start the development server by running the following command:

sh
Copy
npm start

You will see something like this in your terminal:

Project terminal output

You need to download Expo Go from the app store or play store to view your application. Scan the QR code you see in your terminal from your camera or Expo Go application.

This might not apply to everyone, but you might see this error the first time you open your application:

Server Error on Expo Go

To solve this, simply run the following command to globally install the expo-cli package, which is used to run our application:

sh
Copy
npm install -g install expo-cli

Once it is installed, run this command:

sh
Copy
expo-cli start -- tunnel

Now you will be able to see your expo react native application on your phone.

Making API requests using Fetch API

Now let's dive into making API requests using Fetch API in a React Native component.

When using Fetch API in a React Native component, the first step is to import the API endpoint you want to retrieve data from. You can do this using the fetch() method, a global method available in all modern browsers and environments, including React Native.

Here's an example of how to use Fetch API to make a GET request to an API endpoint:

js
Copy
fetch('https://my-api.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

It's important to note that fetch() returns a Promise, which means you can use async/await syntax to make your code more readable and avoid callbacks. Here's an example of how to do this:

js
Copy
async function fetchData() {
  try {
    const response = await fetch('https://my-api.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

Demo

In the index.js file you created earlier, we'll now write our code for fetching the data. For this example, we'll be using the Quotes API by API Ninjas from the Rapid API hub.

js
Copy
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
const App = () => {
  const [quote, setQuote] = useState('');
  useEffect(() => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Key': 'cee3bd1e22msheedb98e87dec740p196316jsn6d22f5917037',
        'X-RapidAPI-Host': 'quotes-by-api-ninjas.p.rapidapi.com'
      }
    };
    fetch('https://quotes-by-api-ninjas.p.rapidapi.com/v1/quotes', options)
      .then(response => response.json())
      .then(data => setQuote(data[0].quote))
      .catch(error => console.error(error));
  }, []);
  return (
    <View>
      <Text>{quote}</Text>
    </View>
  );
};
export default App;

You will see something like this on your application:

A random quote fetched and displayed on the screen

We created a React Native component that fetches a random quote from the Quotes by API Ninjas API using the fetch() function, sets it using useState(), and displays it in a Text component. The useEffect() hook ensures that the API is only called once when the component is mounted.

Add styling

You can add some styles to your application by adding a StyleSheet component.

js
Copy
import { View, Text, StyleSheet } from 'react-native';

Then add the following styles in your index.js file:

js
Copy
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center,'
    backgroundColor: '#F5FCFF',
  },
  quoteText: {
    fontSize: 24,
    fontStyle: 'italic',
    textAlign: 'center',
    marginHorizontal: 20,
  },
});

You can modify these styles to suit your needs and create a more visually appealing app. This is how your application would look with a little bit of styling:

Added styling to the application

Wrap up

The Fetch API provides a straightforward way to make API requests in React Native. We demonstrated how to use the Fetch API to make requests to the Quotes by API Ninjas API and display a random quote using a simple React Native component.

We have also written a similar guide on how to use Fetch API with Axios, which you can read here.