Manejo de Formularios en React Native con react-hook-form

¿Qué es react-hook-form?

react-hook-form es una librería para manejar formularios en React Native y React. Proporciona un manejo eficiente de estados, validaciones, errores y valores del formulario con una API sencilla y sin tener que escribir mucho código.

🚀 Estructura Básica con `react-hook-form`

Para empezar a usar react-hook-form, necesitas instalarlo y luego utilizar su API para manejar los formularios.

jsx

import React from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

const Formulario = () => {
const { control, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => {
  console.log(data);
};

return (
  <View style={styles.container}>
    <Text style={styles.titulo}>Formulario de Registro</Text>
    
    <Controller
      control={control}
      name="email"
      rules={{ required: 'El email es obligatorio', pattern: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/i }}
      render={({ field: { onChange, onBlur, value } }) => (
        <TextInput
          style={styles.input}
          placeholder="Email"
          onBlur={onBlur}
          onChangeText={onChange}
          value={value}
        />
      )}
    />
    {errors.email && <Text style={styles.errorText}>{errors.email.message}</Text>}

    <Controller
      control={control}
      name="password"
      rules={{ required: 'La contraseña es obligatoria', minLength: { value: 6, message: 'Debe tener al menos 6 caracteres' } }}
      render={({ field: { onChange, onBlur, value } }) => (
        <TextInput
          style={styles.input}
          placeholder="Contraseña"
          onBlur={onBlur}
          onChangeText={onChange}
          secureTextEntry
          value={value}
        />
      )}
    />
    {errors.password && <Text style={styles.errorText}>{errors.password.message}</Text>}

    <Button title="Enviar" onPress={handleSubmit(onSubmit)} />
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
  },
  titulo: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  errorText: {
    color: 'red',
    fontSize: 14,
  },
});

export default Formulario;

📝 Explicación del Código

useForm: Se utiliza para inicializar el formulario y obtener varios métodos útiles:
- control: Permite a Controller gestionar el estado del formulario.
- handleSubmit: Es la función que envía los datos del formulario, solo si no hay errores de validación.
- formState: Se usa para acceder a los errores del formulario.
Controller: Esta es la parte más importante de react-hook-form. Se utiliza para envolver los campos del formulario y conectarlos con el estado de react-hook-form. Aquí se maneja la entrada de datos y las reglas de validación.
Reglas de validación:
- required: Hace que el campo sea obligatorio.
- pattern: Valida que el valor coincida con una expresión regular (en este caso, valida un formato de email).
- minLength: Especifica la longitud mínima del valor ingresado (para la contraseña).
errors: Si un campo no pasa la validación, se almacena un mensaje de error que se puede mostrar en la UI.

🚫 Validación y Manejo de Errores

La validación en react-hook-form se realiza de manera declarativa, utilizando reglas dentro del Controller. Si un campo no pasa la validación, el error es automáticamente gestionado en el estado de formulario y se puede mostrar en la interfaz de usuario.

jsx

{errors.email && <Text style={styles.errorText}>{errors.email.message}</Text>}
{errors.password && <Text style={styles.errorText}>{errors.password.message}</Text>}

🏁 Resumen

react-hook-form simplifica el manejo de formularios en React Native. Con su enfoque de validación y gestión del estado de los campos, puedes reducir la cantidad de código y mejorar el rendimiento en comparación con otras soluciones.

Instala la librería usando npm install react-hook-form.
Utiliza Controller para conectar tus campos con el formulario.
Aplica reglas de validación con propiedades como required, minLength y pattern.
Manejo de errores: Los errores de validación se muestran fácilmente utilizando el estado del formulario.