Formularios en React Native: campos, validación y teclado
Guía de formularios y validación en React Native
Formularios en React Native: campos controlados y validación | We.Inc
Crea un formulario en React Native con TextInputs controlados, una única función validate, mensajes de error bajo cada campo y manejo del teclado. Prueba la validación en vivo en tu navegador.
Un formulario fiable en React Native necesita tres piezas: TextInputs controlados por el estado, una función validate que devuelve un error por campo y el manejo del teclado. Muestra cada mensaje cuando la persona haya salido de ese campo o haya pulsado enviar. Envuelve la pantalla en KeyboardAvoidingView y pon keyboardShouldPersistTaps="handled" en el ScrollView para que el botón de envío siga siendo accesible.
Piezas de un formulario en React Native
Tarea
Herramienta
Guardar los valores
useState con un objeto, o un hook por campo
Comprobar los valores
Una función pura validate(values) que devuelve un objeto de errores
Mostrar los errores
Text bajo cada campo, enlazado mediante accessibilityLabel o una región en vivo
Mantener los campos visibles
KeyboardAvoidingView con behavior="padding" en iOS
Pulsar enviar con el teclado abierto
keyboardShouldPersistTaps="handled" en el ScrollView
Pasar de un campo a otro
returnKeyType="next" y focus() en la ref siguiente
Las reglas de validación de esta página son JavaScript puro, así que la vista previa de abajo ejecuta exactamente la función que pegarías en tu pantalla de React Native. Rellena los campos, sal de ellos y pulsa Crear cuenta para ver cómo aparece y desaparece cada mensaje.
Cada campo escribe en un único objeto values mediante onChangeText.
onBlur marca un campo como tocado, para que su error pueda mostrarse sin regañar a nadie a mitad de escribir.
validate(values) se ejecuta en cada renderizado y devuelve un objeto con un mensaje por cada regla incumplida.
Enviar marca todos los campos como tocados y se detiene si el objeto de errores tiene alguna clave.
Cuando ya no quedan errores, el manejador envía los valores y puede invocar Keyboard.dismiss().
Mantén validate como función pura para poder probarla sin renderizar nada y reutilizarla en el servidor.
No desactives el botón de envío mientras el formulario no sea válido; pulsarlo es la forma en que mucha gente descubre qué falta.
Pon el texto de error justo debajo de su campo, con palabras que expliquen cómo resolver el problema.
Recorta los espacios de las direcciones de correo antes de comprobarlas; un espacio final pegado es el falso error más común.
Vuelve a comprobarlo todo en el servidor. Las reglas del cliente orientan a la gente, pero no son de fiar.
Preguntas frecuentes
¿Necesito una librería de formularios en React Native?
No. Unos pocos campos funcionan bien con useState y una función validate como la de esta página. Las librerías ayudan cuando un formulario tiene muchos campos, arrays anidados o comprobaciones asíncronas, y React Hook Form se describe a sí misma como compatible con la web y con React Native.
¿Cómo evito que el teclado tape mis campos?
Envuelve el formulario en KeyboardAvoidingView. Cambia su altura, su posición o su padding inferior para adaptarse al teclado; behavior="padding" es la opción habitual en iOS. keyboardVerticalOffset tiene en cuenta una cabecera situada sobre la vista y vale 0 por defecto.
¿Por qué mi botón de envío necesita dos toques?
keyboardShouldPersistTaps del ScrollView vale "never" por defecto, así que el primer toque solo cierra el teclado. Ponlo en "handled" y el botón recibirá el toque a la primera.
¿Cómo cierro el teclado después de enviar?
Invoca Keyboard.dismiss(), que según la documentación cierra el teclado activo y quita el foco.
Cuándo mostrar un error
Mostrar todas las reglas en rojo nada más abrirse la pantalla se siente como una regañina. Registra qué campos ha tocado la persona y muestra un mensaje solo después de que salga de ese campo, o tras un intento de envío.
Una vez que un mensaje está visible, vuelve a ejecutar la comprobación con cada pulsación para que desaparezca en cuanto el valor sea válido. Esa confirmación inmediata es la recompensa por esperar antes de mostrarlo.
Errores accesibles
Un borde rojo por sí solo no significa nada para alguien que usa un lector de pantalla o tiene baja percepción del color. Escribe el problema como texto e inclúyelo en el accessibilityLabel del campo para que se lea cuando el foco llegue ahí.
En Android, accessibilityLiveRegion="polite" en el Text del error hace que TalkBack anuncie el mensaje cuando aparece sin mover el foco.
Código de formulario para copiar
La función validate
JavaScript puro sin imports de React Native, así que funciona en tests, en la vista previa web y en un servidor.
Pantalla de registro con campos tocados y manejo del teclado
Un objeto values, un objeto touched y un componente auxiliar Field que muestra su error solo cuando corresponde.
Escribe tu nombre.
Escribe tu dirección de correo.
A esa dirección de correo le falta una @ o un dominio.
Usa al menos 8 caracteres.
Las dos contraseñas no coinciden.
Vista previa de la validación
Las comprobaciones ejecutan la función validate del código de abajo. Los mensajes aparecen al salir de un campo o al pulsar el botón.
Nombre
Contraseña
Confirmar contraseña
Crear cuenta
Todos los campos son válidos. Una aplicación real enviaría ahora los valores.