I use a BottomTabNavigator and a StackNavigator from react-navigation for my app.
Recently I had to update the version of react navigation from v4 to v6 and thus change the way of implementing my navigation Stack and BottomTab to match v6 implementation.

Of course it caused some errors. I’m stuck on this one :

ERROR  Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator.
The wrapped component is unable to get access to navigation from props or context.

I don’t remember using ‘withNavigation’ anywhere in my app that’s why I can’t figure the issue out cause I don’t know where to search…

To me, the issue come from StackNavigator because my BottomTabNavigator used to work well before updating my StackNavigator from v4 to v6

Navigation.js

    import React, { useState } from 'react';
    import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from '@react-navigation/stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    
    import ALLMYSCREENS from '../Components/';
    
    const Tab = createBottomTabNavigator();
    
    function bottomNavigator() {
        const [isTabBarVisible, setTabBarVisible] = useState(true);
    
        return (
            <Tab.Navigator
                key={isTabBarVisible}
                screenOptions={({ route, navigation }) => ({
                    tabBarIcon: ({ focused }) => {
                        let iconName;
                        let activeIcon = require('../Images/V2/menu/active.png');
    
                        if (route.name === 'Home') {
                            iconName = require('../Images/V2/menu/home.png');
                        } else if (route.name === 'History') {
                            iconName = require('../Images/V2/menu/history.png');
                        } else if (route.name === 'StartScan') {
                            iconName = require('../Images/V2/menu/camera-button.png');
                        } else if (route.name === 'DailyReport') {
                            iconName = require('../Images/V2/menu/diary.png');
                        } else if (route.name === 'ProfileHome') {
                            iconName = require('../Images/V2/menu/profile.png');
                        }
    
                        if (route.name === 'StartScan') {
                            return (
                                <TouchableOpacity onPress={() => navigation.navigate('StartScan')}>
                                    <Block style={styles.cameraButton}>
                                        <Image source={iconName} style={styles.cameraImage} />
                                    </Block>
                                </TouchableOpacity>
                            );
                        }
    
                        return (
                            <Block>
                                <Image source={iconName} style={styles.image} />
                                {focused && <Image source={activeIcon} style={styles.active} />}
                            </Block>
                        );
                    },
                    tabBarShowLabel: false,
                    tabBarStyle: isTabBarVisible ? styles.bottomNavigator : { display: 'none' },
                })}
            >
                <Tab.Screen name="Home" component={Home}
                    options={{ headerShown: false }} listeners={{ focus: () => setTabBarVisible(true) }}
                />
                <Tab.Screen name="History" component={History}
                    options={{ headerShown: false }} listeners={{ focus: () => setTabBarVisible(true) }}
                />
                <Tab.Screen name="StartScan" component={StartScan}
                    options={{ headerShown: false }} listeners={{ focus: () => setTabBarVisible(false) }}
                />
                <Tab.Screen name="DailyReport" component={DailyReport}
                    options={{ headerShown: false }} listeners={{ focus: () => setTabBarVisible(true) }}
                />
                <Tab.Screen name="ProfileHome" component={ProfileHome}
                    options={{ headerShown: false }} listeners={{ focus: () => setTabBarVisible(true) }}
                />
            </Tab.Navigator>
        );
    }

const Stack = createStackNavigator();

function StackNavigator() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Main" component={bottomNavigator}
                options={{
                    title: 'Main2',
                    headerShown: false
                }}
            />
            <Stack.Screen name="Home" component={Home}
                options={{
                    title: 'Home',
                    headerShown: false
                }}
            />
        ..MORE SCREENS
        </Stack.Navigator>
    );
}

export default (StackNavigator);

App.tsx

import React from 'react';

import StackNavigator from './Navigation/Navigation';
import { NavigationContainer } from '@react-navigation/native';
import { PersistGate } from 'redux-persist/es/integration/react';
import { Provider } from 'react-redux';
import Store from './Store/configureStore';
import { persistStore } from 'redux-persist';
import 'react-native-gesture-handler';
import Toast from 'react-native-toast-message';

// Note: import explicitly to use the types shipped with jest.
import { it } from '@jest/globals';

export default class App extends React.Component {
    constructor(props: any) {
        super(props);
    }
    render() {
        return (
            <Provider store={Store}>
                <PersistGate persistor={persistStore(Store)}>
                    <NavigationContainer>
                        <StackNavigator />
                    </NavigationContainer>
                </PersistGate>
                <Toast />
            </Provider>
        );
    }
}

I would appreciate some help!