How do I hide material bottom tab navigator in a nested stack navigator in react native

Question

I'm using material Bottom Tab Navigator, My app is structured such that, some tabs contain a stack navigator. I want to hide the bottom tabs when a user navigates to another stack in the stack navigator. I'm using react navigation v5. I don't want the bottom tabs showing when a user has already navigated to a stack.

Answer 1

I found the answer at this link:

Tab bar can now be hidden #20

What you should do is use the barStyle attribute with the 'none' property, which would look like this:

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

const BottomTab = createMaterialBottomTabNavigator()

const TabsNavigator = () => (
  <BottomTab.Navigator
    initialRouteName='Home'
    barStyle={{
      display: 'none'
    }}
  >
      // Screens
  </BottomTab.Navigator>
)

Then you can control that property with a variable, something similar to this:

...
  barStyle={{
    display: isTabVisible ? null : 'none'
  }}
...

However, to control which screens are displayed or not, you can use redux or some way to control the state of the variable isTabVisible as shown in the following link:

material-bottom-tabsのTabを非表示する方法〜React navigation〜

Yeap it's in japanese

Answer 2

I made you a basic example of what you're asking. I hope this what you're looking for :

import React from 'react'
import { Button, View, Text, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'

const Screen1 = ({ navigation }) => (
    <View style={styles.component}>
        <Button title="Go to NoBottomComp" onPress={() => navigation.navigate('NoBottomComp')} />
    </View>
)
const Screen2 = () => <View style={styles.component}><Text>Screen 2 component</Text></View>

const NoBottomComp = () =>  <View style={styles.component}><Text>Screen without bottom component</Text></View>

const Footer = createMaterialBottomTabNavigator()

const FooterNav = () => (
    <Footer.Navigator>
        <Footer.Screen name="Screen1" component={Screen1} />
        <Footer.Screen name="Screen2" component={Screen2} />
    </Footer.Navigator>
)

const Main = createStackNavigator()

export default props => (
    <NavigationContainer>
        <Main.Navigator>
            <Main.Screen name="BottomNav" component={FooterNav} />
            <Main.Screen name="NoBottomComp" component={NoBottomComp} />
            {/* As many screens as you want to be without bottom tabs */}
        </Main.Navigator>
    </NavigationContainer>
)

const styles = StyleSheet.create({
    component: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})