React Native Navigation: Handling 'NAVIGATE' Action Error with 'Home' Screen Not Handled by Any Navigator

Question

my issue in my React Native project is that in my login.jsx component, when the user clicks on the Login button, I encounter the following error: > ERROR The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a screen named 'Home'?

I've checked my login component thoroughly, and everything seems correct inside it. The problem seems to be either in the App.js file or the Home.jsx component. However, I can't figure out how to resolve this error.

Even when I'm in the Home.jsx component and click on the LogOut button, I still encounter this error, but it mentions {"name":"Login"}.

In App.js:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StatusBar, StyleSheet, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useEffect, useState } from 'react';
import Login from './screens/Login&Register/Login';
import Home from './screens/Home/Home';

const HomeNav = () => {
    const Stack = createNativeStackNavigator();
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
    );
};
const LoginNav = () => {
    const Stack = createNativeStackNavigator();
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
    );
};

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    async function getData() {
        const data = await AsyncStorage.getItem('isLoggedIn');
        console.log(data, 'at app.js');
        setIsLoggedIn(data);
    }
    useEffect(() => {
        getData();
        setTimeout(() => {
        }, 900);
    }, [isLoggedIn]);

    return (
        <View style={styles.container}>
            <StatusBar hidden={true} />
            <NavigationContainer>
                {isLoggedIn ? <HomeNav /> : <LoginNav />}
            </NavigationContainer>
        </View>
    );
}

And this is my Home.jsx codes:

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

function Home() {
    const navigation = useNavigation();

    function logOut() {
        AsyncStorage.setItem('isLoggedIn', '');
        AsyncStorage.setItem('token', '');
        navigation.navigate('Login');
    }

    return (
        <ScrollView>
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
            >
                <Text>Welcome to Home</Text>
                <Button title="Logout" onPress={() => logOut()} />
            </View>
        </ScrollView>
    );
}

export default Home;

Please help me, I have been trying to solve this problem for 5 days.

Answer 1

You cant navigate here because both home and login navigator are not mounted all time. You can have only one navigator in your app according to the codebase you have written.

for this you need to update the state to change the navigator conditionally such as isLoggedIn state.

For this you can introduce redux or context api to accomplish this requirement.

Find the official documentations for both as below:

1. Redux ToolKit

2. React Context API