Crea una cuenta o inicia sesión

¬°Contin√ļa aprendiendo sin ning√ļn costo! √önete y comienza a potenciar tu carrera

Implementando Formik y Yup

4/21
Recursos

Aportes 11

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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

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

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

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

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

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

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

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

exelente