Yup Validation not working in Android

React Native
1

Hi,

i am following react native tutorial step by step is is going good but i stuck in validation formik with yup validation, i sent every function which is required for validation but when i am checking in mobile nothing happening even not any error is showing can anyone please assist me about his i already spend to much time but i not fixed yet my code is below.

import React from "react";

import { TextInput, Image, StyleSheet } from “react-native”;
import { Formik } from “formik”;
import * as Yup from “yup”;

import AppButton from “…/components/AppButton”;
import AppTextInput from “…/components/AppTextInput”;

import Screen from “…/components/screen”;
import AppText from “…/components/AppText”;
import ErrorMessage from “…/components/ErrorMessage”;

const validationScheme = Yup.object().shape({
email: Yup.string()
.email(“Please enter valid email”)
.required(“Email is required”)
.label(“Email”),
password: Yup.string()
.required(“Password is required”)
.min(4)
.label(“Password”),
});

function LoginScreen(props) {
return (

<Image style={styles.logo} source={require("…/assets/logo-red.png")} />
<Formik
initialValues={{ email: “”, password: “” }}
onSubmit={(values) => console.log(values)}
validationSchema={validationScheme}
>
{({
handleChange,
handleSubmit,
values,
errors,
setFieldTouched,
touched,
}) => (
<>
<AppTextInput
autoCapitalize=“none”
autoCorrect={false}
icon=“email”
keyboardType=“email-address”
onBlur={() => setFieldTouched(“email”)}
onChangeText={handleChange(“email”)}
placeholder=“Email”
textContentType=“emailAddress”
/>
{touched.email && }
<AppText style={{ color: “red” }}>{errors.email}

        <AppTextInput
          autoCapitalize="none"
          autoCorrect={false}
          icon="lock"
          onBlur={() => setFieldTouched("password")}
          onChangeText={handleChange("password")}
          placeholder="Password"
          secureTextEntry
          textContentType="password"
        />
        <AppText style={{ color: "red" }}>{errors.password}</AppText>
        <ErrorMessage error={errors.password} visible={touched.password} />
        <AppButton title="Login" onPress={handleSubmit} />
      </>
    )}
  </Formik>
</Screen>

);
}

const styles = StyleSheet.create({
container: {
padding: 10,
},
logo: {
width: 80,
height: 80,
alignSelf: “center”,
marginTop: 50,
marginBottom: 20,
},
});

export default LoginScreen;

2

There have been several posts about YUP Validation not working correctly for that video topic. Is there any solution to this error because I just ran into this error by reaching the YUP Validation topic on the React Native course. @Mosh

3

For everyone who wants the answer to this. You must change "onChange attribute in the AppTextInput to onChangeText.

Example:

<AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="email"
              keyboardType="email-address"
              onChangeText={handleChange("email")}
              placeholder="Email"
              textContentType="emailAddress"
            />
1 Like