How to make a Post request from frontend in react-native ?

Last Updated : 10 May, 2025

The POST method is used to send data to the server to create a new resource or modify an existing resource on the server. We cannot make a POST request by using a web browser, as web browsers only directly support GET requests.

But what if we want to develop an application where we need to add some data to the backend or modify existing data whenever the user clicks a button from the UI side? In that case, we have to make a post request from the frontend (For example, on click of a button)

For learning purposes, we generally use tools such as Advanced Rest Client or Postman to create or add new data.

Generally, whenever an API is triggered from the browser, a GET request is sent, and the data is fetched.

Approach

In this article, we will see how to make post requests in react native. We will trigger an API using the fetch method on the click of a button, and after getting a response from that API, we will show an Alert message. To trigger a Post request from the UI side in react -native, we can send the Request option as a second Parameter.

Making POST requests from the frontend involves sending data to a backend API. React Native offers built-in support with fetch() or axios libraries. To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

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.

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.
For iOS users, simply scan the QR code using the Camera app.
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: Create a new component folder (optional)

You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.

Step 4: Working with PostRequestExample.js

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

JavaScript

import React from "react"; // Import React library for building UI components
import {
    View, // Import View component for layout
    StyleSheet, // Import StyleSheet for styling
    Alert // Import Alert for displaying alerts
} from 'react-native';
import { Button } from "react-native-paper"; // Import Button component from react-native-paper library

- StyleSheet: Create a StyleSheet to style components like the btn.

JavaScript

// Define styles for the component
const styles = StyleSheet.create({
    btn: {
        marginTop: 60, // Add top margin
        marginHorizontal: 30 // Add horizontal margin
    }
});

- Button: This component is used to trigger the postExample function when the user taps on the button.

JavaScript

<Button 
    mode="contained" 
    onPress={postExample}
    >
    Click to make a Post request
</Button>

- postExample: This function is used to make a POST request.

JavaScript

// Function to make a POST request
const postExample = async () => {
    try {
        // Make a POST request to the API endpoint
        const response = await fetch('https://reqres.in/api/posts', {
            method: 'POST', // Specify HTTP method as POST
            headers: {
                'Content-Type': 'application/json', // Set content type to JSON
                'x-api-key': 'reqres-free-v1'  // Add API key in the headers
            },
            body: JSON.stringify({ postName: 'React updates' }) // Send data in the request body
        });

        // Parse the JSON response
        const data = await response.json();
        if (response.ok) { // Check if the response status is OK (200-299)
            console.log(data); // Log the response data to the console
            Alert.alert("Post created at:", data.createdAt || "No timestamp"); // Show success alert with timestamp
        } else {
            console.error(data); // Log the error response to the console
            Alert.alert("Error", data.error || "Request failed"); // Show error alert
        }

    } catch (error) { // Catch any errors during the request
        console.error(error); // Log the error to the console
        Alert.alert("Error", "Something went wrong."); // Show generic error alert
    }
};

- App Component: Wrap the Button with a View and return that inside the App function to render and place the postExample inside the App function, also make sure to export the App.

JavaScript

// Define the PostRequestExample functional component
const PostRequestExample = () => {

    // Function to make a POST request
    const postExample = async () => {
        try {
            // Make a POST request to the API endpoint
            const response = await fetch('https://reqres.in/api/posts', {
                method: 'POST', // Specify HTTP method as POST
                headers: {
                    'Content-Type': 'application/json', // Set content type to JSON
                    'x-api-key': 'reqres-free-v1'  // Add API key in the headers
                },
                body: JSON.stringify({ postName: 'React updates' }) // Send data in the request body
            });

            // Parse the JSON response
            const data = await response.json();
            if (response.ok) { // Check if the response status is OK (200-299)
                console.log(data); // Log the response data to the console
                Alert.alert("Post created at:", data.createdAt || "No timestamp"); // Show success alert with timestamp
            } else {
                console.error(data); // Log the error response to the console
                Alert.alert("Error", data.error || "Request failed"); // Show error alert
            }

        } catch (error) { // Catch any errors during the request
            console.error(error); // Log the error to the console
            Alert.alert("Error", "Something went wrong."); // Show generic error alert
        }
    };

    // Render the UI
    return (
        <View style={styles.btn}> {/* Apply styles to the container */}
            {/* Button to trigger the POST request */}
            <Button mode="contained" onPress={postExample}>
                Click to make a Post request
            </Button>
        </View>
    );
};

// Export the component for use in other files
export default PostRequestExample;

PostRequestExample.js:

JavaScript

