Error: "Couldn't find a navigation object. Is your component inside NavigationContainer?" with useNavigation in React Native

Question

am trying to create somethin like a loging screen . but if the user has an active token . they dont have to re authenticate.

``

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import AuthManager from './components/AuthManager';
import SignUpScreen from './components/SignUpScreen';
import LoginScreen from './components/LoginScreen';
import ForgotPasswordScreen from './components/ForgotPasswordScreen';
import HomeNavigator from './components/HomeNavigator'

const Stack = createStackNavigator();

const Navigation = () => {
  const navigation = useNavigation();
  
    useEffect(() => {
    checkAuthentication(navigation); 
  }, []);

  const checkAuthentication = async (navigation) => {
    try {
      const hasToken = await AuthManager.isServiceTokenAvailable();

      console.log(hasToken);

      if (hasToken) {

        navigation.reset({
          index: 0,
          routes: [{ name: 'HomeNavigator' }],
        });
        
      }
    } catch (error) {
      console.log('Error checking authentication:', error);
    }
  };

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          headerBackground: {} 
          }} >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="HomeNavigator" component={HomeNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

` I'm encountering an error while using the useNavigation hook from @react-navigation/native in a React Native application. I have a component wrapped in a NavigationContainer, and I'm trying to use the useNavigation hook to navigate within a function. However, I'm receiving the error message "Couldn't find a navigation object. Is your component inside NavigationContainer?" when the function r

Answer 1

Your return statement has a NavigationContainer. But you say the component is wrapped in a NavigationContainer. Are you aware that this is not the same thing? To be able to use useNavigation() your Navigation component needs to be wrapped in navigationContainer. So wherever it is used, presumably App.ts, you should wrap it in a NavigationContainer:

const App = () => {
  return (
      <NavigationContainer> 
        <Navigation />
      </NavigationContainer>
  );
};
export default App;

Have you done this? It then probably won't make sense to also have a navigationContainer here. Unless you want to use nested navigation. But I don't think that you should need to do that.