CODEWITHSUNDEEP
react-nativereact-navigation
Ash Archin
Ash Archin

Reputation: 451

React navigation 5, hide bottom tab bar on second stack screen?

I'm working on an app which has a stack navigation and a bottom tab navigation, I need to show the bottom tab bar in first stack screen but not in second one. here's my code for navigations:

const BottomTab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigation' component={StackNavigation} options={{
          tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
        }} />
        <BottomTab.Screen name='SecondTab' component={SecondTab} options={{
          tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
        }} />
        <BottomTab.Screen name='Offers' component={Offers} options={{
          tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
        }} />
        <BottomTab.Screen name='Profile' component={Profile} options={{
          tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
        }} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}

and here's my stack navigation:

const StackNavigator = createStackNavigator();

const StackNavigation = () => {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
      <StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
    </StackNavigator.Navigator>
  );
}

this code is working but only for first stack navigation and for OfficeDetails page I need to hide my tab bar. how can I achieve this?

Upvotes: 1

Views: 513

Answers (1)

Vanns35
Vanns35

Reputation: 466

You have to pass BottomTabNavigator navigator as a component to StackNavigationWithTabs and export StackNavigationWithoutTabs by default.

const StackNavigationWithTabs= createStackNavigator();

const StackNavigationWithTabs= () => {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
   
    </StackNavigator.Navigator>
  );
}

const BottomTab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigationWithTabs' component={StackNavigationWithTabs} options={{
          tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
        }} />
        <BottomTab.Screen name='SecondTab' component={SecondTab} options={{
          tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
        }} />
        <BottomTab.Screen name='Offers' component={Offers} options={{
          tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
        }} />
        <BottomTab.Screen name='Profile' component={Profile} options={{
          tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
        }} />
      </BottomTab.Navigator>
   
  )
}

const StackNavigator = createStackNavigator();

const StackNavigationWithoutTabs= () => {
  return (
    <NavigationContainer>
      <StackNavigator.Navigator>
        <StackNavigator.Screen name="BottomTabNavigator" component= {BottomTabNavigator} options={{ headerShown: false }} />
        <StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
      </StackNavigator.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 1

Related Questions