React Native Password Input 🔒

A premium, highly customizable, and animated password input component for React Native, built with high performance in mind.

Features

• ✨ Animated Focus Transitions: Smooth border color and scale changes using react-native-reanimated.
• 👁️ Visibility Toggle: Easily switch between hidden and visible password states with crisp icons.
• 📊 Strength Indicator: Real-time password strength validation with an animated progress bar.
• 🎨 Dark Mode Ready: Premium "Gray-Blue" aesthetic that fits modern UI designs.
• 📦 Lightweight: Minimal dependencies, focus on performance.

Installation

npm install react-native-password-input
# OR
yarn add react-native-password-input

Peer Dependencies

Ensure you have these installed in your project:

npx expo install react-native-reanimated lucide-react-native

Usage

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import PasswordInput from 'react-native-password-input';

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

  return (
    <View style={styles.container}>
      <PasswordInput
        label="Create Password"
        value={password}
        onChangeText={setPassword}
        placeholder="At least 8 characters"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#111827', // Dark background recommended
    flex: 1,
    justifyContent: 'center',
  },
});

export default App;

Props

| Prop | Type | Default | Description | |---|---|---|---| | value | string | "" | The value of the password input. | | onChangeText | function | Required | Callback function called when text changes. | | label | string | "Password" | Label displayed above the input. | | placeholder | string | "Enter your password" | Placeholder text when empty. | | containerStyle | object | - | Custom styles for the outer wrapper. | | inputStyle | object | - | Custom styles for the TextInput. | | strengthLevels | array | (Standard) | Custom levels for password strength. |

License

MIT © Antigravity