Turn a TextInput into a password field with secureTextEntry, which masks every character and cannot be combined with multiline. Add a Pressable eye button that flips that prop for show and hide. For password managers, set autoComplete="password" on login screens or "new-password" on signup, and the matching iOS textContentType.
| Prop | Login field | Signup field |
|---|---|---|
| secureTextEntry | true (until revealed) | true (until revealed) |
| autoComplete | "password" | "new-password" |
| textContentType (iOS) | "password" | "newPassword" |
| passwordRules (iOS) | not needed | optional rules for generated passwords |
| autoCapitalize | "none" | "none" |
| autoCorrect | false | false |
Updated
Try the field below: type a password, flip the reveal button, and watch the meter react. Switch between login and signup to see which autofill props each screen should carry; the meter logic is the same short function you can paste into your app.
Strength: empty
Pass isNew for signup screens. The button label always describes what the next press will do.
import { useState } from "react";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
export function PasswordInput({ value, onChangeText, isNew = false }) {
const [hidden, setHidden] = useState(true);
return (
<View style={s.wrap}>
<TextInput
value={value}
onChangeText={onChangeText}
secureTextEntry={hidden}
autoComplete={isNew ? "new-password" : "password"}
textContentType={isNew ? "newPassword" : "password"}
autoCapitalize="none"
autoCorrect={false}
accessibilityLabel="Password"
style={s.input}
/>
<Pressable
accessibilityRole="button"
accessibilityLabel={hidden ? "Show password" : "Hide password"}
hitSlop={8}
onPress={() => setHidden((h) => !h)}
style={s.toggle}
>
<Text>{hidden ? "Show" : "Hide"}</Text>
</Pressable>
</View>
);
}
const s = StyleSheet.create({
wrap: { flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: "#cbd5e1", borderRadius: 8 },
input: { flex: 1, padding: 12 },
toggle: { paddingHorizontal: 12, paddingVertical: 8 },
});Returns 1 to 4 for any non-empty string. Map the number to a label and a bar width.
export function passwordScore(pw) {
if (!pw) return 0;
const kinds = [/[a-z]/, /[A-Z]/, /[0-9]/, /[^A-Za-z0-9]/].filter((r) => r.test(pw)).length;
let score = 0;
if (pw.length >= 8) score++;
if (pw.length >= 12) score++;
if (pw.length >= 16) score++;
if (kinds >= 3) score++;
if (pw.length < 8) score = Math.min(score, 1);
return Math.min(4, Math.max(score, 1));
}autoComplete is the hint both platforms read, while textContentType is iOS only and connects the field to the device keychain. Setting both costs nothing and covers more password managers.
Pair the password field with a username or email field that carries autoComplete="username" or "email", so the manager knows which account the password belongs to.
The meter on this page counts length and the kinds of characters used: lower case, upper case, digits and symbols. It is a quick nudge, not an audit, and it cannot spot a password that is common or already leaked.
Long passphrases score well here, because three of the four points come from length and only one from mixing character types. Pair the meter with a minimum length check in your validation.
Set secureTextEntry on the TextInput. The docs say it obscures the text so passwords stay secure, defaults to false, and does not work with multiline set to true.
Keep a hidden boolean in state, pass it to secureTextEntry, and render a Pressable next to the field that toggles it. Label the button so screen readers announce what pressing it will do.
Set textContentType="newPassword" on the field. With that value you can also pass passwordRules, written in Apple's password rules syntax, so the generated password meets your requirements.
"password" where someone types an existing password and "new-password" where they create one. Both are listed among the cross-platform autoComplete values.
Related: Password strength checker, React Native TextInput props, React Native forms, Password reset email template, React vs React Native.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.