Create a Password Validator using React-Native

Last Updated : 01 Jun, 2025

In this article we are going to implement a Password Validator using React Native. The Password validation app in React Native is a simple application that is used to check the strength of a password. Passwords protect your personal and sensitive data, such as financial information, medical records, and private communications, from being accessed by unauthorized individuals.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

Note: This Section is to interact with the app which you are going to build.

Prerequisites / Technologies Used

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Approach:

The Password validation app in React Native is a simple application that is used to check the strength of a password. In this app, we add a text area component in which user can enter their password and check the strength of the password. This app also provide suggestion to make your password more strong. We also add a meter in the app which shows strength of the password.

Conditions for a valid and strong password are:

Password should not contain any spaces.
Password should contain at least one digit(0-9).
Password must contain at least one lowercase letter (A-Z).
Password must contain at least one uppercase letter (A-Z).
Password must contain at least one character like this (@, #, %, &, !, $, etc).

Let's dive into the code in detail.

- Import libraries:

Import required libraries at the top of the file.

JavaScript

// Import useState hook from React
import { useState } from 'react';
// Import necessary components from react-native
// Import core UI components and utilities from react-native
import {
  View,         // Container for layout
  Text,         // Text display
  TextInput,    // Input field for text
  StyleSheet,   // For styling components
  SafeAreaView, // Ensures content is within safe area boundaries
} from 'react-native';

- StyleSheet:

Create a StyleSheet to style components like container, title, input, etc.

JavaScript

// Styles for the components
const styles = StyleSheet.create({
  container: {
    padding: 24, // Padding around content
    flex: 1, // Fill available space
    backgroundColor: '#f7f7f7', // Light background color
  },
  title: {
    fontSize: 24, // Large font size
    marginBottom: 20, // Space below title
    paddingTop: 30, // Space above title
    fontWeight: 'bold', // Bold text
    textAlign: 'center', // Centered text
  },
  input: {
    borderWidth: 1, // Border thickness
    padding: 12, // Padding inside input
    fontSize: 16, // Font size
    borderRadius: 8, // Rounded corners
    borderColor: '#ddd', // Border color
    marginBottom: 16, // Space below input
    backgroundColor: '#fff', // White background
  },
  strengthMeter: {
    height: 8, // Height of meter bar
    borderRadius: 4, // Rounded corners
    marginBottom: 8, // Space below meter
  },
  label: {
    fontSize: 16, // Font size
    marginBottom: 12, // Space below label
    fontWeight: '600', // Semi-bold text
  },
  suggestionBox: {
    backgroundColor: '#fff', // White background
    padding: 12, // Padding inside box
    borderRadius: 8, // Rounded corners
    borderColor: '#eee', // Border color
    borderWidth: 1, // Border thickness
  },
  suggestionTitle: {
    fontWeight: 'bold', // Bold text
    marginBottom: 6, // Space below title
    color: '#333', // Dark text color
  },
  suggestionText: {
    color: '#555', // Slightly lighter text color
    fontSize: 14, // Font size
  },
});

- Title Text:

This title explains what the app does. We use the text "Password Validator" to show that the app is to validate passwords.

JavaScript

{/* Title Text */}
<Text style={styles.title}>Password Validator</Text>

- TextInput:

This TextInput is used to get a password from the user. We will show what the user types using a state variable called "password." When you type or change the text in the TextInput component, we will use the setPassword function with the onChangeText prop to update the value.

JavaScript

// State to store password input
const [password, setPassword] = useState('');

{/* Password input field */}
<TextInput
    style={styles.input}
    secureTextEntry // Hide input text
    placeholder="Enter your password"
    value={password}
    onChangeText={setPassword} // Update password state on change
/>

- Strength meter:

This section includes,

Strength meter bar: It displays a progress bar that indicates the strength of the password the user typed.
Strength label: It displays Text like "Weak" or "Medium" or "Strong" that also indicates the strength of the password user typed.

Both elements use the getColor function to decide what to show to user in term of text and color, getColor have a switch, which decides the color to return based on label state variable and by using getPasswordStrength statefunction the label always updates when ever user updates the password state varible.

JavaScript

// Destructure password strength details
const { score, label, suggestions } = getPasswordStrength(password);
// Function to get color based on strength label
const getColor = () => {
    switch (label) {
        case 'Strong':
            return 'green'; // Green for strong password
        case 'Medium':
            return 'orange'; // Orange for medium password
        case 'Weak':
            return 'red'; // Red for weak password
        default:
            return 'gray'; // Gray for very weak or default
    }
};
  
{/* Strength meter bar */}
<View
    style={[
        styles.strengthMeter,
        {
            backgroundColor: getColor(), // Color based on strength
            width: `${(score / 5) * 100}%`, // Width proportional to score
        },
    ]}
/>
{/* Strength label */}
<Text style={[styles.label, { color: getColor() }]}>
    Strength: {label}
</Text>

- getPasswordStrength function:

This function is used to evaluate password strength using regex concept mentioned in code below and returns all 3 state variables like score, suggestions and label.

JavaScript

// Destructure password strength details
const { score, label, suggestions } = getPasswordStrength(password);

// Function to evaluate password strength
const getPasswordStrength = (password) => {
  // Array of regex conditions to check password criteria
  const conditions = [
    /\d/, // has digit
    /[a-z]/, // has lowercase
    /[A-Z]/, // has uppercase
    /[@#$%^&*!.,]/, // has special char
    /^\S+$/, // no whitespace
  ];

  // Filter conditions that the password passes
  const passed = conditions.filter((regex) => regex.test(password));
  // Array to store suggestions for improving password
  const suggestions = [];

  // Add suggestion if password lacks a digit
  if (!/\d/.test(password)) suggestions.push('Add at least one digit (0-9)');
  // Add suggestion if password lacks a lowercase letter
  if (!/[a-z]/.test(password)) suggestions.push('Add a lowercase letter (a-z)');
  // Add suggestion if password lacks an uppercase letter
  if (!/[A-Z]/.test(password)) suggestions.push('Add an uppercase letter (A-Z)');
  // Add suggestion if password lacks a special character
  if (!/[@#$%^&*!.,]/.test(password)) suggestions.push('Add a special character (@#$%^&*!)');
  // Add suggestion if password contains whitespace
  if (!/^\S+$/.test(password)) suggestions.push('Remove any whitespace');

  // Number of conditions passed
  const strength = passed.length;

  // Return password strength details
  return {
    score: strength, // Number of criteria met
    suggestions, // Suggestions for improvement
    label: // Strength label based on number of criteria met
      strength === 5
        ? 'Strong'
        : strength >= 3
        ? 'Medium'
        : strength > 0
        ? 'Weak'
        : 'Very Weak',
  };
};

- Suggestion box:

Based on suggestions state variable list is the below code show suggestions.

JavaScript

// Destructure password strength details
const { score, label, suggestions } = getPasswordStrength(password);

{/* Suggestions box, shown if there are suggestions */}
{suggestions.length > 0 && (
    <View style={styles.suggestionBox}>
      <Text style={styles.suggestionTitle}>
        Suggestions to improve password:
      </Text>
      {/* List each suggestion */}
      {suggestions.map((s, index) => (
        <Text key={index} style={styles.suggestionText}>
          • {s}
        </Text>
      ))}
    </View>
)}

Now, wrap all design code with a SafeAreaView component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

App.js

// Import useState hook from React
import { useState } from 'react';
// Import core UI components and utilities from react-native
import {
  View,         // Container for layout
  Text,         // Text display
  TextInput,    // Input field for text
  StyleSheet,   // For styling components
  SafeAreaView, // Ensures content is within safe area boundaries
} from 'react-native';

// Function to evaluate password strength
const getPasswordStrength = (password) => {
  // Array of regex conditions to check password criteria
  const conditions = [
    /\d/, // has digit
    /[a-z]/, // has lowercase
    /[A-Z]/, // has uppercase
    /[@#$%^&*!.,]/, // has special char
    /^\S+$/, // no whitespace
  ];

  // Filter conditions that the password passes
  const passed = conditions.filter((regex) => regex.test(password));
  // Array to store suggestions for improving password
  const suggestions = [];

  // Add suggestion if password lacks a digit
  if (!/\d/.test(password)) suggestions.push('Add at least one digit (0-9)');
  // Add suggestion if password lacks a lowercase letter
  if (!/[a-z]/.test(password)) suggestions.push('Add a lowercase letter (a-z)');
  // Add suggestion if password lacks an uppercase letter
  if (!/[A-Z]/.test(password)) suggestions.push('Add an uppercase letter (A-Z)');
  // Add suggestion if password lacks a special character
  if (!/[@#$%^&*!.,]/.test(password)) suggestions.push('Add a special character (@#$%^&*!)');
  // Add suggestion if password contains whitespace
  if (!/^\S+$/.test(password)) suggestions.push('Remove any whitespace');

  // Number of conditions passed
  const strength = passed.length;

  // Return password strength details
  return {
    score: strength, // Number of criteria met
    suggestions, // Suggestions for improvement
    label: // Strength label based on number of criteria met
      strength === 5
        ? 'Strong'
        : strength >= 3
        ? 'Medium'
        : strength > 0
        ? 'Weak'
        : 'Very Weak',
  };
};

// Main App component
export default function App() {
  // State to store password input
  const [password, setPassword] = useState('');
  // Destructure password strength details
  const { score, label, suggestions } = getPasswordStrength(password);

  // Function to get color based on strength label
  const getColor = () => {
    switch (label) {
      case 'Strong':
        return 'green'; // Green for strong password
      case 'Medium':
        return 'orange'; // Orange for medium password
      case 'Weak':
        return 'red'; // Red for weak password
      default:
        return 'gray'; // Gray for very weak or default
    }
  };

  // Render UI
  return (
    <SafeAreaView style={styles.container}>
      {/* Title */}
      <Text style={styles.title}>Password Validator</Text>

      {/* Password input field */}
      <TextInput
        style={styles.input}
        secureTextEntry // Hide input text
        placeholder="Enter your password"
        value={password}
        onChangeText={setPassword} // Update password state on change
      />

      {/* Strength meter bar */}
      <View
        style={[
          styles.strengthMeter,
          {
            backgroundColor: getColor(), // Color based on strength
            width: `${(score / 5) * 100}%`, // Width proportional to score
          },
        ]}
      />

      {/* Strength label */}
      <Text style={[styles.label, { color: getColor() }]}>
        Strength: {label}
      </Text>

      {/* Suggestions box, shown if there are suggestions */}
      {suggestions.length > 0 && (
        <View style={styles.suggestionBox}>
          <Text style={styles.suggestionTitle}>
            Suggestions to improve password:
          </Text>
          {/* List each suggestion */}
          {suggestions.map((s, index) => (
            <Text key={index} style={styles.suggestionText}>
              • {s}
            </Text>
          ))}
        </View>
      )}
    </SafeAreaView>
  );
}

// Styles for the components
const styles = StyleSheet.create({
  container: {
    padding: 24, // Padding around content
    flex: 1, // Fill available space
    backgroundColor: '#f7f7f7', // Light background color
  },
  title: {
    fontSize: 24, // Large font size
    marginBottom: 20, // Space below title
    paddingTop: 30, // Space above title
    fontWeight: 'bold', // Bold text
    textAlign: 'center', // Centered text
  },
  input: {
    borderWidth: 1, // Border thickness
    padding: 12, // Padding inside input
    fontSize: 16, // Font size
    borderRadius: 8, // Rounded corners
    borderColor: '#ddd', // Border color
    marginBottom: 16, // Space below input
    backgroundColor: '#fff', // White background
  },
  strengthMeter: {
    height: 8, // Height of meter bar
    borderRadius: 4, // Rounded corners
    marginBottom: 8, // Space below meter
  },
  label: {
    fontSize: 16, // Font size
    marginBottom: 12, // Space below label
    fontWeight: '600', // Semi-bold text
  },
  suggestionBox: {
    backgroundColor: '#fff', // White background
    padding: 12, // Padding inside box
    borderRadius: 8, // Rounded corners
    borderColor: '#eee', // Border color
    borderWidth: 1, // Border thickness
  },
  suggestionTitle: {
    fontWeight: 'bold', // Bold text
    marginBottom: 6, // Space below title
    color: '#333', // Dark text color
  },
  suggestionText: {
    color: '#555', // Slightly lighter text color
    fontSize: 14, // Font size
  },
});

Output

Create a Password Validator using React-Native

nitesh5mdxiq

Improve

Article Tags :

Create a Password Validator using React-Native

Demo Video

Playground

Prerequisites / Technologies Used

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

- Approach:

- Import libraries:

- StyleSheet:

- Title Text:

- TextInput:

- Strength meter:

- getPasswordStrength function:

- Suggestion box:

Complete Source Code

Output

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?