react-hook-form en Mobile

Q: ¿Por qué no puedo usar register() como en web?

React Native no tiene DOM - register se basa en ref + eventos de cambio nativo que TextInput no expone de la misma manera. TextInput usa onChangeText, no onChange. Controller es el bridge soportado y te da control total sobre props del teclado.

Q: ¿Qué modo de validación debo usar en móvil?

Comienza con mode: "onTouched" - los errores aparecen después de que el usuario abandone un campo, no a medio palabra. Añade reValidateMode: "onChange" para que los campos corregidos limpien errores sin otro envío. Reserva mode: "onChange" para campos cortos como códigos promocionales donde la retroalimentación instantánea ayuda.

Q: ¿Cómo muevo el enfoque al siguiente campo cuando el usuario presiona Return?

setFocus está integrado en useForm - no se requiere asignación de ref manual cuando se registran nombres de campo. Establece returnKeyType="done" en el último campo y llama a handleSubmit(onSubmit) en onSubmitEditing.

Q: ¿Cómo enfoco el primer campo inválido después del envío?

El segundo argumento a handleSubmit se ejecuta cuando la validación falla. Combina con scrollTo desde un ref en KeyboardAwareScrollView para formularios largos.

Q: ¿Funciona react-hook-form con TypeScript en Expo?

Sí - pasa un generic a useForm() y a Control en componentes de campo. Empareja con zodResolver e z.infer para formularios completamente tipados. Instala vía npx expo install react-hook-form @hookform/resolvers zod.

Q: ¿Cómo muestro un estado de carga en el botón de envío?

Desestructura isSubmitting de formState. handleSubmit lo establece en true mientras tu promesa onSubmit async está pendiente. Deshabilita Pressable y cambia el texto de la etiqueta mientras isSubmitting sea true.

Q: ¿Cómo reinicio el formulario después de una llamada API exitosa?

reset() limpia errores, estado sucio y valores. Pasa reset(partialValues) para mantener algunos campos después del éxito (p. ej., correo para un paso de confirmación).

Q: ¿Debo usar FormProvider?

Úsalo cuando múltiples componentes secundarios necesiten useFormContext() - pasos de asistente, grupos de campos modal, o secciones de formulario de sistema de diseño. Para un formulario de una pantalla, pasar control a TextField es suficiente.

Q: ¿Cómo se compara react-hook-form con useState controlado en RN?

useState re-renderiza el componente propietario en cada onChangeText. RHF almacena valores en refs y solo re-renderiza segmentos formState suscritos. Para 1-2 campos la diferencia es negligible; pasado ~4 campos RHF gana en hardware de gama media.

Los componentes TextInput de React Native siempre se controlan desde el lado nativo, pero aún así quieres un estado de formulario no controlado en el hilo JS. react-hook-form se suscribe a cambios de campo en lugar de re-renderizar la pantalla completa en cada pulsación de tecla - el patrón que mantiene suave en dispositivos Android de gama media los flujos de registro de múltiples campos y pago.

Receta

Tarjeta de referencia rápida - lista para copiar-pegar.

import { Controller, useForm } from "react-hook-form";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
interface SignInValues {
  email: string;
  password: string;
}
 
export function SignInForm() {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<SignInValues>({
    defaultValues: { email: "", password: "" },
    mode: "onTouched",
  });
 
  async function onSubmit(values: SignInValues) {
    await fetch("https://api.example.com/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
  }
 
  return (
    <View style={styles.form}>
      <Controller
        control={control}
        name="email"
        rules={{ required: "El correo es requerido" }}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextInput
            ref={ref}
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            keyboardType="email-address"
            autoCapitalize="none"
            placeholder="Correo"
            style={styles.input}
          />
        )}
      />
      {errors.email && <Text style={styles.error}>{errors.email.message}</Text>}
 
      <Controller
        control={control}
        name="password"
        rules={{ minLength: { value: 8, message: "Al menos 8 caracteres" } }}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextInput
            ref={ref}
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            secureTextEntry
            placeholder="Contraseña"
            style={styles.input}
          />
        )}
      />
      {errors.password && <Text style={styles.error}>{errors.password.message}</Text>}
 
      <Pressable
        onPress={handleSubmit(onSubmit)}
        disabled={isSubmitting}
        style={styles.button}
      >
        <Text style={styles.buttonText}>{isSubmitting ? "Iniciando sesión…" : "Iniciar sesión"}</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  form: { gap: 12, padding: 16 },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
  error: { color: "#dc2626", fontSize: 13 },
  button: {
    backgroundColor: "#2563eb",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  buttonText: { color: "#fff", fontWeight: "600" },
});

Cuándo usarlo:

Pantallas con más de tres campos TextInput donde useState por campo causa jank visible.
Listas de campos dinámicas (direcciones, artículos de línea) vía useFieldArray.
Formularios que comparten validación con tu aplicación web a través de esquemas Zod.
Asistentes de múltiples pasos que necesitan una instancia de formulario en todos los pasos.
Cualquier flujo donde necesites guardias isDirty antes de navegar atrás.

