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.


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"
}
});

Popular posts from this blog

Spring boot video streaming example-HTML5

Spring Boot + OpenCSV Export Data to CSV Example

DataTable-Pagination example with Spring boot, jQuery and ajax

Spring boot web project free download:User Registration System

10 Best Job Posting Sites 2021-2022

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

ReactJS - Bootstrap - Buttons

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download