How to solve error in ReactNative react-navigation?

Question

I keep on having this error message especially when I am applying the hooks the conditions for session management.

Couldn't find a navigation object. Is your component inside a screen in a navigator?

Can you help me with this?

Here is my code. I don't know where did I go wrong on this.

Navigation.jsx

const Navigation = () => {
  const { user, isLoading } = useHook();
        if (isLoading) {
        return <SplashScreen />;
    }
    return (
        <>
        <StatusBar barStyle="default" />
            <Stack.Navigator>
                {user ? (
                    <>
            <Stack.Screen name={routes.Deliveries} 
            options={{
              headerShown: false,
            }}>
              {() => <MainTab />}
            </Stack.Screen>
                </>
                ) : (
                <>
                    <Stack.Screen name={routes.Login} component={LoginScreen} 
          options={{
            headerShown: false,
          }}/>
          </>
                )}
            </Stack.Navigator>
        </>
    );
}

export default Navigation;

App.js

import React, { createContext } from 'react';
import { StyleSheet, SafeAreaView, } from 'react-native';
import { ThemeProvider } from 'styled-components';
import theme from 'utils/ThemeStyle';
import Navigation from './src/components/navigation';
import { NavigationContainer } from '@react-navigation/native';
import GlobalHook from './src/globalHooks';

export const GlobalContext = createContext({});


export default function App() {
    const globalData = GlobalHook();
    return (
        <SafeAreaView style={styles.container}>
            <NavigationContainer>
                <GlobalContext.Provider value={globalData}>
                    <ThemeProvider theme={theme}>
                        <Navigation />
                    </ThemeProvider>
                </GlobalContext.Provider>
            </NavigationContainer>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

The error starts right after I declare my hooks objects.

Answer 1

Try to wrap your your app with NavigationContainer like that

import { NavigationContainer } from '@react-navigation/native';
const Navigation = () => {
  const { user, isLoading } = useHook();
        if (isLoading) {
        return <SplashScreen />;
    }
    return (
        <>
        <StatusBar barStyle="default" />
          <NavigationContainer>
            <Stack.Navigator>
                {user ? (
                    <>
            <Stack.Screen name={routes.Deliveries} 
            options={{
              headerShown: false,
            }}>
              {() => <MainTab />}
            </Stack.Screen>
                </>
                ) : (
                <>
                    <Stack.Screen name={routes.Login} component={LoginScreen} 
          options={{
            headerShown: false,
          }}/>
          </>
                )}
            </Stack.Navigator>
           </NavigationContainer>
        </>
    );
}

export default Navigation;

if it is not installed

yarn add @react-navigation/native