Iniciando sesión

Clase 5 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Diego Delgado

student•

Otra forma de presentar el error de forma elegante es usando ToastAndroid

ToastAndroid.show('El usuario o contraseña son incorrectos', ToastAndroid.SHORT);

El cual enseña la conocida burbujita de texto flotante que desaparece al poco tiempo.

Sabino Fernández

student•

Gracias por este dato!

Neyen Aponte

student•

Muchas gracias por el dato

Kevin Parra Lopez

student•

Asi va mi form 😎

Nicolás Posa

student•

Puse las alertas en un línea

<Text style={styles.error}>{formik.errors.username}{"\n"}{error}{"\n"}{formik.errors.password}</Text>

Jorge Arteaga

student•

Muchas gracias

wilson mantilla

student•

Buenas tardes, hubiera sido bueno que el ejemplo del login hubiera sido con APi , hubiera dado mejor orientacion que usando un userBD.js de ejemplo.

Eliezer Mas Y Rubi

student•

si fuera con una API, en la función de onSubmit debes hacer el llamado y enviar los datos, la respuesta te devolverá si los datos ingresados son correctos o no. esa seria al validación, el resto quedaría igual.

Diego Delgado

student•

Hasta donde puedo entender, react-native solo te permite elaborar el front end para la aplicación móvil, por llamarlo de alguna forma. Para realizar acciones por el lado de servidor, te tocaría usar otra herramienta como express.js

Nick Paz

student•

Si les molesta que el error que indica que las credenciales son incorrectas aparezca muy abajo, es porque los Text de errores de user y password se renderizan siempre tengan texto o no.

Agregandole un simple if para controlar si existe el error para renderizar el <Text>

{formik.errors.username? <Text style={styles.error} > {formik.errors.username} </Text> : ""}
      {formik.errors.password? <Text style={styles.error} > {formik.errors.password} </Text> : ""}
      {error? <Text style={styles.error} > {error}  </Text> : ""}

Gustavo Pú

student•

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