1

I'm trying to create the following wireframe:

enter image description here

To do this, I've used several nested navigators:

enter image description here

A: Since the top header is always needed, I first created a stack navigator with a single screen.

B: This is a bottom tab navigator, with 3 screens. If someone taps the middle tab, you get a grid screen "C".

C: The grid screen is a stack navigator. If you touch option B (for example), you would see a new screen which is a top tab navigator.

D: This is that last top tab navigator.

My questions are:

  1. Is this the correct way to do things?
  2. When I reach screen D, I need the top header to display a back button, and also for that back button to "go back" on the navigator of screen C, and then disappear again. How can I achieve this?

Thanks!

Sandy
  • 2,572
  • 7
  • 40
  • 61

1 Answers1

0

Personally, I think you are going about this the wrong way. Since react-navigation doesn't include headers in the tabNavigator I would wrap your tabs in a stack.

From there, I would have 3 stackNavigators, one for each tab, that just contains the necessary screens.

Your middle tab's stackNavigator would just contain a main/initial container/component with 6 buttons, and each of the 6 container/components you could navigate to. Pressing each button would simply navigate to the appropriate container/component to show their content.

Likewise, I wouldn't do a tabNavigator for your top tab bar. I would just have a container/component with three buttons, or something like a segmented control, that selectively displays the correct container/component in the lower section of that screen. We do this in multiple places in our apps.

Hope this helps, and let me know if anything I put here doesn't make enough sense.

[EDIT] - removed incorrect header information.

Doug Watkins
  • 1,387
  • 12
  • 19
  • Hi Doug, thanks for your answer. I was under the impression that tab navigators don't have headers. Is this just that it isn't the default? The docs on the tab navigators don't mention the header. – Sandy Jul 08 '19 at 18:46
  • I think that you can use the same props to make a header show up on the tab navigator, but if not then wrapping the tab navigator in a stack navigator is one way to get a header. The other option would be to put a fake header on your tab components. Probably easier to just wrap the tab in a stack though. I would try adding the props you use in your stack nav to the tab nav to see if that works, but I would personally expect it to. – Doug Watkins Jul 08 '19 at 21:29
  • I tested it and no, it's not possible. Also Googled it https://stackoverflow.com/a/47217006/720175 – Sandy Jul 09 '19 at 08:51
  • Any idea on question #2? Thanks! – Sandy Jul 09 '19 at 08:51
  • @Sandy I edited my answer to be more correct. It should answer your #2. – Doug Watkins Jul 09 '19 at 15:12
  • Which part relates to question 2? Thanks – Sandy Jul 11 '19 at 15:13
  • @Sandy if you implement the structure I mentioned above, it will give you the back button there, which will go back like you are expecting it to. – Doug Watkins Jul 11 '19 at 15:20