I've a react-native app build with expo, the signin page works fine, however, when user attemp to signin and the app change the screen to the maintabbar, the app thors these errors:
1 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
2 - Invariant Violation: View config getter callback for component circle must be a function (received undefined). Make sure to start component names with a capital letter.
3 - Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.
4 - Invariant Violation: View config getter callback for component polyline must be a function (received undefined). Make sure to start component names with a capital letter.
this is the signin page:
import React, { useEffect, useState } from 'react';import { useNavigation } from '@react-navigation/native';import { Image, ActivityIndicator, TextInput } from 'react-native';import { useForm } from 'react-hook-form';import * as Yup from 'yup';import { useUserAuth } from '../../../hooks/useUserAuth';import { ISession } from './SigIn.types';import { Container, InputArea, CustomButton, CustomButtonText, SignMessageButton, SignMessageButtonText, SignMessageButtonTextBold, InputSecondArea, styles,} from './SigIn.styled';export const SignIn: React.FC = () => { const navigation = useNavigation(); const { singIn } = useUserAuth(); const { register, setValue, handleSubmit, watch } = useForm(); const email = watch('email', ''); const password = watch('password', ''); const [loading, setLoading] = useState(false); const handleMessageButtonClick = () => { navigation.reset({ routes: [{ name: 'SignUp' }], }); }; const onSubmit = async (data: ISession) => { setLoading(true); try { const sessionSchema = Yup.object().shape({ email: Yup.string().required(), password: Yup.string().required(), }); await sessionSchema.validate(data); const session: ISession = { email: data.email, password: data.password, }; const response = await singIn(session); if (response !== 201) throw response; navigation.reset({ routes: [{ name: 'MainTabBar' }], }); } catch (errStatus) { switch (errStatus) { case 400: alert('Dados Incorretos'); break; case 401: alert('Nao autenticado'); break; case 500: alert('Erro no servidor'); break; } } setLoading(false); }; useEffect(() => { register('email'); register('password'); }, [register]); return (<Container><Image style={styles.imagestyle} source={require('../../../../assets/icons/logo.svg')} /><InputArea><TextInput placeholder='Email ou usuario' value={email} onChangeText={(t) => setValue('email', t)} /><TextInput placeholder='Senha' value={password} onChangeText={(t) => setValue('password', t)} secureTextEntry={true} /><CustomButton onPress={handleSubmit(onSubmit)}> {loading ? (<ActivityIndicator color='white' /> ) : (<CustomButtonText>Entrar</CustomButtonText> )}</CustomButton></InputArea><InputSecondArea><SignMessageButton onPress={handleMessageButtonClick}><SignMessageButtonText> {''} Ainda não é cadastrado?</SignMessageButtonText><SignMessageButtonTextBold>CADASTRAR</SignMessageButtonTextBold></SignMessageButton></InputSecondArea></Container> );};and this is the MainTabBar component:
import React from 'react';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { CustomTabBar } from '../../components/CustomTabBar/CustomTabBar';import { Home } from '../../screens/Home/Home';import { SearchAnimal } from '../../screens/Animal/SearchAnimal/SearchAnimal';import { Dashboard } from '../../screens/Dashboard/Dashboard';import { Config } from '../../screens/Config/Config';const TabBar = createBottomTabNavigator();export const MainTabBar: React.FC = () => (<TabBar.Navigator tabBar={(props) => <CustomTabBar {...props} />}><TabBar.Screen name='Home' component={Home} /><TabBar.Screen name='Search' component={SearchAnimal} /><TabBar.Screen name='List' component={Dashboard} /><TabBar.Screen name='Config' component={Config} /></TabBar.Navigator>);