How to make a "swipe up" gesture?

Ionic Framework Ionic React
1

I’m trying to use Ionic Gestures to make a “swipe up” gesture.

I have a big <details><summary> element and I want to allow users to open the element by swiping up anywhere on the summary.

Since ion-refresher has a “pull-down” gesture, I thought I could look at the code for that and then flip the orientation (since I want “swipe-up” instead of “pull-down”).

Here’s some of the code in ion-refresher.js:

      onStart: () => {
        this.pointerDown = true;
        if (!this.didRefresh) {
          translateElement(this.elementToTransform, '0px');
        }
        /**
         * If the content had `display: none` when
         * the refresher was initialized, its clientHeight
         * will be 0. When the gesture starts, the content
         * will be visible, so try to get the correct
         * client height again. This is most common when
         * using the refresher in an ion-menu.
         */
        if (MAX_PULL === 0) {
          MAX_PULL = this.scrollEl.clientHeight * 0.16;
        }
      },
      onMove: ev => {
        this.lastVelocityY = ev.velocityY;
      },

Here’s my code so far:

  const summarySelector = document.querySelector('details#my-div summary');
  if (summarySelector) {
    const onStart = () => {
      this.pointerUp = true;
      // if (!this.didRefresh) {
      //   translateElement(this.elementToTransform, '0px');
      // }
    };
    const onMove = (detail: GestureDetail) => {
      this.lastVelocityY = detail.velocityY;
    };
    const onEnd = () => {
      this.pointerUp = false;
      this.didStart = false;
    };

    const gesture: Gesture = createGesture({
      el: detailsSelector,
      gestureName: 'pull-up',
      gesturePriority: 31,
      direction: 'y',
      threshold: 5,
      onStart: () => { onStart(); },
      onMove: (detail) => { onMove(detail); },
      onEnd: () => { onEnd(); },
    });

My question is, what do I need to do to rework all the calls to this in react? All the tutorials I could find (like the one on the Ionic Blog and the one from Ionic Academy) are for angular, and I don’t know enough about Angular to understand how to convert this to something I can use in React.

Actually my background is PHP, not Javascript, so it could be that I’m missing something fundamental. Please advise.

2

Do you have a sample app I can try?

3

Thanks, I made a very basic repo:

The page with the gesture is in App.tsx.

4

Logging the value of detailsSelector shows it is null when the gesture is setup. I recommend using a React ref here instead and setting up your gesture code in a useIonViewDidEnter lifecycle hook: React Lifecycle: A Guide to Ionic React App Component Lifecycles

1 Like
5

Thanks, I was able to get it working with code like this:

  useIonViewDidEnter(() => {
    const detailsSelector = document.querySelector(`details#my-div-summary`) as HTMLDetailsElement;
    const onEnd = () => {
      // Only open it up; never close it.
      if (!detailsSelector.open) {
        clickDetailsSummary('mySummaryToClick');
      }
    };

    if (detailsSelector) {
      const gesture: Gesture = createGesture({
        el: detailsSelector,
        gestureName: 'pull-up',
        gesturePriority: 100,
        direction: 'y',
        threshold: 5,
        onEnd: () => {
          onEnd();
        },
      });
      gesture.enable(true);
    }

});

I’m still experimenting with it but it seems to be working well so far.

1 Like