Campo de contraseña en React Native: ocultar, mostrar y autofill
Guía del campo de contraseña en React Native
Campo de contraseña en React Native: mostrar/ocultar, autofill, fortaleza | We.Inc
Crea un campo de contraseña en React Native: secureTextEntry, un botón para mostrar y ocultar, autoComplete y textContentType para gestores de contraseñas, y un medidor de fortaleza para probar.
Convierte un TextInput en un campo de contraseña con secureTextEntry, que enmascara cada carácter y no se puede combinar con multiline. Añade un botón de ojo con Pressable que cambie esa prop para mostrar y ocultar. Para los gestores de contraseñas, pon autoComplete="password" en las pantallas de inicio de sesión o "new-password" en las de registro, y el textContentType de iOS correspondiente.
Props para los campos de contraseña de inicio de sesión y de registro
Prop
Campo de inicio de sesión
Campo de registro
secureTextEntry
true (hasta que se muestre)
true (hasta que se muestre)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
no hace falta
reglas opcionales para las contraseñas generadas
autoCapitalize
"none"
"none"
autoCorrect
Prueba el campo de abajo: escribe una contraseña, pulsa el botón para mostrarla y mira cómo reacciona el medidor. Cambia entre inicio de sesión y registro para ver qué props de autofill debe llevar cada pantalla; la lógica del medidor es la misma función corta que puedes pegar en tu app.
Un booleano en el estado, hidden, empieza en true y alimenta secureTextEntry.
El Pressable del ojo va junto al campo y cambia hidden con cada pulsación.
Su accessibilityLabel alterna entre Mostrar contraseña y Ocultar contraseña para que la acción siempre quede clara.
La función de fortaleza puntúa la longitud y la variedad de caracteres y devuelve una etiqueta para la barra bajo el campo.
Desactiva autoCorrect y pon autoCapitalize a none, para que el teclado nunca reescriba una contraseña.
Usa new-password en las pantallas de registro y de restablecimiento; indica al sistema que ofrezca una contraseña generada en lugar de una guardada.
Haz el botón para mostrar lo bastante grande para pulsarlo y sitúalo fuera del área de texto, para que nunca tape los últimos caracteres.
Trata cualquier medidor del lado del cliente solo como una pista. La longitud es lo que más importa, y el servidor decide qué acepta.
Nunca registres el valor del campo en logs ni lo envíes a analítica mientras depuras.
Preguntas frecuentes
¿Cómo oculto una contraseña en React Native?
Pon secureTextEntry en el TextInput. La documentación dice que oculta el texto para que las contraseñas estén seguras, que vale false por defecto y que no funciona con multiline a true.
¿Cómo añado un botón para mostrar la contraseña?
Guarda un booleano hidden en el estado, pásalo a secureTextEntry y renderiza junto al campo un Pressable que lo alterne. Pon una etiqueta al botón para que los lectores de pantalla anuncien qué hará al pulsarlo.
¿Por qué iOS no ofrece una contraseña segura en el registro?
Pon textContentType="newPassword" en el campo. Con ese valor también puedes pasar passwordRules, escritas con la sintaxis de reglas de contraseña de Apple, para que la contraseña generada cumpla tus requisitos.
¿Qué valor de autoComplete debe usar un campo de contraseña?
"password" donde alguien escribe una contraseña existente y "new-password" donde crea una. Los dos figuran entre los valores de autoComplete multiplataforma.
Autofill en las dos plataformas
autoComplete es la pista que leen las dos plataformas, mientras que textContentType es solo de iOS y conecta el campo con el llavero del dispositivo. Definir ambas no cuesta nada y cubre más gestores de contraseñas.
Acompaña el campo de contraseña con un campo de usuario o de correo que lleve autoComplete="username" o "email", para que el gestor sepa a qué cuenta pertenece la contraseña.
Qué mide el medidor de fortaleza
El medidor de esta página cuenta la longitud y los tipos de caracteres usados: minúsculas, mayúsculas, dígitos y símbolos. Es un empujón rápido, no una auditoría, y no puede detectar una contraseña común o ya filtrada.
Las frases de contraseña largas puntúan bien aquí, porque tres de los cuatro puntos vienen de la longitud y solo uno de mezclar tipos de caracteres. Combina el medidor con una comprobación de longitud mínima en tu validación.
Código del campo de contraseña
PasswordInput con un botón para mostrar
Pasa isNew en las pantallas de registro. La etiqueta del botón siempre describe lo que hará la siguiente pulsación.
Función de puntuación de fortaleza
Devuelve de 1 a 4 para cualquier cadena no vacía. Asocia el número a una etiqueta y a un ancho de barra.