react-native-password-validate-checklist

A customizable component which can add rules to a password and show the status of each validation.

Example

Installation

yarn add react-native-password-validate-checklist

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-validation-checklist';

const Test: React.FC = () => {
  const [password1, setPassword1] = useState('');
  const [password2, setPassword2] = useState('');
  const [validated, setValidated] = useState(false);

  return (
    <View>
      <TextInput
        onChangeText={text => setPassword1(text)}
      />
      <TextInput
        onChangeText={text => setPassword2(text)}
      />

      <PasswordValidate
        newPassword={password1}
        confirmPassword={password2}
        validationRules={[
          {
            key: 'MIN_LENGTH',
            ruleValue: 9,
            label: 'Should contain more than 9 characters',
          },
          {
            key: 'MAX_LENGTH',
            ruleValue: 15,
            label: 'අක්ෂර 15 කට වඩා තිබිය නොහැක',
          },
          {key: 'LOWERCASE_LETTER'},
          {key: 'UPPERCASE_LETTER'},
          {key: 'NUMERIC'},
          {key: 'PASSWORDS_MATCH'},
          {key: 'SPECIAL_CHARS'},
        ]}
        onPasswordValidateChange={validatedBoolean =>
          setValidated(validatedBoolean)
        }
      />

      <Text>
        {validated ? 'PASSWORD VALIDATED' : 'NOT VALID PASSWORD'}
      </Text>
    </View>
  );
};

export default Test;

This library is capable of customizing validation labels as well. This is helpful for multiple languages supported applications

Possible validation rules

MIN_LENGTH

Set a minimum characters validation check

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

Key	Type	Description
ruleValue	Numeric	-
label	String	Optional. (Default value: "Password contains more than ${ruleValue} characters")

---

MAX_LENGTH

Set a maximum characters validation check

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

Key	Type	Description
ruleValue	Numeric	-
label	String	Optional. (Default value: "Password does not contain more than ${ruleValue} characters")

---

UPPERCASE_LETTER

Set an uppercase letter availability check

{
  key: "UPPERCASE_LETTER",
  label: "Password contains at least one uppercase letter"
}

Key	Type	Description
label	String	Optional. (Default value: "Password contains at least one uppercase letter")

---

LOWERCASE_LETTER

Set a lowercase letter availability check

{
  key: "LOWERCASE_LETTER",
  label: "Password contains at least one lowercase letter"
}

Key	Type	Description
label	String	Optional. (Default value: "Password contains at least one lowercase letter")

---

NUMERIC

Set a numeric character availability check

{
  key: "NUMERIC",
  label: "Password contains at least one numeric"
}

Key	Type	Description
label	String	Optional. (Default value: "Password contains at least one numeric")

---

SPECIAL_CHARS

Set a numeric character availability check

{
  key: "SPECIAL_CHARS",
  label: "Password contains at least one special character"
}

Key	Type	Description
label	String	Optional. (Default value: "Password contains at least one special character")

---

PASSWORDS_MATCH

Set entered passwords matching validation check

{
  key: "PASSWORDS_MATCH",
  label: "Entered passwords are matching"
}

Key	Type	Description
label	String	Optional. (Default value: "Entered passwords are matching")

Props

Name	Type	isRequired	Default Value	Description
newPassword	string	Yes	-	New password to be passed here
confirmPassword	string	Yes	-	Confirm password to be passed here
onPasswordValidateChanged	Function	Yes	-	The callback to be executed every time password fields get changed
validationRules	[{ key: string (required), label: string, ruleValue: number (depends on the key) }]	Yes	-	All the rules adding to validate passwords
containerStyle	ViewStyle	No	-	Styling for container
labelStyle	TextStyle	No	-	Styling for labels in validation rows
iconStyle	ImageStyle	No	-	Styling for error and success icons
iconSuccessSource	ImageURISource	No	Success image icon	Icon to show when validation passes
iconErrorSource	ImageURISource	No	Error image icon	Icon to show when validation fails