2

I have a <Tab.Navigator> and it has four <Tab.Screen> elements. What i try to do is, to press a button inside a specific <Tab.Screen> and open an another screen on top of it. But i don't want this another screen to have a <Tab.Screen> navigator in the <Tab.Navigator> bar.

I thought maybe there's an option to hide, make invisible a <Tab.Screen> but i couldn't find any documentation about it.

Is it possible to achieve this ?

caliskanata
  • 488
  • 1
  • 2
  • 14
  • 1
    You could use a [stackNavigator](https://reactnavigation.org/docs/nesting-navigators) as a TabScreen and have multiple screens within a single tab. If you want to hide the tab bar on a particular screen, then follow this [guide](https://reactnavigation.org/docs/hiding-tabbar-in-screens) – sushrut619 Jul 21 '22 at 15:57

3 Answers3

1

According the official doc. You can reorganize your navigation and put the bottom tabs navigator inside the stack navigator like this

function HomeTabs() {
  return (
    <Tab.Navigator>    // Here you can also navigate to both Profile and Settings
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />  // Here you won't have any tabs
      <Stack.Screen name="Settings" component={Settings} />   // Here neither
    </Stack.Navigator>
  );
}
J.dev
  • 844
  • 3
  • 12
  • 22
0

You have to nest navigators with the stack navigator as the outer navigator and the tab navigator as the inner navigator:

https://reactnavigation.org/docs/nesting-navigators

Sallem Ahmed
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 23 '22 at 09:49
0

You have to reorganize your navigation structure , as documentation describe https://reactnavigation.org/docs/hiding-tabbar-in-screens

Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.

But if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:

function HomeTabs() {   
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>   
  ); 
}
function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

After re-organizing the navigation structure, now if we navigate to the Profile or Settings screens, the tab bar won't be visible over the screen anymore.

Timcu Alexei
  • 121
  • 5