[v4] `enablePanDownToClose` not working on iOS and Android

Bug

I nested the bottomSheet in a react-native-modal component and use the modal backdrop for onClose.

The prop enablePanDownToClose is not working on my iOS and Android app.

If I wrap my app or component with GestureHandlerRootView it doesn’t make any differences.

Do you have any idea?

Environment info

Library	Version
@gorhom/bottom-sheet	4
react-native	0.64.3
react-native-reanimated	2.2.4
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Add code from below
2. Start your app
3. Try to swipe

Describe what you expected to happen:

1. BottomSheet should slide down

Reproducible sample code

return (
			<Modal
				isVisible={props.modalVisible}
				useNativeDriver={true}
				backdropOpacity={dimensions.shadowOpacity}
				style={styles.modalCenteredView}
				onBackdropPress={props.onClose}
				onBackButtonPress={props.onClose}
				statusBarTranslucent
				hideModalContentWhileAnimating
			>
				<BottomSheet
					ref={bottomSheetRef}
					index={0}
					snapPoints={props.bottomSheetHeight ? [props.bottomSheetHeight] : [DEFAULT_BOTTOM_SHEET_HEIGHT]}
					enablePanDownToClose
				>
					<BottomSheetView style={styles.bottomContent}>{content}</BottomSheetView>
				</BottomSheet>
			</Modal>
		);

https://user-images.githubusercontent.com/64470126/145685607-e03eaea2-97b1-42cb-8744-647ed476433a.mov

[MaganAnkur]

enablePanDownToClose didn’t work on android. Adding GestureHandlerRootView to App.js file resolved the issue for me.

<SafeAreaProvider>
              <GestureHandlerRootView style={{flex: 1}}>
                <BottomSheetModalProvider>
                  <NavigationContainer ref={navigationRef}>
                    <MainNavigator />
                  </NavigationContainer>
                </BottomSheetModalProvider>
              </GestureHandlerRootView>
 </SafeAreaProvider>

[ahAskari]

use GestureHandlerRootView to wrap BottomSheet component and and adjust flex: 1 It works for me