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
Ok, so I wasn't able to use form in react-native, so I used Formik package and it worked.
Change
Log_in
toLogIn
.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.