react-native-password-validate-checklist

A customizable component that validates passwords based on specific rules and displays a checklist indicating the validation status.

Example

Password Validation Example

Installation

Using Yarn: yarn add react-native-password-validate-checklist
Using npm: npm install react-native-password-validate-checklist

Usage

import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
import PasswordValidate from "react-native-password-validate-checklist";

const PasswordCheckComponent = () => {
  const [password1, setPassword1] = useState("");
  const [password2, setPassword2] = useState("");
  const [validated, setValidated] = useState(false);

  return (
    <View>
      <TextInput
        placeholder="Enter new password"
        onChangeText={setPassword1}
      />
      <TextInput
        placeholder="Confirm new password"
        onChangeText={setPassword2}
      />

      <PasswordValidate
        newPassword={password1}
        confirmPassword={password2}
        validationRules={[
          { key: "MIN_LENGTH", ruleValue: 9, label: "Minimum 9 characters" },
          { key: "MAX_LENGTH", ruleValue: 15, label: "Maximum 15 characters" },
          { key: "LOWERCASE_LETTER" },
          { key: "UPPERCASE_LETTER" },
          { key: "NUMERIC" },
          { key: "SPECIAL_CHARS" },
          { key: "PASSWORDS_MATCH" },
        ]}
        onPasswordValidateChange={setValidated}
        imageSource={{
          success: require("./assets/success/success.png"),
          error: require("./assets/error/error.png"),
        }}
        isImage={true}
        iconComponent={{
          success: <Text>✔</Text>,
          error: <Text>✖</Text>,
        }}
      />
      <Text>{validated ? "Password is valid" : "Password is invalid"}</Text>
    </View>
  );
};

export default Test;

Validation Rules

Below are the possible rules you can use to validate passwords:

MIN_LENGTH

Validates that the password has at least a specified number of characters.

{
  "key": "MIN_LENGTH",
  "ruleValue": 10,  //  required
  "label": "Minimum 10 characters"
}

MAX_LENGTH

Ensures the password does not exceed a specified number of characters.

{
  "key": "MAX_LENGTH",
  "ruleValue": 15,  //  required
  "label": "Maximum 15 characters"
}

UPPERCASE_LETTER

Validates that the password contains at least one uppercase letter.

{
  "key": "UPPERCASE_LETTER",
  "label": "Minimum 1 uppercase letter"
}

LOWERCASE_LETTER

Ensures the password contains at least one lowercase letter.

{
  "key": "LOWERCASE_LETTER",
  "label": "Minimum 1 lowercase letter"
}

NUMERIC

Validates that the password contains at least one numeric digit.

{
  "key": "NUMERIC",
  "label": "Requires at least one numeric digit"
}

SPECIAL_CHARS

Ensures the password contains at least one special character.

{
  "key": "SPECIAL_CHARS",
  "label": "Minimum 1 special character"
}

PASSWORDS_MATCH

Checks if the new password and the confirm password match.

{
  "key": "PASSWORDS_MATCH",
  "label": "Passwords must match"
}

Props

Name	Type	isRequired	Default Value	Description
newPassword	string	Yes	-	The new password to validate.
confirmPassword	string	No	-	The confirm password to check if it matches the new password.
onPasswordValidateChange	Function	Yes	-	Callback function to execute when validation rules change.
validationRules	[{ key: string, label: string, ruleValue: number }]	Yes	-	A list of rules used to validate passwords.
containerStyle	ViewStyle	No	-	Custom styling for the container.
labelStyle	{ success: TextStyle, error: TextStyle }	No	-	Custom styling for validation labels, distinguishing success and error states.
imageStyle	ImageStyle	No	-	Custom styling for success/error icons.
imageSource	{ success: ImageURISource, error: ImageURISource }	No	-	Custom image sources for success and error icons.
isImage	boolean	No	true	Flag to indicate if validation icons should be images or custom components.
iconComponent	{ success: React.ReactNode, error: React.ReactNode }	No	-	Custom components to use as success/error icons, when not using images.