Mejores Prácticas de Formularios
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de todas las páginas de esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de todas las páginas de esta sección.
Controla cada TextInput: Empareja value con onChangeText - los inputs no controlados pelean con autofill, lógica de reset y bibliotecas de validación en móvil.
Haz coincidir keyboardType con el campo: email-address, phone-pad y numeric reducen errores y aceleran la entrada - teclados incorrectos frustran a los usuarios en pantallas pequeñas.
Encadena campos con returnKeyType: Usa next + onSubmitEditing → .focus() en la siguiente ref - menos toques que descartar el teclado entre campos.
Establece blurOnSubmit false en pantallas multi-campo: El último campo usa done - los campos intermedios deben mover el foco, no descartar el teclado prematuramente.
Descarta el teclado en submit: Llama a Keyboard.dismiss() en el manejador de submit para que los estados de éxito y la navegación no queden ocultos.
Usa keyboardShouldPersistTaps en formularios de desplazamiento: Los envoltorios ScrollView/FlatList necesitan keyboardShouldPersistTaps="handled" para que los botones de submit reciban toques mientras el teclado está abierto.
Prefiere react-hook-form en móvil: Las suscripciones vencen a los formularios useState gigantes - conecta inputs con Controller, no con register al estilo web.
Valida en touch, no en cada pulsación: mode: "onTouched" mantiene los errores inline tranquilos - la validación gritona en onChange se siente hostil en teléfonos.
Única fuente de verdad con Zod: Exporta z.infer<typeof Schema> - duplicar interfaces junto a esquemas diverge en el primer cambio de API.
Coerción de strings de TextInput en esquemas: z.coerce.number() o transformaciones explícitas - TextInput siempre entrega strings incluso para campos numéricos.
Coloca errores de campos cruzados en la ruta correcta: Password confirm .refine() necesita path: ["confirmPassword"] - los errores root son invisibles en móvil.
Mapea validación del servidor con setError: Los errores de campo HTTP 422 deben aterrizar en el Controller coincidente - solo toasts genéricos obligan a los usuarios a adivinar qué falló.
Instala KeyboardProvider en la raíz: react-native-keyboard-controller requiere el proveedor en _layout - sin él, el desplazamiento consciente y los helpers de toolbar no hacen nada.
Prefiere KeyboardAwareScrollView sobre KAV ingenuo: El controlador de teclado rastrea inputs enfocados de manera más confiable en iOS y Android edge-to-edge (RN 0.86).
Establece Android softwareKeyboardLayoutMode: app.config softwareKeyboardLayoutMode: "pan" se empareja con keyboard-controller - los cambios de tamaño se comportan diferente por OEM sin él.
Usa pickers nativos para fechas cuando la UX lo permite: @react-native-community/datetimepicker respeta las convenciones de plataforma - las ruedas personalizadas cuestan accesibilidad y mantenimiento.
Almacena valores de picker como Date o ISO en state: Formatea con Intl en el borde de visualización - parsear strings de locale en manejadores de submit se rompe con i18n.
Un objeto de formulario en todos los pasos del wizard: FormProvider mantiene todos los campos - useState por paso pierde email cuando step 2 se monta.
Valida solo los campos del paso actual en Next: trigger(STEP_FIELDS[step]) - la validación del esquema completo en step 1 falla porque step 3 está vacío.
Persiste borradores del wizard: El guardado automático de MMKV o AsyncStorage sobrevive a la muerte del proceso - confirma antes de Cancelar cuando isDirty.
Intercepta el botón atrás de hardware de Android en wizards: BackHandler decrementa el índice del paso - de lo contrario, los usuarios salen del flujo accidentalmente.
Etiqueta cada campo para accesibilidad: accessibilityLabel o etiquetas visibles vinculadas con accessibilityLabelledBy - el texto placeholder no es una etiqueta.
Anuncia errores del formulario: AccessibilityInfo.announceForAccessibility en fallo de submit - los lectores de pantalla pueden no mover el foco al primer error automáticamente.
Enfoca el primer campo inválido después de submit: setFocus en la primera ruta de error - los usuarios móviles no deben buscar bordes rojos fuera de pantalla.
Encola envíos sin conexión explícitamente: UI optimista más una cola de reintentos persistida - un fallo silencioso sin conexión es peor que un estado claro "Guardado localmente".
useState está bien para una sola pantalla con tres campos y sin errores del servidor.react-native-keyboard-controller para manejo de insets consistente en RN 0.86.Versiones del stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 16 jul 2026