TabNav disappears when using StackNav within it in React Native-CodePudding

function TabNav() {
    return (
        <Tab.Navigator
            initialRouteName='home'
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color }) => screenOptions(route, color),

                tabBarActiveTintColor: '#1579ac',
                tabBarInactiveTintColor: '#000',
                tabBarShowLabel: false,
                tabBarStyle: [
                    {
                        display: 'flex',
                    },
                    null,
                ],
            })}
        >
            <Tab.Screen name='home' component={Main} options={{ headerShown: false }} />
            <Tab.Screen name='camera' component={Camera} options={{ headerShown: false }} />
            <Tab.Screen name='base' component={Base} options={{ headerShown: false }} />
            <Tab.Screen name='settings' component={Settings} options={{ headerShown: false }} />
        </Tab.Navigator>
    );
}

const RootNavigator = () => {
    return (
        <NavigationContainer>
            <Stack.Group initialRouteName='TabNav'>
                <Stack.Screen name='TabNav' component={TabNav} options={{ headerShown: false }} />
                <Stack.Screen name='Apparaten' component={Apparaten} options={{ headerShown: true }} />
                <Stack.Screen name='Automation' component={Automation} options={{ headerShown: true }} />
                <Stack.Screen name='News' component={News} options={{ headerShown: true }} />
                <Stack.Screen name='Logout' component={Logout} options={{ headerShown: true }} />
                <Stack.Screen name='Users' component={Users} options={{ headerShown: true }} />
                <Stack.Screen name='EditApparaat' component={EditApparaat} options={{ headerShown: true }} />
            </Stack.Group>
        </NavigationContainer>
    );
};
export default RootNavigator;

Whenever I swap Stack.screen the Bottom nav disappears. I know it is because the stack.screen that contains TabNav gets deactivated, but how can I go about fixing this issue? Any help would be appreciated.

CodePudding user response：

If you want to have the Tabbar visible all the time, you need to organize your navigation structure the other way around. Each Tab contains a Stack (or a single screen) and the Tab.Navigator is the root navigator in your navigation container.

What is left for you to decide is which screen in your current Stack.Group is contained in which tab.

For the sake of simplicity, I have moved all the screen in a stack called Main which is the first Tab in your tab navigator. The workflow is the same for all tabs.

const Stack = createStackNavigator()

export const Main = () => {
    return (
         <Stack.Navigator>
                <Stack.Screen name='Apparaten' component={Apparaten} options={{ headerShown: true }} />
                <Stack.Screen name='Automation' component={Automation} options={{ headerShown: true }} />
                <Stack.Screen name='News' component={News} options={{ headerShown: true }} />
                <Stack.Screen name='Logout' component={Logout} options={{ headerShown: true }} />
                <Stack.Screen name='Users' component={Users} options={{ headerShown: true }} />
                <Stack.Screen name='EditApparaat' component={EditApparaat} options={{ headerShown: true }} />
            </Stack.Navigator>
    );
}

const Tab = createBottomTabNavigator()

export const RootNavigator = () => {
    return (
            <Tab.Navigator
            initialRouteName='home'
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color }) => screenOptions(route, color),

                tabBarActiveTintColor: '#1579ac',
                tabBarInactiveTintColor: '#000',
                tabBarShowLabel: false,
                tabBarStyle: [
                    {
                        display: 'flex',
                    },
                    null,
                ],
            })}
        >
            <Tab.Screen name='home' component={Main} options={{ headerShown: false }} />
            <Tab.Screen name='camera' component={Camera} options={{ headerShown: false }} />
            <Tab.Screen name='base' component={Base} options={{ headerShown: false }} />
            <Tab.Screen name='settings' component={Settings} options={{ headerShown: false }} />
        </Tab.Navigator>
    );
};

const App = () => {

   return <NavigationContainer>
         <RootNavigator />
     </NavigationContainer>
}

export default App;