Reac Native + React Navigation - I want screen not to be visible on TabNavigator

Question

I created a TabNavigator for my App but I want there just 5 of my screens. The rest I want to navigate to but not through the Tab (inside those I don't want the Tab to be visible as well). Here's my Router for now:

export default TabNavigator(
  {
    Dashboard: {
      screen: DashboardContainer,
    },
    NotificationContainer: {
      screen: NotificationContainer,
    },
    Movements: {
      screen: MovementsContainer,
    },
    TopOwners: {
      screen: TopOwnersContainer,
    },
    Menu: {
      screen: MenuContainer,
    },
  },
)

And I import in in main index.js:

const App = () => (
  <Root>
    <Provider store={store}>
      <TabNavigator />
    </Provider>
  </Root>
);

What can I do to have in my navigator screen6, screen7, screen8 and navigate to them but not show them on TabNavigator?

Answer 1

You can use nested navigators :

const Screen1Router StackNavigator( // you can use a SwitchNavigator instead
  {
      Screen1: { screen: Screen1 },
      Screen6: { screen: Screen6 },
      Screen7: { screen: Screen7 },
  }
)

export default TabNavigator(
  {
    Screen1: {
      screen: Screen1Router,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
    Screen4: {
      screen: Screen4,
    },
    Screen5: {
      screen: Screen5,
    },
  }
);

in this example 5 tabs will be displayed, and you'll be able to navigate to Screen6 and Screen7 from the first tab.

Edit:

If you don't want to see the tabs in Screen6 and Screen7 you have to nest the tabNavigator in the StackNavigator :

const tabNav = TabNavigator(
  {
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
    Screen4: {
      screen: Screen4,
    },
    Screen5: {
      screen: Screen5,
    },
  }
);

export default StackNavigator( // you can use a SwitchNavigator instead
  {
      Screen1: { screen: tabNav },
      Screen6: { screen: Screen6 },
      Screen7: { screen: Screen7 },
  }
)