TypeError: Cannot destructure property 'onGestureHandlerStateChange' of 'this.ref.props' as it is undefined.

This is a bug in react native web. I want to detect double tap using TapGestureHandler. It works perfectly fine in Android and iOS but in Web, I get this error:

TypeError: Cannot destructure property 'onGestureHandlerStateChange' of 'this.ref.props' as it is undefined.
TapGestureHandler.GestureHandler.sendEvent
node_modules/react-native-gesture-handler/web/GestureHandler.js:151
  148 | 
  149 | sendEvent = nativeEvent => {
  150 |   const {
> 151 |     onGestureHandlerStateChange: onHandlerStateChange,
      | ^  152 |     onGestureHandlerEvent: onGestureEvent,
  153 |   } = this.ref.props;
  154 | 

Versions

react-native: 0.62.2 react-native-web: 0.13.6 react-native-gesture-handler: 1.7.0

Sample code to generate issue

// Tapper.tsx
import React from 'react';
import {
  State,
  TapGestureHandler,
  TapGestureHandlerStateChangeEvent,
} from 'react-native-gesture-handler';

type Props = {
  onSingleTap?: () => void;
  onDoubleTap?: () => void;
  children: React.ReactNode;
};

const Component: React.FC<Props> = ({ children, onDoubleTap, onSingleTap }) => {
  const doubleTapRef = React.useRef<TapGestureHandler>();
  const handleSingleHandlerStateChange = React.useCallback(
    (event: TapGestureHandlerStateChangeEvent) => {
      if (event.nativeEvent.state === State.ACTIVE) {
        onSingleTap?.();
      }
    },
    [onSingleTap]
  );

  const handleDoubleHandlerStateChange = React.useCallback(
    (event: TapGestureHandlerStateChangeEvent) => {
      if (event.nativeEvent.state === State.ACTIVE) {
        onDoubleTap?.();
      }
    },
    [onDoubleTap]
  );

  return (
    <TapGestureHandler
      onHandlerStateChange={handleSingleHandlerStateChange}
      waitFor={doubleTapRef}
    >
      <TapGestureHandler
        // @ts-ignore
        ref={doubleTapRef}
        onHandlerStateChange={handleDoubleHandlerStateChange}
        numberOfTaps={2}
      >
        {children}
      </TapGestureHandler>
    </TapGestureHandler>
  );
};

Component.displayName = 'Tapper';

export default Component;

Just use this component with any component in web.

[prft-alex-mattice]

Hi, I had investigated this issue for one of our projects and thought I would post my findings. I don’t think we will be able to commit time to posting a PR, but I’ve at least diagnosed the problem. This may be of help to others and the maintainers.

We recently updated a project from React Native Web from 0.12 to 0.13, and then needed to downgrade. In the release notes, it seems that RNW has changed which props it is forwarding through its refs to the DOM. It seems that there are a few places in the react-native-gesture-handler web code where it is accessing these props through the ref.

As a temporary workaround, downgrading to 0.12 stops the crash for the time being, with the caveat that you’re missing compatibility with changes from later RN versions (ex: no Pressable, if I’m not mistaken). Later this week, if it’s deemed helpful, I can try to find the spots in the codebase where these references are at least occurring if it will help speed up the creation of a patch.

[kwoxer]

Ahh sorry, didn’t see that the fix happened in react-native-gesture-handler.

Upgrading to “react-native-gesture-handler”: “~1.9.0”, fixed the issue.