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

Question

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.

Answer 1

You can set the initial route in the MyStack navigator to the Home screen with the initialRouteName prop:

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

Then, in the HomeStack component, you can navigate to the Tabs screen within the Home component:

    const HomeStack = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Tabs"
        onPress={() => navigation.navigate("Tabs")}
      />
    </View>
  );
};

This way, the Home component will be the initial route and when the user clicks the "Go to Tabs" button, the Tabs screen with the Tab.Navigator will be displayed.

Answer 2

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.