Iniciando sesión

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:005:35

Iniciando sesión

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 5 de 21

Clase 5 / 21

Gustavo Pú

Hace 4 años

import React, { useState } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
  Keyboard,
} from "react-native";
import { useFormik } from "formik";
import * as Yup from "yup";
import { user, userDetails } from "../../utils/userDB";

export default function LoginForm() {
  const [error, setError] = useState("");

  const formik = useFormik({
    initialValues: initialValues(),
    validationSchema: Yup.object(validationSchema()),
    validateOnChange: false,
    onSubmit: (formValue) => {
      setError("");
      const { username, password } = formValue;

      if (username !== user.username || password !== user.password) {
        setError("El usuario o la contraseña no son correcto");
      } else {
        console.log("Login correcto");
        console.log(userDetails);
      }
    },
  });

  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>

      <Text style={styles.error}>{error}</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,
  },
});

Comentarios (12)12 comentarios

Diego Delgado

Sabino Fernández

Neyen Aponte

Kevin Parra Lopez

Nicolás Posa

Hace 5 años

Jorge Arteaga

wilson mantilla

Eliezer Mas Y Rubi

Nick Paz

Daniel Rodriguez Davila

David Rangel

Hace un año

Jhonatan Jose Ramirez Leal

Andres Roberto Coello Goyes

Sergio Tulio Cota Bravo

Hace 2 años

Deiver Mata

Hace 3 años

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?

Iniciando sesión

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy