Cursos Empresas Blog Live Conf Eventos Precios

0:0013:00

Implementando Formik y Yup

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 4 / 21

Ver clases

Implementando Formik y Yup

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 4 de 21

Clase 4 / 21

Implementando Formik y Yup

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 4 / 21

Ver clases

Paúl Terán

Hace 5 años

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

Comentarios (17)17 comentarios

Luis Alfredo Quispe Villca

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

José Padrón

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

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

Hace 4 años

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ú

Gilberto Santamaria

Hace 2 años

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

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

José Fabián Beltrán Meza

Hace 3 años

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

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

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

Migrant Cyborg

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

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!

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

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

Comando para instalar Formik y Yup:

yarn add formik yup

JULIAN DANIEL FRANCO ALVARADO

Hace un año

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

David Rangel

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

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

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

Moises Abel Avila Garcia

exelente

Implementando Formik y Yup

Implementando Formik y Yup

Implementando Formik y Yup

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Implementando Formik y Yup

Implementando Formik y Yup

Comentarios

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

Comentarios

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