React Native Fetch Http PUT Request Example

May 12, 2021 . Admin

Hi Guys, Today, I will learn you how to use fetch https put request in react native. We will show example of react native fetch https put request, you can easliy use react native fetch put response. In this example import stylesheet namespace from react-native-paper. React Native provides the fetch put API for your networking needs. fetch put will seem familiar if you have used XMLHttpRequest or other networking APIs before. You may refer to MDN's guide on Using fetch put for additional information. Here, I will give you full example for simply react native fetch https put request as bellow. Step 1 - Create project

In the first step Run the following command for create project.

expo init MywebtutsApp

Step 2 - Install Package

In the step,I will install npm i react-native-paper package.

npm i react-native-paper

Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";
import { Text, View,StyleSheet,Button} from 'react-native';
import { Provider ,Appbar,Card,IconButton,Avatar,TextInput} from 'react-native-paper';

const MyWebtutsComponent = () => {

  const [isLoading, setLoading] = React.useState(true);

  const [firstName, setFirstNameText] = React.useState('Field');

  const [lastName, setLastNameText] = React.useState('Mark');
  
  const [email, setEmailText] = React.useState('fieldmark@gmail.com');

  const requestOptions = {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ first_name:firstName,last_name:lastName,email:email })
    };

  const handleClick = async () => {
     fetch('https://api.mywebtuts.com/api/users/13', requestOptions)
        .then(response => response.json())
        .then(data => console.log(data));
  };

  const _goBack = () => console.log('Went back');

  const _handleSearch = () => console.log('Searching');

  const _handleMore = () => console.log('Shown more');

  return (
    
    
      
      
      
      
    
      
           Fist Name:
           setFirstNameText(firstName)}
            defaultValue={firstName}
          />
           Last Name:
           setLastNameText(lastName)}
            defaultValue={lastName}
          />
          Email:
           setEmailText(email)}
            defaultValue={email}
          />