Pan Gesture event

[Livijn]

Feature Request

Why it is needed

This might be a feature request, or perhaps it's already available. I am trying to respond to the pan gesture. Basically, when the sheet is panned larger/smaller, I want another item to shrink / expand.

I've looked at the gestureEventsHandlersHook prop and this hook with no luck: https://github.com/gorhom/react-native-bottom-sheet/blob/e15965f18ca90a45a34f963e57df3eb83f22444b/src/hooks/useGestureEventsHandlersDefault.tsx#L23

Is there a way to do this atm?

Possible implementation

Perhaps a onPanStart and onPanEnd event.

Code sample

No idea

[github-actions[bot]]

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.

[Livijn]

bump

[github-actions[bot]]

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.

[Livijn]

bump

[Marbos21]

Any news?

[github-actions[bot]]

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.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[g-m-99]

Why this request has been closed? This feature can be very useful to someone ho need to perform an action when the bottom sheet is dragged

[w4t3r-45]

any luck ?

[bewallyt]

I ended up creating a local copy of useCustomerGestureEventsHandlers, making modifications to it, and then passing it in as a prop: gestureEventsHandlersHook={useCustomGestureEventsHandlers}

[AndreiTimofte96]

Hi, @bewallyt! Could you help me with an example of how to use useCustomerGestureEventsHandlers ? I copied it from https://github.com/gorhom/react-native-bottom-sheet/blob/master/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts modified it to accept an onStart prop and I'm trying to use it like:

 <BottomSheet
 ...
     gestureEventsHandlersHook={useCustomGestureEventsHandlers({
       onStart: () => { console.log("ON START") },
      })}
      ...

Result: not working, the app crashes and closes automatically. I'm missing something...

How can I know when the handleOnStart drag event triggered ?

[bewallyt]

@AndreiTimofte96

does it make sense to just modify the built in handleOnStart (i.e., add a log statement) before trying to add an additional onStart prop?

[AndreiTimofte96]

@bewallyt adding a log statement isn't enough for my use case. I need to have acces from outside of that hook. My use case is that I want to control the content displayed inside the BottomSheet. So I would need to pass (somehow) an onDragStart callback to the BottomSheet.

 const [content, setContent] = useState("before drag content");

  return (
    <BottomSheet
      gestureEventsHandlersHook={useCustomGestureEventsHandlers({
      onStart: () => {setContent("after drag content")},
      })}
      ref={bottomSheetRef}
      snapPoints={[
        bottomSheetHeightRef.current,
        bottomSheetHeightRef.current + 5,
        '90%',
      ]}
    >
      <BottomSheetView style={styles.bottomSheet}>
        {content}
        </BottomSheetView>
        ........

Any help would be highly appreciated! Thank you!

[bewallyt]

can i see how onStart is implemented in your useCustomGestureEventsHandlers?

[AndreiTimofte96]

@bewallyt

[bewallyt]

maybe try invoking on start when it meets some threshold of translation y