Hidding custom tabbar in nested stack navigation - react-native

Question

I have a tabbar looking like the one below. inside every tab I have a nested stack navigator.
I want to hide the tabbar whenever the stack is not on its initial route. In the documentation, it is stated like one is supposed to place the stack in the initial stack navigator.
https://reactnavigation.org/docs/hiding-tabbar-in-screens/
However, this does not make sense and as I have my signup and all the routes where the customer is not logged in there I think it is counter-intuitive to place the entire application in one stack navigator. Further, it diminishes the purpose of having a tab-navigation in the first place.
I have also tried the tabBarVisible prop and change this conditionally. However, this provides me with some issues.
First, it does not seem to work on mu custom tabBar. Further, it gives me the state of every tab for every render. Thus it causes some unwanted behavior. lastly, it is not recommended from the documentation.
<Tab.Navigator
tabBar={props => (
<TabBar
onPress={tabIndex => changeTab(tabIndex, props)}
display={false}
values={[
{ title: "Balance", icon: 'view-dashboard'},
{ title: "Faktura", icon: 'file-pdf'},
{ title: "Rabatter", icon: 'gift'},
{ title: "Profil", icon: 'account-details'},
{ title: "Mere", icon: 'dots-horizontal' }
]}/>
)}>
<Tab.Screen
name="Balance"
component={BalanceStackNavigator}
/>
<Tab.Screen
name="Invoice"
component={InvoiceStackNavigator}
/>
<Tab.Screen
name="BlueBenefit"
component={BlueBenefitStackNavigator}
/>
<Tab.Screen
name="User"
component={UserStackNavigator}
/>
<Tab.Screen
name="CrossSale"
component={CrossSaleStackNavigator}
/>
</Tab.Navigator>
So basically my question is, how I achieve this behavior of hiding the tabs when not on the initial route in the best way?

Answer 1

I ended up using what was recommended by the documentation, which is to place all of my screens in my app stack instead of the individual nested stacks.