rslabdocs

Password Strength

Four segments that fill and color themselves from a live password heuristic as you type.

ReanimatedNativeWindSource

Prerequisites

Just Reanimated, driving the per-segment color interpolation.


npx expo install react-native-reanimated

Install


npx @rslab/cli add password-strength

Usage


import { useState } from 'react';

import { PasswordStrength } from '@/components/ui/PasswordStrength';



const [password, setPassword] = useState('');



<TextInput value={password} onChangeText={setPassword} secureTextEntry />

<PasswordStrength password={password} />

It's fully controlled: feed it whatever string your form field currently holds, it does the scoring and animation itself.

Props

PropTypeDefault
password
string
-

The current password value, controlled from outside (e.g. a TextInput's value).

className?
string
-

Extend or override the outer column.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page