[v5] OnPress backdrop is not working on web

[devoren]

Bug

Im using BottomSheetModal on web and it works fine! But when press backdrop is not working on web

Environment info

Library	Version
@gorhom/bottom-sheet	^5.0.0-alpha.2
react-native	0.72.3
react-native-reanimated	~3.3.0
react-native-gesture-handler	~2.12.0

Steps To Reproduce

1. Create bottomsheet component using modal
2. Add backdropComponent
3. Run it on web

Describe what you expected to happen:

1. When i press backdrop closes modal

Reproducible sample code

const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const snapPoints = useMemo(() => ['50%'], []);

const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
	<BottomSheetBackdrop
		{...props}
		disappearsOnIndex={-1}
		appearsOnIndex={0}
		pressBehavior={'close'}
		onPress={dismissModal}
	/>
),
[],
);
	
<BottomSheetModal
		ref={bottomSheetModalRef}
		index={0}
		snapPoints={snapPoints}
		backdropComponent={renderBackdrop}
		handleComponent={null}
		enableOverDrag={false}
		enablePanDownToClose={false}
		backgroundStyle={{
			borderRadius: isAndroid ? 0 : 15,
		}}
		containerStyle={{
			maxWidth: window.width,
			marginHorizontal: isDesktop ? 'auto' : 0,
		}}>
		<BottomSheetView style={{ flex: 1 }}>
		</BottomSheetView>
	</BottomSheetModal>

[oliviercperrier]

My backdrop isnt even rendering on web

[devoren]

@oliviercperrier are you using alpha or v4?

[devoren]

@gorhom Hi, can we change TapGestureHandler to GestureDetector from 'react-native-gesture-handler >= v2.0.0'? So instead useAnimatedGestureHandler we use Gesture.Tap(). If we use new GestureDetector API, backdrop press works on native and web in v5

diff --git a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetBackdrop/BottomSheetBackdrop.js b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetBackdrop/BottomSheetBackdrop.js
index d8a0d1c..b5ae4df 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetBackdrop/BottomSheetBackdrop.js
+++ b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetBackdrop/BottomSheetBackdrop.js
@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import Animated, { interpolate, Extrapolate, useAnimatedStyle, useAnimatedReaction, useAnimatedGestureHandler, runOnJS } from 'react-native-reanimated';
-import { TapGestureHandler } from 'react-native-gesture-handler';
+import { Gesture, TapGestureHandler, GestureDetector } from 'react-native-gesture-handler';
 import { useBottomSheet } from '../../hooks';
 import { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR } from './constants';
 import { styles } from './styles';
@@ -58,6 +58,16 @@ const BottomSheetBackdropComponent = _ref => {
   }, [handleOnPress]);
   //#endregion
 
+  //#region tap gesture
+  const gesture = useMemo(
+    () =>
+      Gesture.Tap().onEnd(() => {
+        runOnJS(handleOnPress)();
+      }),
+    [handleOnPress]
+  );
+  //#endregion
+
   //#region styles
   const containerAnimatedStyle = useAnimatedStyle(() => ({
     opacity: interpolate(animatedIndex.value, [-1, disappearsOnIndex, appearsOnIndex], [0, 0, opacity], Extrapolate.CLAMP),
@@ -75,8 +85,8 @@ const BottomSheetBackdropComponent = _ref => {
   }, [disappearsOnIndex]);
   //#endregion
 
-  return pressBehavior !== 'none' ? /*#__PURE__*/React.createElement(TapGestureHandler, {
-    onGestureEvent: gestureHandler
+  return pressBehavior !== 'none' ? /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: gesture
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: containerStyle,
     pointerEvents: pointerEvents,
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 35597ce..de2aad1 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -9,8 +9,8 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated';
 import {
-  TapGestureHandler,
-  TapGestureHandlerGestureEvent,
+  Gesture,
+  GestureDetector,
 } from 'react-native-gesture-handler';
 import { useBottomSheet } from '../../hooks';
 import {
@@ -74,17 +74,16 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region tap gesture
-  const gestureHandler =
-    useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
-      {
-        onFinish: () => {
-          runOnJS(handleOnPress)();
-        },
-      },
-      [handleOnPress]
-    );
+  const gesture = useMemo(
+    () =>
+      Gesture.Tap().onEnd(() => {
+        runOnJS(handleOnPress)();
+      }),
+    [handleOnPress]
+  );
   //#endregion
 
+
   //#region styles
   const containerAnimatedStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -114,22 +113,20 @@ const BottomSheetBackdropComponent = ({
   );
   //#endregion
 
-  return pressBehavior !== 'none' ? (
-    <TapGestureHandler onGestureEvent={gestureHandler}>
-      <Animated.View
-        style={containerStyle}
-        pointerEvents={pointerEvents}
-        accessible={true}
-        accessibilityRole="button"
-        accessibilityLabel="Bottom Sheet backdrop"
-        accessibilityHint={`Tap to ${
-          typeof pressBehavior === 'string' ? pressBehavior : 'move'
-        } the Bottom Sheet`}
-      >
-        {children}
-      </Animated.View>
-    </TapGestureHandler>
-  ) : (
+  return pressBehavior !== 'none' ? <GestureDetector gesture={gesture}>
+  <Animated.View
+    style={containerStyle}
+    pointerEvents={pointerEvents}
+    accessible={true}
+    accessibilityRole="button"
+    accessibilityLabel="Bottom Sheet backdrop web"
+    accessibilityHint={`Tap to ${
+      typeof pressBehavior === 'string' ? pressBehavior : 'move'
+    } the Bottom Sheet`}
+  >
+    {children}
+  </Animated.View>
+</GestureDetector> : (
     <Animated.View pointerEvents={pointerEvents} style={containerStyle}>
       {children}
     </Animated.View>

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[devoren]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Still waiting for updates

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[devoren]

I'm waiting for PR #1467

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[devoren]

waiting for PR #1467

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[devoren]

Still waiting for updates

[gorhom]

this should be fixed with alpha.6, thanks for reporting it

[jerone]

@gorhom commented on Jan 3, 2024, 9:37 PM GMT+1:

this should be fixed with alpha.6, thanks for reporting it

I'm having the same issue. When will there be an official release?