react-native-password-validate-checklist

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

Example

Installation

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

Usage

1import React, { useState } from "react";
2import { Text, TextInput, View } from "react-native";
3import PasswordValidate from "react-native-password-validate-checklist";
4
5const PasswordCheckComponent = () => {
6  const [password1, setPassword1] = useState("");
7  const [password2, setPassword2] = useState("");
8  const [validated, setValidated] = useState(false);
9
10  return (
11    <View>
12      <TextInput
13        placeholder="Enter new password"
14        onChangeText={setPassword1}
15      />
16      <TextInput
17        placeholder="Confirm new password"
18        onChangeText={setPassword2}
19      />
20
21      <PasswordValidate
22        newPassword={password1}
23        confirmPassword={password2}
24        validationRules={[
25          { key: "MIN_LENGTH", ruleValue: 9, label: "Minimum 9 characters" },
26          { key: "MAX_LENGTH", ruleValue: 15, label: "Maximum 15 characters" },
27          { key: "LOWERCASE_LETTER" },
28          { key: "UPPERCASE_LETTER" },
29          { key: "NUMERIC" },
30          { key: "SPECIAL_CHARS" },
31          { key: "PASSWORDS_MATCH" },
32        ]}
33        onPasswordValidateChange={setValidated}
34        imageSource={{
35          success: require("./assets/success/success.png"),
36          error: require("./assets/error/error.png"),
37        }}
38        isImage={true}
39        iconComponent={{
40          success: <Text>✔</Text>,
41          error: <Text>✖</Text>,
42        }}
43      />
44      <Text>{validated ? "Password is valid" : "Password is invalid"}</Text>
45    </View>
46  );
47};
48
49export 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.

1{
2  "key": "MIN_LENGTH",
3  "ruleValue": 10,  //  required
4  "label": "Minimum 10 characters"
5}

MAX_LENGTH

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

1{
2  "key": "MAX_LENGTH",
3  "ruleValue": 15,  //  required
4  "label": "Maximum 15 characters"
5}

UPPERCASE_LETTER

Validates that the password contains at least one uppercase letter.

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

LOWERCASE_LETTER

Ensures the password contains at least one lowercase letter.

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

NUMERIC

Validates that the password contains at least one numeric digit.

1{
2  "key": "NUMERIC",
3  "label": "Requires at least one numeric digit"
4}

SPECIAL_CHARS

Ensures the password contains at least one special character.

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

PASSWORDS_MATCH

Checks if the new password and the confirm password match.

1{
2  "key": "PASSWORDS_MATCH",
3  "label": "Passwords must match"
4}

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.