How to hide bottom bar on modal screen?

Issue

I have an app with a bottom bar and I'd like to present a modal screen from one of them without the bottom tab. I don't understand why it works as expected on iOS but not on Android.

Here is my bottom tab navigator which contains all my tabs:

// AppStack.tsx

const Tab = createBottomTabNavigator()

const AppStack = () => {
  return (
    <Tab.Navigator initialRouteName="homeStack" >
      <Tab.Screen name="homeStack" component={HomeStack} />
      ...
    </Tab.Navigator>
  )
}

And here is the stack navigator that contains several screens but also contains one screen that should be presented modally (thus without the bottom bar).

// HomeStack.tsx

const Stack = createNativeStackNavigator()

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={HomeScreen} />
      ...

      <Stack.Screen
        name="addStuff"
        component={StuffStack}
        options={{
          presentation: 'fullScreenModal',
        }}
      />

    </Stack.Navigator>
  )
}

Presenting the addStuff modal screen from one of HomeStack's screens works on iOS as expected: the bottom bar isn't displayed. But on Android, the bottom bar is still present...

// HomeScreen.tsx
navigation.navigate('addStuff')

Does anybody have an idea on how to tell react-navigation not to add this bottom bar on this modal screen?

Solution

You can create conditional rules to check the screen name.

To achieve this, you need to get the navigation props (which is present on your HomeStack) and use the getFocusedRouteNameFromRoute method to get the current screen name:

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
// rest of the codes ...

const HomeStack = ({route, navigation}) => {

  React.useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (routeName === 'addStuff') {
      navigation.setOptions({tabBarVisible: false});
    } else {
      navigation.setOptions({tabBarVisible: true});
    }
  }, [navigation, route]);

  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={HomeScreen} />
      // rest of the codes ...
      <Stack.Screen
        name="addStuff"
        component={StuffStack}
        options={{
          presentation: 'fullScreenModal',
        }}
      />
    </Stack.Navigator>
  )
}

Answered By - nima