Search code examples
typescriptreact-nativereact-navigationinstagram

React Navigation App Structure Tabbar visible

I have simple image that illustrates the issue

enter image description here

this is the app structure simplified. I have a tabbar navigator that has three screens A B C.

TabBar A is a stack navigator that includes D and E

I also have a Stack navigator that includes F and G

When I call F I want the TabBar to visible (on top). whats the best way to achieve that. because in this case if I go from A to D the tabbar will be on top but not if I go from A to F.

I dont want to put F on the same stack as A because F should be accessible from B and C, and the tabbar should be on top as well.

Perhaps a good example would be the instagram app where I can access the profile screen (F) from the different tabs screens and the tab is always on top

How can I achieve this with React-Navigation?

I hope I was quite clear, and thank you in advance.

Solution

  • Nothing prevents screens F and G to be added in every A, B and C stack. It is just configuration not code duplication.

    NavigationContainer
  Tab.Navigator
    A (Stack.Navigator)
      A (Screen)
      D (Screen)
      E (Screen)
      F (Screen)
      G (Screen)
    B (Stack.Navigator)
      B (Screen)
      F (Screen)
      G (Screen)
    B (Stack.Navigator)
      C (Screen)
      F (Screen)
      G (Screen)