Ejemplo de trabajo

// components/form/TextField.tsx - campo RN reutilizable conectado a RHF
import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form";
import { StyleSheet, Text, TextInput, type TextInputProps, View } from "react-native";
 
interface TextFieldProps<T extends FieldValues> extends Omit<TextInputProps, "value" | "onChangeText"> {
  control: Control<T>;
  name: FieldPath<T>;
  label: string;
}
 
export function TextField<T extends FieldValues>({
  control,
  name,
  label,
  ...inputProps
}: TextFieldProps<T>) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, onBlur, value, ref }, fieldState: { error, isTouched } }) => (
        <View style={styles.field}>
          <Text style={styles.label}>{label}</Text>
          <TextInput
            ref={ref}
            value={value ?? ""}
            onChangeText={onChange}
            onBlur={onBlur}
            style={[styles.input, isTouched && error && styles.inputError]}
            accessibilityLabel={label}
            {...inputProps}
          />
          {error && <Text style={styles.error}>{error.message}</Text>}
        </View>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  field: { gap: 6 },
  label: { fontSize: 14, fontWeight: "600", color: "#374151" },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  inputError: { borderColor: "#dc2626" },
  error: { color: "#dc2626", fontSize: 13 },
});

// app/(auth)/register.tsx - formulario de perfil con cadena de enfoque y guardia de envío
import { useForm } from "react-hook-form";
import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { useRouter } from "expo-router";
import { TextField } from "../../components/form/TextField";
 
interface RegisterValues {
  fullName: string;
  email: string;
  phone: string;
}
 
