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

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Spring Boot + Apache Commons Export Data to CSV Example