skip to Main Content

I’m receiving this error after trying to create a form in react:

Invariant Violation: View config getter callback for component must be a function (received undefined). Make sure to start component names with a capital letter.

This is code:

import React from "react";
import {Image, ImageBackground, TouchableOpacity, View, ScrollView, Text, StyleSheet, Alert} from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import styled from "styled-components";
import {useForm} from "react-hook-form"
import { accountStatus, fetchAccount } from "../redux/slices/account";

export default function Log_in({navigation}){
    navigation = useNavigation()
    const isAuth = useSelector(accountStatus)
    dispatch = useDispatch()
    const {register, handleSubmit, setError, formState: {errors, isValid}} = useForm({
        defaultValues:{
            email: '',
            password: ''
        },
        mode: "onChange"
    })

    const onSubmit = (values) => {
        dispatch(fetchAccount(values))
    }

    if(isAuth)
    {
        navigation.navigate("LogedIn")
    }

    return(
        <form onSubmit={handleSubmit(onSubmit)}>
        <Center>
            <Log_Text>Войдите в аккаунт</Log_Text>
            <Input type="text" placeholder="Введите e-mail" {...register('email', {required: "Укажите почту"})}/>
            <Input type="text" placeholder="Введите пароль" {...register('password', {required: "Укажите пароль"})}/>
            <TouchableOpacity type="submit">
                            <ImageBackground source={require('../assets/img-profile/place_an_order_2.png')}
                                             imageStyle={{borderRadius: 10}}
                                             style={{marginTop: 14, width: "auto", height: 40}}>
                                <Text style={{
                                    color: '#fff',
                                    fontSize: 18,
                                    fontWeight: '600',
                                    textAlign: 'center',
                                    marginTop: 6
                                }}> Войти </Text>
                            </ImageBackground>
                        </TouchableOpacity>
        </Center>
        </form>
    );

}
const Input = styled.TextInput`
  margin: 10px 20px 0 20px;
  padding: 6px 0 6px 14px;
  width: 300px;
  color: #000000;
  border-width: 1.5px;
  border-radius: 15px;
  border-color:#B6D3FF;
  background-color: #fff
`;

const Center = styled.View`
    margin-left: auto;
    margin-right: auto;
   
    margin-top:80%;
`;

const Log_Text = styled.Text`
    font-size: 20px;
    font-weight: 600;
`;

I’ve tried some solutions found on the internet, but they didn’t work. When I remove form from code, everything works. Then I’ve tried to remove everything in form, including onSubmit param, I receive error anyways.

2

Answers


  1. Chosen as BEST ANSWER

    Ok, so I wasn't able to use form in react-native, so I used Formik package and it worked.


  2. Change Log_in to LogIn.

    Function component names should follow PascalCase convention.

    React Native does not have a native <form> element, so you should look to a different approach for handling forms.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search