Skip to content
Native Animation
Password Strength Meter animation preview
PasswordFormMicroFeedback

Password Strength Meter

A password field that pairs clear strength feedback with an animated requirement checklist.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add password-strength-meter

About this animation

A password field that pairs clear strength feedback with an animated requirement checklist.

How it works

  1. scorePassword awards one point for length, uppercase, number, and symbol rules.
  2. Four shared-value segments fill with the active strength color.
  3. Each fulfilled requirement springs in a View-built check.
  4. A View-built eye toggles secure text without an icon dependency.
  5. Reaching Strong triggers a short glow pulse, surface pop, and light sweep across the meter.

Install

npx expo install expo-linear-gradient react-native-reanimated

Usage

import PasswordStrengthMeter, { scorePassword } from './PasswordStrengthMeter';

<PasswordStrengthMeter onChange={(value) => save(value)} />;
<PasswordStrengthMeter
  defaultValue="Sample8!"
  colorScheme="dark"
  levelColors={['#C75165', '#D77A44', '#B59A24', '#347C68']}
/>;

Props

PropTypeDefaultDescription
value / defaultValuestring— / ''Controlled or initial password.
onChange(password: string) => void—Password callback.
requirementsPasswordRequirement[]Four built-insDisplayed checklist.
placeholderstring'Create a password'Input placeholder.
levelColorsfour-color tupleRed through greenStrength colors.
inputHeightnumber54Input height.
backgroundColor / textColorstring'#FFFFFF' / '#1E1B25'Surface and copy colors.
fontFamilystringSystem fontCopy font.
colorScheme'light' | 'dark' | 'auto''auto'Surface appearance, with system-aware dark mode.
durationnumber240Fill duration.
accessibilityLabelstring'Password'Input label.
showAccessibilityLabel / hideAccessibilityLabelstringShow/hide labelsVisibility-button labels.
inputPropsTextInputProps—Additional native-input props.
style / testIDstyle / string—Container customization.

The ref exposes focus(), clear(), show(), and hide().

Compatibility

  • Expo SDK 57, React Native 0.86, and Reanimated 4.5
  • iOS, Android, and web supported; device verification pending
  • Works in Expo Go

Accessibility

The input and visibility button have configurable labels, the button announces its selected state, and the strength label is a polite live region. Reduced Motion makes fills and checks update immediately.

More animations