import React from "react"; // Import React library for building UI components
import {
    View, // Import View component for layout
    StyleSheet, // Import StyleSheet for styling
    Alert // Import Alert for displaying alerts
} from 'react-native';
import { Button } from "react-native-paper"; // Import Button component from react-native-paper library

// Define the PostRequestExample functional component
const PostRequestExample = () => {

    // Function to make a POST request
    const postExample = async () => {
        try {
            // Make a POST request to the API endpoint
            const response = await fetch('https://reqres.in/api/posts', {
                method: 'POST', // Specify HTTP method as POST
                headers: {
                    'Content-Type': 'application/json', // Set content type to JSON
                    'x-api-key': 'reqres-free-v1'  // Add API key in the headers
                },
                body: JSON.stringify({ postName: 'React updates' }) // Send data in the request body
            });

            // Parse the JSON response
            const data = await response.json();
            if (response.ok) { // Check if the response status is OK (200-299)
                console.log(data); // Log the response data to the console
                Alert.alert("Post created at:", data.createdAt || "No timestamp"); // Show success alert with timestamp
            } else {
                console.error(data); // Log the error response to the console
                Alert.alert("Error", data.error || "Request failed"); // Show error alert
            }

        } catch (error) { // Catch any errors during the request
            console.error(error); // Log the error to the console
            Alert.alert("Error", "Something went wrong."); // Show generic error alert
        }
    };

    // Render the UI
    return (
        <View style={styles.btn}> {/* Apply styles to the container */}
            {/* Button to trigger the POST request */}
            <Button mode="contained" onPress={postExample}>
                Click to make a Post request
            </Button>
        </View>
    );
};

// Export the component for use in other files
export default PostRequestExample; 

// Define styles for the component
const styles = StyleSheet.create({
    btn: {
        marginTop: 60, // Add top margin
        marginHorizontal: 30 // Add horizontal margin
    }
});

Step 5: Working with App.js

Now call this PostRequestExample Component in the main "App" Component in App.js.

App.js:

JavaScript

import React from 'react';
import { View } from 'react-native';
import PostRequestExample from './components/PostRequestExample';

const App = () => {
    return (
        <View>
            <PostRequestExample />
        </View>
    );
};

export default App;

Or

You can write the whole code in one file, i.e, App.js.

Complete Source Code:

App.js:

JavaScript

import React from "react"; // Import React library for building UI components
import {
  View, // Import View component for layout
  StyleSheet, // Import StyleSheet for styling
  Alert // Import Alert for displaying alerts
} from 'react-native';
import { Button } from "react-native-paper"; // Import Button component from react-native-paper library


// Define the PostRequestExample functional component
const PostRequestExample = () => {

  // Function to make a POST request
  const postExample = async () => {
    try {
      // Make a POST request to the API endpoint
      const response = await fetch('https://reqres.in/api/posts', {
        method: 'POST', // Specify HTTP method as POST
        headers: {
          'Content-Type': 'application/json', // Set content type to JSON
          'x-api-key': 'reqres-free-v1'  // Add API key in the headers
        },
        body: JSON.stringify({ postName: 'React updates' }) // Send data in the request body
      });

      // Parse the JSON response
      const data = await response.json();
      if (response.ok) { // Check if the response status is OK (200-299)
        console.log(data); // Log the response data to the console
        Alert.alert("Post created at:", data.createdAt || "No timestamp"); // Show success alert with timestamp
      } else {
        console.error(data); // Log the error response to the console
        Alert.alert("Error", data.error || "Request failed"); // Show error alert
      }

    } catch (error) { // Catch any errors during the request
      console.error(error); // Log the error to the console
      Alert.alert("Error", "Something went wrong."); // Show generic error alert
    }
  };

  // Render the UI
  return (
    <View style={styles.btn}> {/* Apply styles to the container */}
      {/* Button to trigger the POST request */}
      <Button mode="contained" onPress={postExample}>
        Click to make a Post request
      </Button>
    </View>
  );
};

// Define styles for the component
const styles = StyleSheet.create({
  btn: {
    marginTop: 60, // Add top margin
    marginHorizontal: 30 // Add horizontal margin
  }
});

// Main App component
const App = () => {
  return (
    <View>
      <PostRequestExample />
    </View>
  );
};

// Export the App component as default
export default App;

Output

How to add GIFs in react-native ?

samiksharanjan

Improve

Article Tags :

How to make a Post request from frontend in react-native ?

Approach

Demo Video

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Create a new component folder (optional)

Step 4: Working with PostRequestExample.js

Step 5: Working with App.js

Or

Complete Source Code:

Output

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?