1

I have an app that is composed of a tabbed navigation with 5 screens and one of them is a stack navigation of two screens. On one of the two stack screens I want to hide the bottom tabs. How can I do that ?

I already checked React Navigation V5 Hide Bottom Tabs but when I tried using navigation.setOptions({ tabBarVisible: false }) it changed the options for the stack navigator not the tab one.

Here is my code

// Screen where I want to hide the BottomTabNavigator
function StackSecondScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "indianred"
      }}
    >
      <Text>StackSecondScreen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function TabFirstScreen({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="StackFirst">
      <Stack.Screen
        name="StackFirst"
        component={StackFirstScreen}
        options={{
          headerShown: false
        }}
      />
      <Stack.Screen name="StackSecond" component={StackSecondScreen} /> // <== Screen where I want to hide the BottomTabNavigator
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="First">
        <Tab.Screen name="TabFirst" component={TabFirstScreen} /> 
        <Tab.Screen name="TabSecond" component={TabSecondScreen} />
        <Tab.Screen name="TabThird" component={TabThirdScreen} />
        <Tab.Screen name="TabFourth" component={TabFourthScreen} />
        <Tab.Screen name="TabFifth" component={TabFifthScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
BenjaminB
  • 53
  • 6

0 Answers0