Bottom Sheet doesn't overlay the Tab Bar in Bottom Tabs navigator
Riverknight0 opened this issue · 10 comments
Thanks for this wonderful, easy to use library.
There is a small thing i faced.
How can we show bottom sheet over/in the foreground of Bottom Tabs Navigator (React navigation v6. in this case)
I want to show only bottom sheet and not bottom navigator.
I'm assuming you meant overlaying the bottom tab bar??
How does it look when it opens currently?
Thanks for providing this image @fernandasecinaro
Just fyi, this is not an issue with the sheet itself but the expected behavior for bottom tab navigator because the screens and the navigator elements (tab bar) are not in same view hierarchy.
Assume the tab bar to be fixed in position and renders above the screen (which is where the sheet is). So the sheet overlays the screen content, but tab bar overlays everything.
That said, I'll look into finding a solution for this.
Also the comment is open for suggestions
Agree on this - can't wait for it to get fixed.
Any workaround?
@Riverknight0 @fernandasecinaro @MathiasSvDK
A possible workaround I can think of is hiding the tab bar when sheet opens and showing it back when sheet closes.
This an be done using onClose
and onOpen
props along with useNavigation
hook.
Example:
import { useNavigation } from "@react-navigation/native"; // or from 'expo-router'
...
const navigation = useNavigation();
<BottomSheet
ref={sheetRef}
onOpen={() =>
navigation.setOptions({ tabBarStyle: { display: "none" } })
}
onClose={() =>
navigation.setOptions({ tabBarStyle: { display: "flex" } })
}
>
...
</BottomSheet>
You can use portal (https://github.com/jeremybarbet/react-native-portalize for example) to teleport your modal before your navigation tab bar.
@TomCorvus Thank you so much for this, I'll test it out pretty soon and if it works well, then you would've saved me from a lot of headaches 😀
@stanleyugwu Any update?
@Goktug you can use react-native-portalize
for now.
I’m looking at replicating what’s done in the library inside the bottom sheet so users won’t have to install another package to solve the problem.
But y’all please use react-native-portalize
for now.
I think I’ll keep this open till we have a built in solution.