Bottom Sheet doesn't overlay the Tab Bar in Bottom Tabs navigator

[Riverknight0]

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.

[stanleyugwu]

I'm assuming you meant overlaying the bottom tab bar??

How does it look when it opens currently?

[fernandasecinaro]

Hey! I'm testing this library to use it on my app. But i experienced this issue too. I'd really like to have this fixed because it's the best library i found

[stanleyugwu]

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

[MathiasSvDK]

Agree on this - can't wait for it to get fixed.
Any workaround?

[stanleyugwu]

@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>

[TomCorvus]

You can use portal (https://github.com/jeremybarbet/react-native-portalize for example) to teleport your modal before your navigation tab bar.

[stanleyugwu]

@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 😀

[Goktug]

@stanleyugwu Any update?

[stanleyugwu]

@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.

[stanleyugwu]

I think I’ll keep this open till we have a built in solution.

[yasaricli]

I just discovered react-native-portalize package, it's really amazing. It works for this.

[stanleyugwu]

@yasaricli Yes it does. Wonderful suggestion by @TomCorvus