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.

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.

Puse las alertas en un línea

<Text style={styles.error}>{formik.errors.username}{"\n"}{error}{"\n"}{formik.errors.password}</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

Asi va mi form 😎

muy bien explic|a||d|o

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> : ""}