javascriptreactjsreact-nativereact-navigation-stackreact-navigation-bottom-tab

React Navigation Nested Tab.Navigator - Show InitialRoute not in Tabs


Using React-Navigation in my app, I want the initialRoute to be the "Home" component with the BottomTabNavigator shown. But I do not want Home to be one of the tabs. Adding initialRouteName="Home" shows Home as the initial route but does not show the tabs. Without initialRoute I get the tabs but not the Home Screen as the initial.

I have a nested React Navigation set up like this:

const MyTabs = () =>{
  return (
    <Tab.Navigator>
      <Tab.Screen name="About" component={AboutStack} />
      <Tab.Screen name="Setting" component={SettingStack} />
    </Tab.Navigator>
  );
}

const MyStack = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Tabs" component={MyTabs} />
      <Stack.Screen name="Home" component={HomeStack} />    
    </Stack.Navigator>
  );
}

This seems like it should be relatively simple to implement, but I've searched far and wide for another similar question and I've tried a number of different nesting setups to no avail.

Running: "@react-navigation/stack": "^6.0.7", or "latest"

Here is a snack of the full test code: https://snack.expo.dev/@dezpo/nestednavigator_homepage_notintab

Any help greatly appreciated.


Solution

  • Actually I got this sorted... couldn't have been easier

    tabBarItemStyle: { display: "none" }
    

    🤦‍♂️

    so my final navigators looked like this with "Home" as one of my BottomTabs

    const MyTabs = () =>{
      return (
        <Tab.Navigator >
          <Tab.Screen name="Home" component={HomeStack} 
            options={{
              tabBarItemStyle: { display: "none" },
            }}/>
          <Tab.Screen name="About" component={AboutStack} />
          <Tab.Screen name="Setting" component={SettingStack} />
        </Tab.Navigator>
      );
    }
    
    const MyStack = () => {
      return (
        <Stack.Navigator initialRouteName="Home" 
          screenOptions={{
            headerShown: false
          }}>
          <Stack.Screen name="Tabs" component={MyTabs} />
        </Stack.Navigator>
      );
    }
    

    Updated Snack

    Seems like there is probably a better solution out there but this does the trick for now.