Using Gestures Utility

Ionic Framework Ionic React
1

I’m trying to use the Gesture utility with code below directly from example on site…
and getting this error:
Error:

> "Uncaught TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of null"

Code using:

pg = document.querySelector('.ppp');
    gesture: Gesture = createGesture({
        el: document.querySelector('.target-section'),
        threshold: 15,
        gestureName: 'my-gest',
        onMove: (detail) => { 
            console.log('test');
            //this.onMove(detail)
        }
    });

    //gesture.enable();

    onMove = (detail:any) => {
        console.log('IN IN IN MOVE!');
        const type = detail.type;
        const currentX = detail.currentX;
        const deltaX = detail.deltaX;
        const velocityX = detail.velocityX;
        //let pg = document.querySelector('p');
        this.pg.innerHTML = `
    <div>Type: ${type}</div>
    <div>Current X: ${currentX}</div>
    <div>Delta X: ${deltaX}</div>
    <div>Velocity X: ${velocityX}</div>
  `
    }

I’m triggering on a button call when clicked … any ideas anyone? and thaaanks! in advance

2

This bit seems not right… zone is an angular only thing, but you claim to be in a react project? Do you have a sample project uploaded to github?

3

I do but it’s in a private repo, maybe I can give you short short term access … I’ll create sample public repo and post a link here to it soon

4

A sample repo is all that is needed. Don’t need your production app, but if you could provide something that at least replicates the issue, that will help.

5

thanks for the fast replies … so I created a small sample repo here … code is modified off of ionic tabs starter to resemble how my code currently is too.

thanks

6

So I just took a look, it seems the setup was a little off. We’ll need to update the docs to better fit this. But here is the working example.

import React, { Component } from 'react';
import { createGesture, Gesture } from '@ionic/react';
import './ExploreContainer.css';

interface ContainerProps {
  name: string;
}

export default class ExploreContainer extends Component<ContainerProps> {
  myRef: any;
  containerRef: any;
  constructor(props: any) {
    super(props);
    this.myRef = React.createRef();
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    const gesture: Gesture = createGesture({
      el: this.containerRef.current!,
      threshold: 15,
      gestureName: 'my-gest',
      onMove: (detail: any) => {
        console.log('test');
        this.onMove(detail);
      }
    });
    gesture.enable();
  }

  onMove(detail: any) {
    console.log('IN IN IN MOVE!');
    const type = detail.type;
    const currentX = detail.currentX;
    const deltaX = detail.deltaX;
    const velocityX = detail.velocityX;
    this.myRef.current.innerHTML = `
    <div>Type: ${type}</div>
    <div>Current X: ${currentX}</div>
    <div>Delta X: ${deltaX}</div>
    <div>Velocity X: ${velocityX}</div>
  `;
  }

  render() {
    return (
      <div ref={this.containerRef}>
        <strong>{this.props.name}</strong>
        <p>click and drag anywhere on this page</p>
        <p ref={this.myRef} />
      </div>
    );
  }
}
2 Likes
7

AWESOME! Thanks a mil! :slight_smile: