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?
CodePudding user response:
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>
)
}