CODEWITHSUNDEEP
react-nativereact-navigation
eaidy
eaidy

Reputation: 600

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

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 ?

Upvotes: 2

Views: 5906

Answers (3)

Timcu Alexei
Timcu Alexei

Reputation: 290

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.

Upvotes: 0

J.dev
J.dev

Reputation: 1045

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>
  );
}

Upvotes: 2

Sallem Ahmed
Sallem Ahmed

Reputation: 1

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

Upvotes: 0

Related Questions