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

[hamidfzm]

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.

[emech-en]

I had the same problem.

Downgrading react-native-web to 0.12.3 solved my problem.

[janicduplessis]

I was able to work the issue by making sure the children of GestureHandler components is a class that renders a View

Something like this works:

class NonForwardedRefAnimatedViewHack extends React.Component<any> {
  render() {
    return <Animated.View {...this.props} />;
  }
}

...

<TapGestureHandler>
  <NonForwardedRefAnimatedViewHack />
</TapGestureHandler>

[Shafran123]

Same issue i got

[hunght]

same here i'm using expo sdk version 39.0.2,

[AlastairTaft]

@janicduplessis You legend. That avoids me having to downgrade.

[fortezhuo]

@AlastairTaft / @janicduplessis
I can't get Swipeable Component works with that trick.. Can you give me some clue ?

[difaananda40]

I'm facing this problem right now, any solution please?

[hosseinmd]

I have the same problem.

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"react-native-web": "^0.14.4",

[keziabaidoo]

Cannot read property 'onGestureHandlerStateChange' of undefined
at NativeViewGestureHandler.GestureHandler.sendEvent

need help please

[jjborie]

@keziabaidoo , the bug has been fixed yesterday use:

"react-native-gesture-handler": "github:software-mansion/react-native-gesture-handler#196782c740cde1464e4ce4f5f46bf2c756ecdc43",

It work for me.

[keziabaidoo]

did not work
for me

[milkcha]

same problem.

[monjohn]

Latest master did not fix the problem for me, but downgrading to 12.3 did.

[chaaya]

There is a new version out there with a fix for it according to the changelog.

https://github.com/software-mansion/react-native-gesture-handler/releases/tag/1.9.0

[keziabaidoo]

Thank u

…

On Thu, 26 Nov 2020, 11:34 am Elias Chaaya, ***@***.***> wrote: There is a new version out there with a fix for it according to the changelog. https://github.com/software-mansion/react-native-gesture-handler/releases/tag/1.9.0 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1164 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANPZDOLCOWLNLDHJMRRHKILSRY4K3ANCNFSM4P26UJDQ> .

[kwoxer]

I'm getting this Uncaught TypeError: can't access property "onGestureHandlerStateChange", _this$ref$props is undefined error on any of these react-native-web version:

"react-native-web": "~0.14.4",
"react-native-web": "~0.13",
"react-native-web": "~0.12",

I'm using:

• "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
• "react-native-gesture-handler": "~1.8.0",

[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.