React Native - Mobile App development - Simple Login Form example

Congratulations! You are standing in the right place!

In this article, we will discuss how to create a simple login form on your local system utilizing the React Native framework and Android Studio.

We are going to create a login form like below,

First, you must set up your local development environment. You can follow the below link to set up your local environment.

https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html

After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.

Next, we are going to edit the App.js file and write the code to create a login form

Start by importing useState, as shown below. The useState function will allow our functional components to be stateful.

import React, { useState } from "react";

Then initialize the state by integrating the following code.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

We utilize a View to wrap each text input for facile styling

<View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="white"
          onChangeText={(email) => setEmail(email)}
        />
      </View>
 
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="white"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>

The setState method will update the state object with whatever information the utilizer has entered. secureTextEntry is set to true to obnubilate the text entered in the email mail text input for security purposes.

Integrate the following styles to the inputView and textInput props.

 inputView: {
    backgroundColor: "purple",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,
 
    alignItems: "center",
  },
 
  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  },

Integrate the Forgot Password? button below the text input fields

<TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>

Next, integrate the following styles for the forgot password button.

 forgot_button: {
    height: 30,
    marginBottom: 30,
  }

Integrate the Login button

 <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
 </TouchableOpacity>

Integrate the styles for the Login button.

  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "purple",
  }

The final code: App.js

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from "react-native";
 
export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./knf.jpg")} />
 
      <StatusBar style="auto" />
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="white"
          onChangeText={(email) => setEmail(email)}
        />
      </View>
 
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="white"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>
 
      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>
 
      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
 
  image: {
    marginBottom: 40,
  },
 
  inputView: {
    backgroundColor: "purple",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,
 
    alignItems: "center",
  },
 
  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  },
 
  forgot_button: {
    height: 30,
    marginBottom: 30,
  },
 
  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "purple",
  },
  loginText:
  {
    color:"white"
  }
});