Cursos Empresas Blog Live Conf Eventos Precios

0:005:35

Iniciando sesión

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 5 / 21

Ver clases

Iniciando sesión

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 5 de 21

Clase 5 / 21

Iniciando sesión

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 5 / 21

Ver clases

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

Hace 5 años

Sabino Fernández

Neyen Aponte

Kevin Parra Lopez

Nicolás Posa

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

Iniciando sesión

Iniciando sesión

Iniciando sesión

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Iniciando sesión

Iniciando sesión

Comentarios

Asi va mi form 😎

Comentarios

Asi va mi form 😎