In my app I have multiple screens that you get access to after you seccufuly login or sign up.Am getting an undefined is not an object error when using tryLocalSignin() which is a function I used to make sure that the user doesn't enter his login info each time by checking if they are stored in asyncstorage.how do I fix this problem and make navigation work properly
Here is the code used on the App.js file :
import React, { useEffect, useContext } from "react";import "react-native-gesture-handler";import { NavigationContainer } from "@react-navigation/native";import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";import AccountScreen from "./app/screens/AccountScreen";import SearchScreen from "./app/screens/SearchScreen";import SaveScreen from "./app/screens/SaveScreen";import { SimpleLineIcons } from "@expo/vector-icons";import { Feather } from "@expo/vector-icons";import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";import colors from "./app/config/colors";import { createStackNavigator } from "@react-navigation/stack";import { createSharedElementStackNavigator } from "react-navigation-shared-element";import MainScreen from "./app/screens/MainScreen";import DetailScreen from "./app/screens/DetailScreen";import Signin from "./app/screens/login/SigninScreen";import Signup from "./app/screens/login/SignupScreen";import { Provider as AuthProvider } from "./app/context/AuthContext";import { Context as AuthContext } from "./app/context/AuthContext";import { setNavigator } from "./app/navigationRef";const Tab = createMaterialBottomTabNavigator();const Stack = createSharedElementStackNavigator();const WelcomeStack = createStackNavigator();const MainStack = createStackNavigator();function Welcome() { return (<WelcomeStack.Navigator><WelcomeStack.screen name="SignIn" component={Signin} /><WelcomeStack.screen name="SignUp" component={Signup} /></WelcomeStack.Navigator> );}function MainTabScreen() { return (<Stack.Navigator initialRouteName="MainScreen" screenOptions={{ headerShown: false }}><Stack.Screen name="MainScreen" component={MainScreen} /><Stack.Screen name="DetailScreen" component={DetailScreen} options={(navigation) => ({ headerBackTitleVisible: false, cardStyleInterpolator: ({ current: { progress } }) => { return { cardStyle: { opacity: progress, }, }; }, })} sharedElements={(route) => { const { data } = route.params; return [ { id: `item.${data.id}.photo`, animation: "move", resize: "clip", align: "center-top", }, { id: `item.${data.id}.text`, animation: "fade", resize: "clip", align: "left-center", }, { id: `item.${data.id}.profilePic`, animation: "move", resize: "clip", align: "left-center", }, { id: `item.${data.id}.username`, animation: "fade", resize: "clip", align: "left-center", }, { id: `item.${data.id}.readtime`, animation: "fade", resize: "clip", align: "left-center", }, ]; }} /></Stack.Navigator> );}function TabNav() { return (<Tab.Navigator initialRouteName="MainTabScreen" activeColor={colors.shade1} style={{ backgroundColor: "tomato" }}><Tab.Screen name="Home" component={MainTabScreen} options={{ tabBarColor: "#292B34", tabBarIcon: ({ color }) => (<SimpleLineIcons name="home" size={24} color={colors.shade2} /> ), }} /><Tab.Screen name="SearchScreen" component={SearchScreen} options={{ tabBarLabel: "Search", tabBarColor: "#292B34", tabBarIcon: ({ color }) => (<Feather name="search" size={24} color={colors.shade2} /> ), }} /><Tab.Screen name="SaveScreen" component={SaveScreen} options={{ tabBarLabel: "Save", tabBarColor: "#292B34", tabBarIcon: ({ color }) => (<MaterialCommunityIcons name="bookmark" size={24} color={colors.shade2} /> ), }} /><Tab.Screen name="AccountScreen" component={AccountScreen} options={{ tabBarLabel: "Account", tabBarColor: "#292B34", tabBarIcon: ({ color }) => (<MaterialCommunityIcons name="account" size={24} color={colors.shade2} /> ), }} /></Tab.Navigator> );}function App() { const { tryLocalSignin } = useContext(AuthContext); const [isLoading, setIsLoading] = React.useState(false); useEffect(() => { setTimeout(() => { tryLocalSignin(); setIsLoading(!isLoading); }, 500); }, []); return (<AuthProvider><NavigationContainer><MainStack.Navigator ref={(navigator) => { setNavigator(navigator); }}> {isLoading ? (<MainStack.Screen name="Tab" component={TabNav} /> ) : (<MainStack.Screen name="WelcomeStack" component={Welcome} /> )}</MainStack.Navigator></NavigationContainer></AuthProvider> );}export default App;