How to Use Axios in React Native

By using Axios in React Native, you can easily send and receive data from a server, making it an essential tool for any mobile app developer.

Getting started

We'll use the [Expo CLI](Installation - Expo Documentation) to set up our React Native project. Expo CLI is a command-line interface that allows developers to easily create, develop, and deploy React Native applications.

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 would need to download Expo Go from the app store or playstore to view your application. Scan the QR code you see in your terminal from your camera or Expo Go application.

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

Server Error on Expo Go

To fix 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 a GET request using Axios

Navigate to the index.js file you created from step 3. Next, we'll add the necessary event listeners to capture file inputs. Let’s use the Famous Quotes API from the Rapid API hub for this example.

Go ahead and import the necessary modules in your index.js file:

js
Copy
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

Then we will create a functional component named 'API' and define a state variable quote using the useState hook. We are also defining a function setQuote to update the state variable quote.

js
Copy
const API = () => {
  const [quote, setQuote] = useState('');
}

Then, we will use the useEffect hook to make an API call to fetch a random quote. We will be passing an empty array as the second argument to ensure that the effect runs only once when the component mounts.

js
Copy
useEffect(() => {
  const options = {
    headers: {
      'X-RapidAPI-Key': 'your-rapid-api-key',
      'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com'
    },
    params: {
      category: 'all',
      count: '1'
    }
  };
  axios.get('https://famous-quotes4.p.rapidapi.com/random', options)
    .then(response => {
      if (response.data && response.data[0]) {
        setQuote(response.data[0].text);
      } else {
        console.log('No quote found in response');
      }
    })
    .catch(error => {
      console.log(error);
    });
}, []);

Lastly, render the component with the fetched data.

js
Copy
return (
  <View>
    <Text>Random Quote:</Text>
    <View>
      <Text>{quote}</Text>
    </View>
  </View>
);

That's it! These steps are involved in setting up a simple React Native application with an API call using Axios. Here's the entire code:

js
Copy
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
const API = () => {
  const [quote, setQuote] = useState('');
  useEffect(() => {
    const options = {
      headers: {
        'X-RapidAPI-Key': 'your-api-key',
        'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com'
      },
      params: {
        category: 'all',
        count: '1'
      }
    };
    
    axios.get('https://famous-quotes4.p.rapidapi.com/random', options)
      .then(response => {
        if (response.data && response.data[0]) {
          setQuote(response.data[0].text);
        } else {
          console.log('No quote found in response');
        }
      })
      .catch(error => {
        console.log(error);
      });
  }, []);
  return (
    <View>
      <Text>Random Quote:</Text>
      <View>
        <Text>{quote}</Text>
      </View>
    </View>
  );
}
export default API;

You will see something like this on your phone screen:

A random quote fetched and displayed on the screen

Wrap up

In conclusion, this guide has walked you through the steps of setting up a simple React Native application using the Expo CLI, installing dependencies, and making API calls with Axios. We have written a series of guides on Axios which you can read here.