Question 35457 in React native Question posted in
The official React Native documentation can be found here.

How to navigate to a screen which is not on the <Tab.Navigator> in React-Nativ? – React native

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 ?

Tags:

3

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search