Implementando Formik y Yup

Formik y Yup tambien sirven para react web normal, puede que sea un poco complicado a un inicio pero una vez que lo dominas te facilita las validaciones de los formularios

Es súper bueno utilizar librerías de tercerros para hacer este tipo de validaciones, pero recuerden que también pueden crear su propia lógica de obtención de datos y validación de estos.

Les comparto un custom hook para recibir los datos de los inputs y computarlos con sus correspondientes fields (sin Formik).

Screen de ejemplo que implementa el customHook.

const {onChange, form, isSuscribed} = useForm({
   //Este es el objeto que recibirá mi custom hook
    name: '',
    email: '',
    phone: '',
    isSuscribed: false,
  });

	<TextInput
            style={{...styles.textInput, color: colors.text}}
            placeholder="Type your name"
            placeholderTextColor='black'
            autoCapitalize='words'
            onChangeText={(value) => onChange(value, 'name')}
          />
          <TextInput
            style={{...styles.textInput, color: colors.text}}
            placeholder="Type your email"
            placeholderTextColor='black'
            keyboardType="email-address"
            autoCapitalize='none'
            onChangeText={(value) => onChange(value, 'email')}
          />

Custom Hook (con TypeScript) que recibe el objeto y hace la lógica para almacenar el valor con su correspondiente field.
El field no es nada más que el referente a mi input, similar al name de un input en HTML.

import { useState } from "react";

export const useForm = <T extends Object>(form: T) => {

  //console.log("The object is here:", form)

  const [state, setState] = useState(form);

  const onChange = <K extends Object>(value:K, field: keyof T) => {
    setState({
      ...state,
      [field]:value
    })
  }

  return {
    ...state,
    form: state,
    onChange
  }
}

Recomiendo mucho también React hook form, funciona tanto para web como para react native. Buenísimo, se puede aplicar las validaciones y muchas otras herramientas mas.

react-hook-form.com

En vez de usar funciones que devuelve objetos, se pueden usar simplementes objetos y funciona exactamente.

const initialValues = {
  username: "",
  password: "",
}

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
  Keyboard,
} from "react-native";
import { useFormik } from "formik";
import * as Yup from "yup";

export default function LoginForm() {
  const formik = useFormik({
    initialValues: initialValues(),
    validationSchema: Yup.object(validationSchema()),
    validateOnChange: false,
    onSubmit: (formValue) => {
      console.log("Formulario enviado...");
      console.log(formValue);
    },
  });

  return (
    <View>
      <Text style={styles.title}>Iniciar sesión</Text>
      <TextInput
        placeholder="Nombre de usuario"
        style={styles.input}
        autoCapitalize="none"
        value={formik.values.username}
        onChangeText={(text) => formik.setFieldValue("username", text)}
      />
      <TextInput
        placeholder="Contraseña"
        style={styles.input}
        autoCapitalize="none"
        secureTextEntry={true}
        value={formik.values.password}
        onChangeText={(text) => formik.setFieldValue("password", text)}
      />
      <Button title="Entrar" onPress={formik.handleSubmit} />

      <Text style={styles.error}>{formik.errors.username}</Text>
      <Text style={styles.error}>{formik.errors.password}</Text>
    </View>
  );
}

function initialValues() {
  return {
    username: "",
    password: "",
  };
}

function validationSchema() {
  return {
    username: Yup.string().required("El usuario es obligatorio"),
    password: Yup.string().required("La contraseña es obligatoria"),
  };
}

const styles = StyleSheet.create({
  title: {
    textAlign: "center",
    fontSize: 28,
    fontWeight: "bold",
    marginTop: 50,
    marginBottom: 15,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderRadius: 10,
  },
  error: {
    textAlign: "center",
    color: "#f00",
    marginTop: 20,
  },
});

Una pequeña función que te ayuda a mostrar todos los errores sin necesidad de estarlos llamando cada uno en un <Text>
Lo que hacemos es tomar del objeto formik.errors cada uno de sus valores y los recorremos con map.
De esta forma si son 20 campos pues bueno, ya te puedes imaginar.

<Text style={styles.notifications}> 
{
	Object.values(formik.errors).map(el => `${el}. \n`
}
</Text>

Resultado:

Si prefieren React-hook-form aca les dejo el link

https://react-hook-form.com/get-started#ReactNative

Es impresionante como esta saga de cursos me han hecho agarrarle mucho cariño a usar componentes de Clase de React. (SI, COMPONENTES DE CLASE). Como tambien evitar la instalación de paquetes como Lodash, Formik y Yup y hasta de usar Async/Await. Listeralmente todo se puede manejar con estados, promesas y lógica muy simple.

Cuando varias opciones de los elementos se repiten, estas pueden definirse como variables de objeto general. Por ejemplo, los inputs pueden definirse de la siguiente manera:

const generalInputOptions = {
    placeholderTextColor: '#fff',
    style: { ...styles.inputs, backgroundColor: globalStyles.colors.grey200 },
    autoCapitalize: "none"
  };

<TextInput
        {...generalInputOptions}
        placeholder="Username (user)"
        value={formik.values.username}
        onChangeText={(text) => formik.setFieldValue('username', text)}
      />
      <TextInput
        {...generalInputOptions}
        placeholder="Password (123456)"
        secureTextEntry={true}
        value={formik.values.password}
        onChangeText={(text) => formik.setFieldValue('password', text)}
      />

Comando para instalar Formik y Yup:

yarn add formik yup

para los amantes de la optimizacion:
Lo más optimizado es React hook forms porque Formik se renderiza mucho.

exelente