Implementando Formik y Yup

Curso de React Native: Formularios, Almacenamiento y Deploy

Contenido del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:00

Implementando Formik y Yup

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 4 de 21

Clase 4 / 21

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

José Padrón

Luis Alejandro Nieto Ruth

Germán Edgardo Göhringer

Hace 4 años

Gustavo Pú

Gilberto Santamaria

Hace 2 años

Isco Martínez

José Fabián Beltrán Meza

Hace 3 años

Kevin Parra Lopez

Migrant Cyborg

Misael Valdez

Alejandro Mejia Escobar

Ivan Gonzalez Gonzalez

JULIAN DANIEL FRANCO ALVARADO

Hace un año

David Rangel

Daniel Ochoa

José Luis Caicedo Lara

Moises Abel Avila Garcia

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?

Implementando Formik y Yup

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy