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

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

Prerequisites:

• Basic knowledge of ReactJS.
• Html, CSS, and javascript with ES6 syntax.
• Basic knowledge of HTTP methods
• NodeJs should be installed in your system.
• Jdk and android studio for testing your app on the emulator

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

Creating React Native App:

Step 1: Create a react-native project :

npx react-native init DemoProject

Step 2: Now install react-native-paper

npm install react-native-paper

Step 3: Start the server

npx react-native run-android

Project Structure: The project should look like this:

Example: Here, we are sending request options as a second parameter along with the body. This body is handled in API.

PostRequestExample.js

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Alert } from 'react-native';
import { Button } from "react-native-paper";

const PostRequestExample = () => {

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ postName: 'React updates ' })
    };

    const postExample = async () => {
        try {
            await fetch(
                'https://reqres.in/api/posts', requestOptions)
                .then(response => {
                    response.json()
                        .then(data => {
                            Alert.alert("Post created at : ",
                            data.createdAt);
                        });
                })
        }
        catch (error) {
            console.error(error);
        }
    }

    return (
        <View style={styles.btn}>
            <Button mode="contained" onPress={postExample} >
                Click to make a Post request</Button>
        </View>
    )

}

export default PostRequestExample;

const styles = StyleSheet.create({
    btn: {
        marginTop: 60,
        marginLeft: 30,
        marginRight: 30
    }
})

App.js: Import this file into your App.js

App.js

import React from 'react';
import type { Node } from 'react';
import { Text, View } from 'react-native';
import PostRequestExample from './components/PostRequestExample';

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

export default App;

Save it and restart the server by the following command:

npx react-native run-android

Output: