Iniciando sesión

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.

Asi va mi form 😎

Puse las alertas en un línea

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

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

muy bien explic|a||d|o