Can not overlap the bottom sheet modal over bottom tab navigation

[VinitBhavsar]

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

``

} animationDuration={150} > Hello

``

[github-actions[bot]]

@VinitBhavsar: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

[gorhom]

you need to set BottomSheetModalProvider on the root component 👍

[tylrone]

you need to set BottomSheetModalProvider on the root component 👍

on V3 it working on IOS but on android i cant pandown the bottom sheet or tap to backdrop to dismiss

[gorhom]

could you provide a snack ? and i will look into it .

Aside of this , i would recommend you to upgrade to v4

[VinitBhavsar]

@gorhom I'm currently using v2 "@gorhom/bottom-sheet": "^2" I will try using v4 and for navigation, I'm using

"react-navigation": "4.4.2",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.1",

If you want to see bottomsheetmodal code

<BottomSheetModalProvider >
                        <BottomSheetModal
                            ref={this.bottomSheetRef}
                            snapPoints={["45%", '45%']}
                            style={{ backgroundColor: Colors.sp_yellow_1, borderRadius: 15 }}
                            backgroundComponent={() => <View />}
                            animationDuration={1000}
                        >
                            <BottomSheetView style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={{ uri: "https://picsum.photos/200/350" }}
                                    style={{ width: 70, height: 70, borderRadius: 100, marginVertical: 15 }}
                                />
                                <Text style={{ textAlign: 'center', fontSize: 22, color: Colors.white, fontWeight: 'bold', marginBottom: 10 }}>Title</Text>
                                <Text
                                    style={{ textAlign: 'center', fontSize: 16, color: Colors.white, width: "60%" }} numberOfLines={3}>{"Info Text"}</Text>
                            </BottomSheetView>
                            <BottomSheetView
                                onTouchStart={() => { this.bottomSheetRef.current.dismiss() }}
                                onTouchEnd={() => { this.bottomSheetRef.current.dismiss() }}
                                style={{ position: 'absolute', bottom: 0, height: 50, backgroundColor: Colors.white, width: "100%", justifyContent: 'center', alignItems: 'center' }}
                            >
                                <TouchableOpacity>
                                    <Text style={{ textAlign: 'center', fontSize: 16, color: "black", fontWeight: 'bold' }}>Bottom Button Text</Text>
                                </TouchableOpacity>
                            </BottomSheetView>
                        </BottomSheetModal>
                    </BottomSheetModalProvider>

[VinitBhavsar]

One more issue I'm facing this bottom sheet can not be visible over the Already visible React Native Modal. It appears behind React Native Modal.

[ramisalem]

I fixed the issue by making a global state that tells if the sheet is open or not, then I change the style of the bottom tab accordingly

 style: {
          backgroundColor: isSheetOpen ? Colors.PRIMARY : Colors.SECONDRY,
          height: isSheetOpen ? 0 : getHeightWithScaleFactor(90),
          borderTopWidth: isSheetOpen ? 0 : 0.5,
          shadowOpacity: 0,
          elevation: 0,
          borderTopColor: Colors.BORDER_COLOR,
          paddingHorizontal: 5,
        },

[VinitBhavsar]

@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, } })