Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Iniciando sesión

5/21
Recursos

Aportes 9

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

Puse las alertas en un línea

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

Asi va mi form 😎


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.

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

Saludos TinCode, no me baneen jajaj

variadores de velocidad sinamic

muy bien explic|a||d|o