0

In my app, I use react-navigation (v5) and have a BottomTabNavigator with all my main screens.

I want to make sure that additional tabs (more than 5) are hidden in a special "more" tab which opens a list of the screens - and from there, they should behave like normal tabs, but only shown when the "more" tab is activated.

Here's how the designer imagined it. (Ignore the red counter)

How would you implement something like this using the options of react-navigation without too much custom code or external dependencies?

Example of UI

Esben von Buchwald
  • 2,772
  • 1
  • 29
  • 37
  • 1
    Have you tried coding it up just as it appears here? Where the component of the "Mere" tab is a button that opens up a little modal. – windowsill Sep 17 '21 at 01:58
  • I'm actually in the process of doing that. I've already implemented the TabBar so it looks and behaves like the original one, but when I try `useState()` for having a state of the overlay, it fails telling me that hooks are not allowed in this component. – Esben von Buchwald Sep 17 '21 at 07:57
  • Got it fixed - I needed to specify tabBar={(props) => } in order to get rid of this error – Esben von Buchwald Sep 17 '21 at 09:44

0 Answers0