Simple Password Strength Meter For React Native

Description:

A simple password strength meter to visualize the strength of the password your user typed in the React Native app.

Install & Import:

# Yarn
$ yarn add react-native-passmeter
# NPM
$ npm i react-native-passmeter

import React, { useState } from "react";
import { SafeAreaView, TextInput } from "react-native";
import PassMeter from "react-native-passmeter";

How to use it:

1. Add the PassMeter component after the password field,

<SafeAreaView style={styles.container}>
  <TextInput
    style={styles.input}
    maxLength={15}
    secureTextEntry
    onChangeText={password => setPassword(password)}
  />
  <PassMeter
    showLabels
    password={password}
    maxLength={MAX_LEN}
    minLength={MIN_LEN}
    labels={PASS_LABELS}
  />
</SafeAreaView>

2. Determine the min/max password length.

const MAX_LEN = 15,
      MIN_LEN = 3

3. Customize the feedback message depending on the current password strength.

const PASS_LABELS = ["Too Short", "Weak", "Normal", "Strong", "Secure"];

Preview: