Implementando Formik y Yup

Clase 4 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Luis Alfredo Quispe Villca

student•

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

Paúl Terán

student•

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
  }
}

José Padrón

student•

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.

Luis Alejandro Nieto Ruth

student•

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

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

Germán Edgardo Göhringer

student•

El problema de eso, en este caso, es que quedaría lo siguiente:

initialValues: initialValues,

No queda muy claro de donde vienen la información. Creo que por eso el profe lo hizo con una función, para que haya diferencia.

Gustavo Pú

student•

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,
  },
});

Gilberto Santamaria

student•

A mi personalmente me gusta usar más react-hook-form que se puede usar tanto en web como en mobile y siento la documentación más completa, te dejo el recurso por si te interesa :

React Hook Form - performant, flexible and extensible form library (react-hook-form.com)

Isco Martínez

student•

¿Como obtengo datos de input anterior?, probé con formik.getFieldProps(), pero los valores lo tiene undefined

José Fabián Beltrán Meza

student•

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:

Kevin Parra Lopez

student•

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

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

Migrant Cyborg

student•

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.

Misael Valdez

student•

Me parece genial que le quieras a las clases, pero también me da la impresión de que te queres quedar con lo viejo. Justamente para simplificar muchas cosas se crearon las "function components" y lo de las librerías es simplemente como reinventar la rueda. Para que reinventarla si ya existen librerías que lo hacen super bien!

Germán Edgardo Göhringer

student•

Opino lo mismo que @Misael. O sea, todo bien con querer hacer las cosas de otra forma, pero la realidad es que eso ya no se hace así. Los "class components" ya fueron reemplazados. Y sobre las librerías, si hay algo que ya está creado y probado, ¿para qué volver a crearlo?

Alejandro Mejia Escobar

student•

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)}
      />

Ivan Gonzalez Gonzalez

student•

Comando para instalar Formik y Yup:

yarn add formik yup

JULIAN DANIEL FRANCO ALVARADO

student•

Otra alternativa mas light es react hook form es muy extensible si usas mucho los hooks en react, tambien sirve para react.

David Rangel

student•

Les comparto mi repo, la diferencia es que en el uso react use form en lugar de formik y zod en lugar de yup:

Daniel Ochoa

student•

Para las personas que estan iniciando, les recomiendo usar estados y crear sus propias validaciones, en el entorno profesional a veces no permiten el uso de estos paquetes sea por cuestiones de seguridad u otros, por lo que es mejor usar lo propio.

José Luis Caicedo Lara

student•

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

Moises Abel Avila Garcia

student•

exelente

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')}
          />

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
  }
}

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,
  },
});

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)}
      />

Implementando Formik y Yup

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?