export default function RegisterScreen() {
  const router = useRouter();
 
  const {
    control,
    handleSubmit,
    setFocus,
    formState: { isSubmitting, isDirty },
  } = useForm<RegisterValues>({
    defaultValues: { fullName: "", email: "", phone: "" },
    mode: "onTouched",
  });
 
  async function onSubmit(values: RegisterValues) {
    const res = await fetch("https://api.example.com/v1/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
    if (!res.ok) {
      Alert.alert("Registro fallido", "Verifica tus detalles e intenta de nuevo.");
      return;
    }
    Alert.alert("Cuenta creada", "Ahora puedes iniciar sesión.");
  }
 
  function handleBack() {
    if (isDirty) {
      Alert.alert("¿Descartar cambios?", "Tienes ediciones sin guardar.", [
        { text: "Quedarse", style: "cancel" },
        { text: "Descartar", style: "destructive", onPress: () => router.back() },
      ]);
      return;
    }
    router.back();
  }
 
  return (
    <KeyboardAwareScrollView
      bottomOffset={24}
      contentContainerStyle={styles.scroll}
      keyboardShouldPersistTaps="handled"
    >
      <Text style={styles.title}>Crear cuenta</Text>
 
      <TextField
        control={control}
        name="fullName"
        label="Nombre completo"
        autoComplete="name"
        returnKeyType="next"
        onSubmitEditing={() => setFocus("email")}
      />
 
      <TextField
        control={control}
        name="email"
        label="Correo"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
        returnKeyType="next"
        onSubmitEditing={() => setFocus("phone")}
      />
 
      <TextField
        control={control}
        name="phone"
        label="Teléfono"
        keyboardType="phone-pad"
        autoComplete="tel"
        returnKeyType="done"
        onSubmitEditing={handleSubmit(onSubmit)}
      />
 
      <View style={styles.actions}>
        <Pressable onPress={handleBack} style={styles.secondary}>
          <Text style={styles.secondaryText}>Atrás</Text>
        </Pressable>
        <Pressable
          onPress={handleSubmit(onSubmit)}
          disabled={isSubmitting}
          style={styles.primary}
        >
          <Text style={styles.primaryText}>{isSubmitting ? "Guardando…" : "Continuar"}</Text>
        </Pressable>
      </View>
    </KeyboardAwareScrollView>
  );
}
 
const styles = StyleSheet.create({
  scroll: { padding: 16, gap: 16 },
  title: { fontSize: 22, fontWeight: "700", marginBottom: 4 },
  actions: { flexDirection: "row", gap: 12, marginTop: 8 },
  secondary: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  secondaryText: { fontWeight: "600", color: "#374151" },
  primary: {
    flex: 1,
    backgroundColor: "#2563eb",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  primaryText: { color: "#fff", fontWeight: "600" },
});

Lo que esto demuestra:

Controller conecta react-hook-form a cada TextInput - el patrón requerido en React Native.
Un TextField reutilizable mantiene el estilo de error y las etiquetas de accesibilidad consistentes en todas las pantallas.
setFocus y returnKeyType="next" cadenan el teclado de software sin estado adicional.
mode: "onTouched" valida después del blur, no en cada carácter - mejor para escritura móvil.
isDirty impulsa una guardia de descartar cambios antes de que el usuario abandone la pantalla.
KeyboardAwareScrollView mantiene el campo activo visible encima del teclado.

Profundización

Cómo funciona

useForm contiene valores de campo en una tienda respaldada por ref - actualizar un campo no re-renderiza el padre a menos que te suscribas a ese segmento de formState.
Controller registra el campo, conecta onChange a onChangeText, y adjunta el ref para que setFocus pueda llamar a TextInput.focus().
La validación se ejecuta a través de rules en Controller, un resolver personalizado, o zodResolver (ver Validación con Zod).
handleSubmit ejecuta validación primero; tu onSubmit solo se dispara cuando el formulario es válido.
formState usa un Proxy - leer errors.email suscribe el componente a errores de correo; leer todo el objeto formState se suscribe a todo.

Controller vs register en Mobile

Enfoque	React Native	Notas
`register` + spread props	No funciona	Sin ref `<input>` nativo; `TextInput` necesita `onChangeText`
`Controller`	Por defecto	Control total sobre props y estilo de `TextInput`
`useController`	Componentes de campo personalizado	Lo mismo que `Controller`, mejor para envolvedores de sistema de diseño

En web puedes {...register("email")} en un input nativo. En RN, siempre usa Controller o useController.

Modos de validación para Mobile

`mode`	Cuándo se ejecuta la validación	Ajuste móvil
`onSubmit`	Al presionar botón	Formularios simples de un campo
`onTouched`	Después del primer blur, luego en cambio	Recomendado por defecto para pantallas de múltiples campos
`onBlur`	Cada blur	Bueno para áreas de texto largo
`onChange`	Cada pulsación de tecla	Usar con moderación - puede luchar contra el teclado y causar jank

Combina con reValidateMode: "onChange" para que los campos corregidos limpien errores inmediatamente después del primer intento de envío.

FormProvider y flujos de múltiples pasos

import { FormProvider, useForm } from "react-hook-form";
 
const methods = useForm<WizardValues>({ defaultValues: { /* todos los pasos */ } });
 
return (
  <FormProvider {...methods}>
    {step === 1 ? <AccountStep /> : <AddressStep />}
  </FormProvider>
);

Declara todos los campos de paso en defaultValues aunque el paso actual solo renderice un subconjunto - isDirty y reset permanecen precisos.
Los pasos secundarios llaman a useFormContext() en lugar de recibir control a través de props.
Persiste methods.getValues() en AsyncStorage entre pasos para recuperación de asistente (ver Flujos de múltiples pasos y asistentes).

Notas de TypeScript

import { useForm, type SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
 
const ProfileSchema = z.object({
  fullName: z.string().min(1),
  email: z.string().email(),
});
 
type ProfileValues = z.infer<typeof ProfileSchema>;
 
const onSubmit: SubmitHandler<ProfileValues> = async (values) => {
  // los valores están completamente tipados
};
 
const form = useForm<ProfileValues>({
  resolver: zodResolver(ProfileSchema),
  defaultValues: { fullName: "", email: "" },
});

Instala con npx expo install react-hook-form @hookform/resolvers zod.
Usa FieldPath<ProfileValues> en props name de campo reutilizable para que los typos fallen en tiempo de compilación.
Los valores de TextInput siempre son strings - coerciona números en Zod con z.coerce.number() en lugar de escribir campos como number en defaultValues.

Parámetros y valores de retorno

API	Propósito en RN
`useForm({ defaultValues })`	Requerido - cada clave de campo debe aparecer
`control`	Pasa a `Controller` / `useFieldArray`
`handleSubmit(onValid, onInvalid?)`	Envuelve `Pressable.onPress`; `onInvalid` puede llamar a `setFocus` en el primer error
`setFocus(name)`	Mueve el enfoque del teclado a un campo por nombre
`reset(values?)`	Limpia después del éxito o restaura borrador
`watch(name)`	Suscríbete a un campo - evita ver el formulario completo en render
`useFieldArray({ control, name })`	Filas dinámicas - clave elementos de lista con `field.id`, no índice de array

Errores comunes

Propagación de register en TextInput - register devuelve props centrados en web (onChange, name) que no se asignan a onChangeText. Solución: Usa Controller y asigna onChange → onChangeText.
Falta de claves defaultValues - Los nuevos campos muestran undefined, isDirty permanece false después de ediciones, y reset() los salta. Solución: Lista cada campo en defaultValues, incluyendo strings vacíos y arrays vacíos.
Desestructuración de todo formState - const { formState } = useForm() luego leer formState.isSubmitting en render aún funciona, pero const { isSubmitting, errors, isDirty, isValid } = formState se suscribe a cuatro señales a la vez. Solución: Desestructura solo lo que el componente muestra.
watch() en el render padre - watch() sin argumentos re-renderiza en cada keystroke en todos los campos - el problema que RHF resuelve. Solución: watch("email") para un campo, o mueve UI vigilada a un hijo aislado.
Valor undefined de TextInput - Pasar value={undefined} dispara advertencias y limpia la posición del cursor. Solución: value={value ?? ""} en el render Controller.
onSubmit sin handleSubmit - Presionar el botón salta validación y envía datos parciales. Solución: onPress={handleSubmit(onSubmit)} en Pressable, nunca onPress={onSubmit}.
Errores del servidor no asignados a campos - API devuelve { fieldErrors: { email: "Taken" } } pero la interfaz de usuario muestra una alerta genérica. Solución: Itera setError("email", { type: "server", message }) y setFocus("email").

Alternativas

Alternativa	Usar cuando	No usar cuando
react-hook-form + `Controller`	Predeterminado para 4+ campos, listas dinámicas, esquemas Zod compartidos	Un cuadro de búsqueda único con un estado local
Plain `useState` por campo	1-3 campos, sin validación, pantallas prototipo	Pago, incorporación, o cualquier formulario con reglas entre campos
Formik	Aplicación Brownfield ya en Formik	Aplicaciones Expo Greenfield - perfil de re-render más pesado
React 19 `useActionState`	Acciones de servidor estilo web en rutas Expo Router API	Validación compleja solo del cliente y entradas enmascaradas en dispositivo
TanStack Form	Quieres primitivos de formulario headless con suscripciones de grano fino	Equipo ya estandarizado en RHF en web y móvil

Preguntas frecuentes

¿Por qué no puedo usar register() como en web?

React Native no tiene DOM <input> - register se basa en ref + eventos de cambio nativo que TextInput no expone de la misma manera.
TextInput usa onChangeText, no onChange.
Controller es el bridge soportado y te da control total sobre props del teclado.

¿Qué modo de validación debo usar en móvil?

Comienza con mode: "onTouched" - los errores aparecen después de que el usuario abandone un campo, no a medio palabra.
Añade reValidateMode: "onChange" para que los campos corregidos limpien errores sin otro envío.
Reserva mode: "onChange" para campos cortos como códigos promocionales donde la retroalimentación instantánea ayuda.

¿Cómo muevo el enfoque al siguiente campo cuando el usuario presiona Return?

<TextField
  name="email"
  returnKeyType="next"
  onSubmitEditing={() => setFocus("password")}
/>

setFocus está integrado en useForm - no se requiere asignación de ref manual cuando se registran nombres de campo.
Establece returnKeyType="done" en el último campo y llama a handleSubmit(onSubmit) en onSubmitEditing.

¿Cómo enfoco el primer campo inválido después del envío?

handleSubmit(onSubmit, (invalid) => {
  const first = Object.keys(invalid)[0] as keyof RegisterValues;
  setFocus(first);
})();

El segundo argumento a handleSubmit se ejecuta cuando la validación falla.
Combina con scrollTo desde un ref en KeyboardAwareScrollView para formularios largos.

¿Funciona react-hook-form con TypeScript en Expo?

Sí - pasa un generic a useForm<FormValues>() y a Control<FormValues> en componentes de campo.
Empareja con zodResolver e z.infer<typeof Schema> para formularios completamente tipados.
Instala vía npx expo install react-hook-form @hookform/resolvers zod.

¿Cómo muestro un estado de carga en el botón de envío?

Desestructura isSubmitting de formState.
handleSubmit lo establece en true mientras tu promesa onSubmit async está pendiente.
Deshabilita Pressable y cambia el texto de la etiqueta mientras isSubmitting sea true.

¿Puedo usar react-hook-form dentro de un FlatList?

Sí para el envoltorio del formulario - coloca campos dentro de ListHeaderComponent o ListFooterComponent.
No coloques TextInput no controlado dentro de renderItem sin Controller - el reciclaje restablecerá valores.
Para filas dinámicas, prefiere useFieldArray sobre estado de índice manual.

¿Cómo reinicio el formulario después de una llamada API exitosa?

async function onSubmit(values: RegisterValues) {
  await createAccount(values);
  reset(); // de vuelta a defaultValues
}

reset() limpia errores, estado sucio y valores.
Pasa reset(partialValues) para mantener algunos campos después del éxito (p. ej., correo para un paso de confirmación).

¿Debo usar FormProvider?

Úsalo cuando múltiples componentes secundarios necesiten useFormContext() - pasos de asistente, grupos de campos modal, o secciones de formulario de sistema de diseño.
Para un formulario de una pantalla, pasar control a TextField es suficiente.

¿Cómo se compara react-hook-form con useState controlado en RN?

useState re-renderiza el componente propietario en cada onChangeText.
RHF almacena valores en refs y solo re-renderiza segmentos formState suscritos.
Para 1-2 campos la diferencia es negligible; pasado ~4 campos RHF gana en hardware de gama media.

¿Cómo manejo texto seguro y alternadores de visibilidad de contraseña?

Mantén secureTextEntry en TextInput dentro de Controller - no bifurques un segundo input no controlado.
Alterna visibilidad con useState local en el componente de campo; el valor RHF permanece como la misma cadena.

¿Puedo combinar react-hook-form con KeyboardAwareScrollView?

Sí - envuelve el formulario en KeyboardAwareScrollView desde react-native-keyboard-controller.
Establece keyboardShouldPersistTaps="handled" para que los botones de envío funcionen mientras el teclado está abierto.
Ver Keyboard Controller para bottomOffset y configuración de barra de herramientas.

¿Cómo instalo react-hook-form en un proyecto Expo SDK 57?

npx expo install react-hook-form

Añade @hookform/resolvers y zod cuando conectes validación de esquema.
No se requiere plugin de configuración nativa - JavaScript puro.

Relacionado

Conceptos básicos de formularios - TextInput controlado, tipos de teclado, y conceptos fundamentales de enfoque
Validación con Zod - zodResolver, errores inline, y UX móvil basado en esquema
Controlador de teclado - mantén inputs enfocados visibles encima del teclado de software
Accesibilidad en formularios - etiquetas, anuncios de error, y orden de enfoque
Flujos de múltiples pasos y asistentes - una instancia useForm en todos los pasos
Mejores prácticas de formularios - reducción de taps, persistencia de borrador, y envío offline

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

Tarjeta de referencia rápida - lista para copiar-pegar.

import { Controller, useForm } from "react-hook-form";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
interface SignInValues {
  email: string;
  password: string;
}
 
export function SignInForm() {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<SignInValues>({
    defaultValues: { email: "", password: "" },
    mode: "onTouched",
  });
 
  async function onSubmit(values: SignInValues) {
    await fetch("https://api.example.com/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
  }
 
  return (
    <View style={styles.form}>
      <Controller
        control={control}
        name="email"
        rules={{ required: "El correo es requerido" }}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextInput
            ref={ref}
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            keyboardType="email-address"
            autoCapitalize="none"
            placeholder="Correo"
            style={styles.input}
          />
        )}
      />
      {errors.email && <Text style={styles.error}>{errors.email.message}</Text>}
 
      <Controller
        control={control}
        name="password"
        rules={{ minLength: { value: 8, message: "Al menos 8 caracteres" } }}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextInput
            ref={ref}
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            secureTextEntry
            placeholder="Contraseña"
            style={styles.input}
          />
        )}
      />
      {errors.password && <Text style={styles.error}>{errors.password.message}</Text>}
 
      <Pressable
        onPress={handleSubmit(onSubmit)}
        disabled={isSubmitting}
        style={styles.button}
      >
        <Text style={styles.buttonText}>{isSubmitting ? "Iniciando sesión…" : "Iniciar sesión"}</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  form: { gap: 12, padding: 16 },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
  error: { color: "#dc2626", fontSize: 13 },
  button: {
    backgroundColor: "#2563eb",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  buttonText: { color: "#fff", fontWeight: "600" },
});

Cuándo usarlo:

Pantallas con más de tres campos TextInput donde useState por campo causa jank visible.
Listas de campos dinámicas (direcciones, artículos de línea) vía useFieldArray.
Formularios que comparten validación con tu aplicación web a través de esquemas Zod.
Asistentes de múltiples pasos que necesitan una instancia de formulario en todos los pasos.
Cualquier flujo donde necesites guardias isDirty antes de navegar atrás.

Ejemplo de trabajo

// components/form/TextField.tsx - campo RN reutilizable conectado a RHF
import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form";
import { StyleSheet, Text, TextInput, type TextInputProps, View } from "react-native";
 
interface TextFieldProps<T extends FieldValues> extends Omit<TextInputProps, "value" | "onChangeText"> {
  control: Control<T>;
  name: FieldPath<T>;
  label: string;
}
 
export function TextField<T extends FieldValues>({
  control,
  name,
  label,
  ...inputProps
}: TextFieldProps<T>) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, onBlur, value, ref }, fieldState: { error, isTouched } }) => (
        <View style={styles.field}>
          <Text style={styles.label}>{label}</Text>
          <TextInput
            ref={ref}
            value={value ?? ""}
            onChangeText={onChange}
            onBlur={onBlur}
            style={[styles.input, isTouched && error && styles.inputError]}
            accessibilityLabel={label}
            {...inputProps}
          />
          {error && <Text style={styles.error}>{error.message}</Text>}
        </View>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  field: { gap: 6 },
  label: { fontSize: 14, fontWeight: "600", color: "#374151" },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  inputError: { borderColor: "#dc2626" },
  error: { color: "#dc2626", fontSize: 13 },
});

