CODEWITHSUNDEEP
react-nativeformiknative-baseyup
Carolina de Moraes
Carolina de Moraes

Reputation: 57

Formik validations not being shown on React Native app

I'm doing a project with Expo/React-Native that uses the Native-Base styling library. To validate forms I'm using Formik + Yup. So I have this login screen and the "onSubmit" method is only being called when the validation works, but when the validation fails it doesn't show the errors even though I have chosen to show them with the <FormControl.ErrorMessage> tag.

Here it is the relevant portion of my login screen

export default function LoginScreen(props) {

const { handleChange, handleSubmit, handleBlur, values, errors } = useFormik({
    initialValues: { username: "", password: "" },
    validationSchema: LoginSchema,
    onSubmit: (values) => {
      console.log(values);
    },
  });

  return (
    <SafeAreaView>
      <Center width="90%">
        <FormControl marginTop={10} marginBottom={5}>
          <FormControl.Label>Email ou nome de usuário</FormControl.Label>
          <Input
            type="text"
            onChangeText={handleChange("username")}
            onBlur={handleBlur("username")}
            value={values.username}
          />  
          <FormControl.ErrorMessage>{errors.username}</FormControl.ErrorMessage>
        </FormControl>

        <FormControl>
          <FormControl.Label>Senha</FormControl.Label>
          <Input
            type="password"
            onBlur={handleBlur("password")}
            onChangeText={handleChange("password")}
            secureTextEntry={true}
            value={values.password}
          />
          <FormControl.ErrorMessage>{errors.password}</FormControl.ErrorMessage>
        </FormControl>

        <Button marginTop={5} onPress={handleSubmit}>
          Login
        </Button>
      </Center>
    </SafeAreaView>
  );
}

And here it is the Yup validation schema

export const LoginSchema = Yup.object().shape({
  username: Yup.string().required("Este campo é obrigatório"),
  password: Yup.string()
    .max(20, "Senha muito longa")
    .required("Este campo é obrigatório"),
});

Upvotes: 0

Views: 1221

Answers (1)

Alberto Zaranza
Alberto Zaranza

Reputation: 306

Perhaps the error is in your <FormControl.ErrorMessage> component. I did a test with React Native components and its code worked perfectly:

import React from 'react';
import {View, Text, TextInput, Button} from 'react-native';
import {useFormik} from 'formik';
import * as Yup from 'yup';

const App = () => {
  const {handleChange, handleSubmit, values, errors} = useFormik({
    initialValues: {username: '', password: ''},
    validationSchema: Yup.object().shape({
      username: Yup.string().required('Este campo é obrigatório'),
      password: Yup.string()
        .max(20, 'Senha muito longa')
        .required('Este campo é obrigatório'),
    }),
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <View>
      <Text>Email</Text>
      <TextInput
        value={values.username}
        onChangeText={handleChange('username')}
      />
      <Text>{errors.username}</Text>
      <Text>Senha</Text>
      <TextInput
        value={values.password}
        onChangeText={handleChange('password')}
      />
      <Text>{errors.password}</Text>
      <Button onPress={handleSubmit} title="Submit" />
    </View>
  );
};

export default App;

Upvotes: 2

Related Questions