Programming Tutorials

Login Sample in React Native using fetch()

By: Irene in React-Native Tutorials on 2023-04-07  

Here's an example of how to use fetch() in a login screen:

Let's say we have a login screen with two inputs, one for the email and one for the password, and a \"Sign In\" button. When the user clicks the \"Sign In\" button, we want to send a request to the server to check if the email and password are valid.

First, we need to handle the "Sign In" button press event. We can do this by adding an onPress event handler to the button:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignInPress = () => {
    // Send a request to the server to check if the email and password are valid
  };

  return (
    <View>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
      />
      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
        secureTextEntry
      />
      <Button title="Sign In" onPress={handleSignInPress} />
    </View>
  );
};

export default LoginScreen;

Next, we need to send a request to the server using fetch(). We can do this inside the handleSignInPress function:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignInPress = async () => {
    const response = await fetch('https://example.com/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        password,
      }),
    });

    const result = await response.json();

    if (response.ok) {
      // Login successful, do something
    } else {
      // Login failed, show an error message
    }
  };

  return (
    <View>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
      />
      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
        secureTextEntry
      />
      <Button title="Sign In" onPress={handleSignInPress} />
    </View>
  );
};

export default LoginScreen;

In this example, we're sending a POST request to the URL https://example.com/login with the email and password in the request body. We're also setting the Content-Type header to application/json, since we're sending JSON data in the request body. Once we get the response from the server, we can use the response.ok property to check if the login was successful. If it was, we can do something in the app (e.g., navigate to the home screen). If it wasn't, we can show an error message to the user.