// app/(auth)/register.tsx - formulario de perfil con cadena de enfoque y guardia de envío
import { useForm } from "react-hook-form";
import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { useRouter } from "expo-router";
import { TextField } from "../../components/form/TextField";
 
interface RegisterValues {
  fullName: string;
  email: string;
  phone: string;
}
 
export default function RegisterScreen() {
  const router = useRouter();
 
  const {
    control,
    handleSubmit,
    setFocus,
    formState: { isSubmitting, isDirty },
  } = useForm<RegisterValues>({
    defaultValues: { fullName: "", email: "", phone: "" },
    mode: "onTouched",
  });
 
  async function onSubmit(values: RegisterValues) {
    const res = await fetch("https://api.example.com/v1/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
    if (!res.ok) {
      Alert.alert("Registro fallido", "Verifica tus detalles e intenta de nuevo.");
      return;
    }
    Alert.alert("Cuenta creada", "Ahora puedes iniciar sesión.");
  }
 
  function handleBack() {
    if (isDirty) {
      Alert.alert("¿Descartar cambios?", "Tienes ediciones sin guardar.", [
        { text: "Quedarse", style: "cancel" },
        { text: "Descartar", style: "destructive", onPress: () => router.back() },
      ]);
      return;
    }
    router.back();
  }
 
  return (
    <KeyboardAwareScrollView
      bottomOffset={24}
      contentContainerStyle={styles.scroll}
      keyboardShouldPersistTaps="handled"
    >
      <Text style={styles.title}>Crear cuenta</Text>
 
      <TextField
        control={control}
        name="fullName"
        label="Nombre completo"
        autoComplete="name"
        returnKeyType="next"
        onSubmitEditing={() => setFocus("email")}
      />
 
      <TextField
        control={control}
        name="email"
        label="Correo"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
        returnKeyType="next"
        onSubmitEditing={() => setFocus("phone")}
      />
 
      <TextField
        control={control}
        name="phone"
        label="Teléfono"
        keyboardType="phone-pad"
        autoComplete="tel"
        returnKeyType="done"
        onSubmitEditing={handleSubmit(onSubmit)}
      />
 
      <View style={styles.actions}>
        <Pressable onPress={handleBack} style={styles.secondary}>
          <Text style={styles.secondaryText}>Atrás</Text>
        </Pressable>
        <Pressable
          onPress={handleSubmit(onSubmit)}
          disabled={isSubmitting}
          style={styles.primary}
        >
          <Text style={styles.primaryText}>{isSubmitting ? "Guardando…" : "Continuar"}</Text>
        </Pressable>
      </View>
    </KeyboardAwareScrollView>
  );
}
 
const styles = StyleSheet.create({
  scroll: { padding: 16, gap: 16 },
  title: { fontSize: 22, fontWeight: "700", marginBottom: 4 },
  actions: { flexDirection: "row", gap: 12, marginTop: 8 },
  secondary: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  secondaryText: { fontWeight: "600", color: "#374151" },
  primary: {
    flex: 1,
    backgroundColor: "#2563eb",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  primaryText: { color: "#fff", fontWeight: "600" },
});

Lo que esto demuestra:

Controller conecta react-hook-form a cada TextInput - el patrón requerido en React Native.
Un TextField reutilizable mantiene el estilo de error y las etiquetas de accesibilidad consistentes en todas las pantallas.
setFocus y returnKeyType="next" cadenan el teclado de software sin estado adicional.
mode: "onTouched" valida después del blur, no en cada carácter - mejor para escritura móvil.
isDirty impulsa una guardia de descartar cambios antes de que el usuario abandone la pantalla.
KeyboardAwareScrollView mantiene el campo activo visible encima del teclado.

Profundización

Cómo funciona

useForm contiene valores de campo en una tienda respaldada por ref - actualizar un campo no re-renderiza el padre a menos que te suscribas a ese segmento de formState.
Controller registra el campo, conecta onChange a onChangeText, y adjunta el ref para que setFocus pueda llamar a TextInput.focus().
La validación se ejecuta a través de rules en Controller, un resolver personalizado, o zodResolver (ver Validación con Zod).
handleSubmit ejecuta validación primero; tu onSubmit solo se dispara cuando el formulario es válido.
formState usa un Proxy - leer errors.email suscribe el componente a errores de correo; leer todo el objeto formState se suscribe a todo.

Controller vs register en Mobile

Enfoque	React Native	Notas
`register` + spread props	No funciona	Sin ref `<input>` nativo; `TextInput` necesita `onChangeText`
`Controller`	Por defecto	Control total sobre props y estilo de `TextInput`
`useController`	Componentes de campo personalizado	Lo mismo que `Controller`, mejor para envolvedores de sistema de diseño

En web puedes {...register("email")} en un input nativo. En RN, siempre usa Controller o useController.

Modos de validación para Mobile

`mode`	Cuándo se ejecuta la validación	Ajuste móvil
`onSubmit`	Al presionar botón	Formularios simples de un campo
`onTouched`	Después del primer blur, luego en cambio	Recomendado por defecto para pantallas de múltiples campos
`onBlur`	Cada blur	Bueno para áreas de texto largo
`onChange`	Cada pulsación de tecla	Usar con moderación - puede luchar contra el teclado y causar jank

Combina con reValidateMode: "onChange" para que los campos corregidos limpien errores inmediatamente después del primer intento de envío.

FormProvider y flujos de múltiples pasos

import { FormProvider, useForm } from "react-hook-form";
 
const methods = useForm<WizardValues>({ defaultValues: { /* todos los pasos */ } });
 
return (
  <FormProvider {...methods}>
    {step === 1 ? <AccountStep /> : <AddressStep />}
  </FormProvider>
);

Declara todos los campos de paso en defaultValues aunque el paso actual solo renderice un subconjunto - isDirty y reset permanecen precisos.
Los pasos secundarios llaman a useFormContext() en lugar de recibir control a través de props.
Persiste methods.getValues() en AsyncStorage entre pasos para recuperación de asistente (ver Flujos de múltiples pasos y asistentes).

Notas de TypeScript

import { useForm, type SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
 
const ProfileSchema = z.object({
  fullName: z.string().min(1),
  email: z.string().email(),
});
 
type ProfileValues = z.infer<typeof ProfileSchema>;
 
const onSubmit: SubmitHandler<ProfileValues> = async (values) => {
  // los valores están completamente tipados
};
 
const form = useForm<ProfileValues>({
  resolver: zodResolver(ProfileSchema),
  defaultValues: { fullName: "", email: "" },
});

Instala con npx expo install react-hook-form @hookform/resolvers zod.
Usa FieldPath<ProfileValues> en props name de campo reutilizable para que los typos fallen en tiempo de compilación.
Los valores de TextInput siempre son strings - coerciona números en Zod con z.coerce.number() en lugar de escribir campos como number en defaultValues.

Parámetros y valores de retorno

API	Propósito en RN
`useForm({ defaultValues })`	Requerido - cada clave de campo debe aparecer
`control`	Pasa a `Controller` / `useFieldArray`
`handleSubmit(onValid, onInvalid?)`	Envuelve `Pressable.onPress`; `onInvalid` puede llamar a `setFocus` en el primer error
`setFocus(name)`	Mueve el enfoque del teclado a un campo por nombre
`reset(values?)`	Limpia después del éxito o restaura borrador
`watch(name)`	Suscríbete a un campo - evita ver el formulario completo en render
`useFieldArray({ control, name })`	Filas dinámicas - clave elementos de lista con `field.id`, no índice de array

Errores comunes

Propagación de register en TextInput - register devuelve props centrados en web (onChange, name) que no se asignan a onChangeText. Solución: Usa Controller y asigna onChange → onChangeText.
Falta de claves defaultValues - Los nuevos campos muestran undefined, isDirty permanece false después de ediciones, y reset() los salta. Solución: Lista cada campo en defaultValues, incluyendo strings vacíos y arrays vacíos.
Desestructuración de todo formState - const { formState } = useForm() luego leer formState.isSubmitting en render aún funciona, pero const { isSubmitting, errors, isDirty, isValid } = formState se suscribe a cuatro señales a la vez. Solución: Desestructura solo lo que el componente muestra.
watch() en el render padre - watch() sin argumentos re-renderiza en cada keystroke en todos los campos - el problema que RHF resuelve. Solución: watch("email") para un campo, o mueve UI vigilada a un hijo aislado.
Valor undefined de TextInput - Pasar value={undefined} dispara advertencias y limpia la posición del cursor. Solución: value={value ?? ""} en el render Controller.
onSubmit sin handleSubmit - Presionar el botón salta validación y envía datos parciales. Solución: onPress={handleSubmit(onSubmit)} en Pressable, nunca onPress={onSubmit}.
Errores del servidor no asignados a campos - API devuelve { fieldErrors: { email: "Taken" } } pero la interfaz de usuario muestra una alerta genérica. Solución: Itera setError("email", { type: "server", message }) y setFocus("email").

Alternativas

Alternativa	Usar cuando	No usar cuando
react-hook-form + `Controller`	Predeterminado para 4+ campos, listas dinámicas, esquemas Zod compartidos	Un cuadro de búsqueda único con un estado local
Plain `useState` por campo	1-3 campos, sin validación, pantallas prototipo	Pago, incorporación, o cualquier formulario con reglas entre campos
Formik	Aplicación Brownfield ya en Formik	Aplicaciones Expo Greenfield - perfil de re-render más pesado
React 19 `useActionState`	Acciones de servidor estilo web en rutas Expo Router API	Validación compleja solo del cliente y entradas enmascaradas en dispositivo
TanStack Form	Quieres primitivos de formulario headless con suscripciones de grano fino	Equipo ya estandarizado en RHF en web y móvil

Preguntas frecuentes

¿Por qué no puedo usar register() como en web?

React Native no tiene DOM <input> - register se basa en ref + eventos de cambio nativo que TextInput no expone de la misma manera.
TextInput usa onChangeText, no onChange.
Controller es el bridge soportado y te da control total sobre props del teclado.

¿Qué modo de validación debo usar en móvil?

Comienza con mode: "onTouched" - los errores aparecen después de que el usuario abandone un campo, no a medio palabra.
Añade reValidateMode: "onChange" para que los campos corregidos limpien errores sin otro envío.
Reserva mode: "onChange" para campos cortos como códigos promocionales donde la retroalimentación instantánea ayuda.

¿Cómo muevo el enfoque al siguiente campo cuando el usuario presiona Return?

<TextField
  name="email"
  returnKeyType="next"
  onSubmitEditing={() => setFocus("password")}
/>

setFocus está integrado en useForm - no se requiere asignación de ref manual cuando se registran nombres de campo.
Establece returnKeyType="done" en el último campo y llama a handleSubmit(onSubmit) en onSubmitEditing.

¿Cómo enfoco el primer campo inválido después del envío?

handleSubmit(onSubmit, (invalid) => {
  const first = Object.keys(invalid)[0] as keyof RegisterValues;
  setFocus(first);
})();

El segundo argumento a handleSubmit se ejecuta cuando la validación falla.
Combina con scrollTo desde un ref en KeyboardAwareScrollView para formularios largos.

¿Funciona react-hook-form con TypeScript en Expo?

Sí - pasa un generic a useForm<FormValues>() y a Control<FormValues> en componentes de campo.
Empareja con zodResolver e z.infer<typeof Schema> para formularios completamente tipados.
Instala vía npx expo install react-hook-form @hookform/resolvers zod.

¿Cómo muestro un estado de carga en el botón de envío?

Desestructura isSubmitting de formState.
handleSubmit lo establece en true mientras tu promesa onSubmit async está pendiente.
Deshabilita Pressable y cambia el texto de la etiqueta mientras isSubmitting sea true.

¿Puedo usar react-hook-form dentro de un FlatList?

Sí para el envoltorio del formulario - coloca campos dentro de ListHeaderComponent o ListFooterComponent.
No coloques TextInput no controlado dentro de renderItem sin Controller - el reciclaje restablecerá valores.
Para filas dinámicas, prefiere useFieldArray sobre estado de índice manual.

¿Cómo reinicio el formulario después de una llamada API exitosa?

async function onSubmit(values: RegisterValues) {
  await createAccount(values);
  reset(); // de vuelta a defaultValues
}

reset() limpia errores, estado sucio y valores.
Pasa reset(partialValues) para mantener algunos campos después del éxito (p. ej., correo para un paso de confirmación).

¿Debo usar FormProvider?

Úsalo cuando múltiples componentes secundarios necesiten useFormContext() - pasos de asistente, grupos de campos modal, o secciones de formulario de sistema de diseño.
Para un formulario de una pantalla, pasar control a TextField es suficiente.

¿Cómo se compara react-hook-form con useState controlado en RN?

useState re-renderiza el componente propietario en cada onChangeText.
RHF almacena valores en refs y solo re-renderiza segmentos formState suscritos.
Para 1-2 campos la diferencia es negligible; pasado ~4 campos RHF gana en hardware de gama media.

¿Cómo manejo texto seguro y alternadores de visibilidad de contraseña?

Mantén secureTextEntry en TextInput dentro de Controller - no bifurques un segundo input no controlado.
Alterna visibilidad con useState local en el componente de campo; el valor RHF permanece como la misma cadena.

¿Puedo combinar react-hook-form con KeyboardAwareScrollView?

Sí - envuelve el formulario en KeyboardAwareScrollView desde react-native-keyboard-controller.
Establece keyboardShouldPersistTaps="handled" para que los botones de envío funcionen mientras el teclado está abierto.
Ver Keyboard Controller para bottomOffset y configuración de barra de herramientas.

¿Cómo instalo react-hook-form en un proyecto Expo SDK 57?

npx expo install react-hook-form

Añade @hookform/resolvers y zod cuando conectes validación de esquema.
No se requiere plugin de configuración nativa - JavaScript puro.

Relacionado

Conceptos básicos de formularios - TextInput controlado, tipos de teclado, y conceptos fundamentales de enfoque
Validación con Zod - zodResolver, errores inline, y UX móvil basado en esquema
Controlador de teclado - mantén inputs enfocados visibles encima del teclado de software
Accesibilidad en formularios - etiquetas, anuncios de error, y orden de enfoque
Flujos de múltiples pasos y asistentes - una instancia useForm en todos los pasos
Mejores prácticas de formularios - reducción de taps, persistencia de borrador, y envío offline

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

react-hook-form en Mobile

Buscar en la documentación

react-hook-form en Mobile