Axios in React Native

Axios in React Native is a popular promise-based HTTP client used to make network requests from a React Native app to APIs. It simplifies sending and receiving data compared to the built-in fetch API.

• Used to perform GET, POST, PUT, DELETE requests to backend servers or REST APIs.
• Provides automatic JSON data transformation, making it easier to handle API responses.
• Supports interceptors, request cancellation, and error handling, improving control over network calls.

• axios.get() sends a GET request to the API.
• response.data contains the data from the server.
• .catch() handles errors if the request fails.

Syntax

// GET Request 
axios.get(url, config)

// POST Request 
axios.post(url, data, config)

// PUT Request 
axios.put(url, data, config)

// DELETE Request
axios.delete(url, config)

// PATCH Request 
axios.patch(url, data, config)

Features

• Promise-based API – Uses async/await and .then() for easier asynchronous handling.
• Supports all HTTP methods – GET, POST, PUT, PATCH, DELETE.
• Automatic JSON conversion – Converts request and response data to JSON automatically.
• Interceptors support – Modify requests or responses globally (e.g., add auth tokens).
• Error handling – Provides detailed error information for failed requests.
• Request cancellation – Cancel ongoing requests to save resources.
• Timeout support – Set time limits for API requests.
• Works with REST APIs easily – Simplifies communication with backend servers.

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 Request

GET Request in Axios (React Native) is used to retrieve data from a server or API. The axios.get() method sends a request to the specified URL and returns the response.

• Used to fetch data from an API by providing the URL and optional parameters.
• The response contains data, status, and headers if the request is successful.
• Errors are handled using .catch(), and .finally() can run code after completion.

• axios.get(URL) fetches data from the API.
• response.data contains the fetched data.
• .catch() handles errors and .finally() runs after completion.

Syntax

axios.get(url, {
 params: {
 key1: value1,
 key2: value2
 }
})
.then(response => {
 // handle success
})
.catch(error => {
 // handle error
})
.finally(() => {
 // runs every time
});

• url : API endpoint to fetch data from.
• params : Optional parameters sent with the request.
• .then() : Executes when request is successful.
• .catch() : Executes if an error occurs.
• .finally() : Executes after request completes (success or error).

POST Request

POST Request is used to send data from your React Native app to a server or API. The axios.post() method sends data in the request body and returns the response.

• Used to send data to a server, such as form data or user information.
• The request body contains the data, and the server returns a response.
• Errors are handled using .catch(), and .finally() runs after completion.

• axios.post() sends data to the server.
• The object { title, body, userId } is the request data.
• response.data contains the server response.

Syntax

axios.post(url, data, {
 headers: {
 key: value
 }
})
.then(response => {
 // handle success
})
.catch(error => {
 // handle error
})
.finally(() => {
 // runs every time
});

• url : API endpoint.
• data : Information you want to send to the server.
• headers : Optional request headers.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

• For the Android Emulator, press "a" as mentioned in the image below.
• For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding'

- Import libraries: Import required libraries at the top of the file.

- StyleSheet: Create a StyleSheet to style components like container and advice.

We will make a GET request with Axios in React Native. We will use the Advice Slip API for this example. This API takes id as parameters and provides advice associated with that id.

- getAdvice: This function is to make a GET request and update the state.

We will declare a function that randomly generates 1 id and we will pass this id in params in Axios GET request.

- getRandomId: This function is to generate a random ID within min and max every time.

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 the advice slip API and fetch one random advice. Later on, we will display this advice on the screen using a Text component.

- Button: This component interact with the user and when user click on it, it will call the getAdvice method.

- Text: This component is used to display the response coming from the getAdvice method.

- useState: This is used to declare a state variable 'advice' to store the advice text and update it.

Now, wrap the Button and Text components with a View component and return from the App component. Also, ensure to export the App.

App.js:

Output