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

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. |