Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can not overlap the bottom sheet modal over bottom tab navigation

See original GitHub issue

Bug

Bottom Sheet Modal Can Not Be Overlap | Elevated | zIndexed on Bottom Tab Navigation

Environment info

Library	Version
@gorhom/bottom-sheet	^2
react-native	0.63.3
react-native-reanimated	2.2.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

Here is the code sample

Describe what you expected to happen:

Want to overlap the bottom sheet modal on the bottom tab navigation

Reproducible sample code

<BottomSheetModalProvider> <BottomSheetModal ref={this.bottomSheetRef} snapPoints={["30%", '30%']} style={{ backgroundColor: Colors.sp_yellow_1 }} backgroundComponent={() => <View />} animationDuration={150} > <View style={{ alignItems: 'center', }}> <Text>Hello</Text> </View> </BottomSheetModal> </BottomSheetModalProvider> Screenshot_1627580844

Issue Analytics

State:
Created 2 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

3reactions

gorhomcommented, Aug 5, 2021

you need to set BottomSheetModalProvider on the root component 👍

0reactions

VinitBhavsarcommented, Sep 2, 2021

@ramisalem is this for the custom tab or default tab option? I’m using the default tab navigation not Custom Tab Bar Component. Surely will try this by making Custom Tabbar.

const AppStack = createBottomTabNavigator({ ProfileScreen: ProfileScreen, HomeScreen: HomeScreen, MessageScreen: MessageScreen }, { initialRouteName: "HomeScreen", tabBarOptions: { adaptive: true, keyboardHidesTabBar: true, tabStyle: { backgroundColor: Colors.ui_light_selected_bg, overflow: 'visible', borderTopWidth: 0.5, elevation: 100, borderTopColor: Colors.ui_grey_10, }, allowFontScaling: false, } })