Swipe Events not firing on Mobile devices while using react-swipeable in Next.js

[kloudping-dinesh]

Describe the bug I have built a Swipe to confirm button component using react-swipeable this works fine on Desktop view but the swipe events are not firing on Mobile/Touch devices.

Steps or Sandbox to reproduce Fork the example repository:

• https://github.com/kloudping-dinesh/swipe-btn

Expected behavior Swipe events should be fired on Mobile devices too.

Device/Browser Android 13 Mobile/Chrome 120.

Additional context Please try out the component from the example repository.

[hartzis]

I think i figured it out, it works on desktop because the handlers you're spreading are the onMouse event handlers, but on mobile we have to use the ref prop on to attach event listeners, but you're overwriting the ref handler from react-swipeable's handlers. https://github.com/kloudping-dinesh/swipe-btn/blob/19637880b622816122a2fbe0cf55484e9fa8f1c7/src/components/swipe-btn/index.tsx#L148-L149

If you need the ref also we have an example here in the docs.

• https://github.com/FormidableLabs/react-swipeable?tab=readme-ov-file#how-to-share-ref-from-useswipeable

For your code something like

...
  const refPassthrough = (el) => {
    // call useSwipeable ref prop with el
    swipeableHandlers.ref(el);

    // set myRef el so you can access it yourself
    myRef.current = el;
  }
...
      {...swipeableHandlers}
      ref={refPassthrough}

[kloudping-dinesh]

Got it working by passing ref to the swipeableHandlers, thanks @hartzis I'm grateful for your quick turnaround time.