# react-native-password-validate-checklist

> Customized password validating checklist

Latest version **1.0.1** (published 2025-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-password-validate-checklist
pnpm add react-native-password-validate-checklist
yarn add react-native-password-validate-checklist
bun add react-native-password-validate-checklist
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2025-02-28 |
| First published | 2023-02-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | KaviduAloka |
| Maintainers | aloka94 |
| Keywords | password validator, password validations, password-validation, password-checklist, password-strength, react-native-password, password-rules, secure-password, password-validator, react-native-security, form-validation, react-native-component, react-native-library, authentication, react-native-auth, ios, android, cross-platform |

## Links

- npm: https://www.npmjs.com/package/react-native-password-validate-checklist
- Repository: https://github.com/KaviduAloka/react-native-password-validate-checklist
- Homepage: https://github.com/KaviduAloka/react-native-password-validate-checklist#readme
- Issues: https://github.com/KaviduAloka/react-native-password-validate-checklist/issues
- npm.io page: https://npm.io/package/react-native-password-validate-checklist

## Alternatives

- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads
- [escher-request](https://npm.io/package/escher-request.md) — 545 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2025-02-28
- 1.0.0 — 2025-01-12
- 0.1.0 — 2024-02-09
- 0.0.11 — 2023-04-25
- 0.0.1 — 2023-02-26

## README

# 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](https://user-images.githubusercontent.com/31509440/220936959-3800bf38-e446-4b51-bb21-d83e88168e30.gif)

## Installation

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

## Usage

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

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

### MAX_LENGTH

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

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

### UPPERCASE_LETTER

Validates that the password contains at least one uppercase letter.

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

### LOWERCASE_LETTER

Ensures the password contains at least one lowercase letter.

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

### NUMERIC

Validates that the password contains at least one numeric digit.

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

### SPECIAL_CHARS

Ensures the password contains at least one special character.

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

### PASSWORDS_MATCH

Checks if the new password and the confirm password match.

```json
{
  "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.          |

---
_Source: https://npm.io/package/react-native-password-validate-checklist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._