Axios is a widely used HTTP client for making REST API calls. You can use this in React Native to get data from any REST API.
Features of Axios:
- It can make both XMLHttpRequests and HTTP requests.
- It can understand all the requests and responses from an API.
- Axios is promise-based.
- It can transform the response in JSON format.
How to install Axios in React Native:
You can install Axios in your React Native project with either npm or yarn. Open the terminal on your computer and go to your project directory.
- Using npm:
npm install axios
- Using yarn:
yarn add axios
You can make both GET and POST requests with Axios in React Native:
- The GET request is used to get data from an API.
- The POST request is used to modify the data on the API server.
GET: axios.get() method is used to perform GET requests in Axios with React Native. It takes a base URL to get data. You can specify parameters that you want to pass with the base URL with params.
If it gets executes successfully, you will get a response. This response will contain data and other information regarding the request. If any error occurs, then the catch statement will get that error.
If you want something to execute every time, in that case, you can write that under the statement.
Syntax:
axios.get('/neveropen', {
params: {
articleID: articleID
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
POST: axios.post() method is used to perform POST requests in Axios with React Native. It takes the base URL and parameters to perform this action. You can specify parameters that you want to pass with the base URL through an object.
If it gets executes successfully, you will get a response. This response will contain of data and other information regarding the request.
If any error occurs, then the catch statement will get that error.
axios.post('/neveropen', {
articleID: 'articleID',
title: 'Axios in React Native'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Creating React Application:
Step 1: Open your Terminal and run the below command. It will install Expo CLI globally in your system.
npm install -g expo-cli
Step 2: Now, create a new React Native Project by running the below command.
expo init "Your_Project_Name"
Step 3: You’ll be asked to choose a template. Select blank template.
blank template
Step 4: Now go to the project folder and run the below command to start the server.
cd "Your_Project_Name" npm start
Step 5: install Axios with either npm or yarn command.
npm install axios
or
yarn add axios
Project Structure: It will look like the following.
Project Structure
We will make a GET request with Axios in React Native. We will use adviceslip API for this example. This API takes id as parameters and provides advice associated with that id.
We will declare a function that randomly generates 1 id and we will pass this id in params in Axios GET request.
There will be 2 components in our main App.js file, Text, and Button. When you press the button, Axios will make a GET request to adviceslip API and fetch one random advice. Later on, we will display this advice on the screen using a Text component.
If you want a full React Native project created with this, then use this GitHub repo.
Example: Open App.js file and write below code in that file.
Javascript
import { useState } from "react"; import { StyleSheet, View, Text, Button } from "react-native"; import axios from "axios"; export default function App() { const [advice, setAdvice] = useState(""); const getRandomId = (min, max) => { min = Math.ceil(min); max = Math.floor(max); return (Math.floor(Math.random() * (max - min + 1)) + min).toString(); }; const getAdvice = () => { axios getRandomId(1, 200)) .then((response) => { setAdvice(response.data.slip.advice); }); }; return ( <View style={styles.container}> <Text style={styles.advice}>{advice}</Text> <Button title="Get Advice" onPress={getAdvice} color="green" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, advice: { fontSize: 20, fontWeight: "bold", marginHorizontal: 20, }, }); |
Output:
GET request with Axios
