Allow custom navigators to dynamically hide routes

[GibbyBox]

I've been wanting to use material bottom tabs but I need the ability to hide a tab unless they are a qualified user. Currently, only the innate bottom tabs shipped with expo router allows this.

I'm aware of the layout showcase https://github.com/EvanBacon/expo-router-layouts-example/blob/main/layouts/material-bottom-tabs.tsx
and tried modifying it such that I can hide a tab similar to how the innate bottom tabs were implemented https://github.com/expo/router/blob/main/packages/expo-router/src/layouts/Tabs.tsx

However, I'm having trouble finding a property I can use in material bottom tabs to hide the tab. Filtering out the screen in the custom navigator doesn't work either.

According to the docs, this currently isn't possible
https://expo.github.io/router/docs/migration/react-navigation/custom-navigators/

All of the children of a <Navigator /> component will be rendered as-is.

[EvanBacon]

Custom navigators tap into the router, there is no single mechanism for controlling how a custom navigator renders content.

[GibbyBox]

What would you recommend doing? I just want to hide a tab - I don't mind it being a route a user can get to (easy enough to redirect away) as long as they can't see it in the tab bar.

[mrtry]

Thank you, bacon 🙏
I'm using <TopTabs /> which was in example and I'm having the same problem. I was having the same problem.
It would be great to be able to remove a specific routing in Custom Navigator in the manner of conditional rendering 🙏

[mrtry]

@EvanBacon
Also, this may sound hacky, but I noticed that redirect={true} will remove the specified screen from the TopTab.
If I'm not mistaken, I thought this was because redirect={true} Screen is removed 👀
However, I know that redirect props are deprecated.

Is it ok to redirect={true} to remove a specific routing?

[mrtry]

@EvanBacon
Could you please comment on this?
I would like to know if there is another solution. 🥺

[SleeplessByte]

Unfortunately it's not possible with the material bottom bar (see: react-navigation/react-navigation#9697 (comment)).

You don't want to remove the route, just the button. The easiest to achive this is to patch react-native-paper yourself.