How to Use Axios in React Native

Fri Apr 14 2023

4 min read

React Native is a popular framework for building mobile applications.

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
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
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
npm install axios

Start the development server by running the following command:

sh
npm start

You will see something like this in your terminal:

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:

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

sh
npm install -g install expo-cli

Once it is installed, run this command:

sh
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.

Loading component...

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

js
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
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
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
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
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:

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.