How to make TapGestureHandler work correctly in functional components?

I have this very simple tap listener for:

• single tap
• double tap

written in functional component.

const PressBox = () => {
  const doubleTapRef = React.createRef();

  const _onSingleTap = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert("I'm touched");
    }
  };
  const _onDoubleTap = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert('D0able tap, good job!');
    }
  };

  return (
    <TapGestureHandler onHandlerStateChange={_onSingleTap} waitFor={doubleTapRef}>
      <TapGestureHandler ref={doubleTapRef} onHandlerStateChange={_onDoubleTap} numberOfTaps={2}>
        <View style={styles.box} />
      </TapGestureHandler>
    </TapGestureHandler>
  );
};

Problem

Double-tap never gets fired. Only single taps

Expected

_onDoubleTap to fire on double tap

[ChronSyn]

For anyone who ends up here looking for a solution, React.useRef() hook is needed instead of React.createRef();

import React, { useRef } from "react";
import { TapGestureHandler, State } from "react-native-gesture-handler";
import { View, Text } from "react-native";

export const PressBox = () => {
  const doubleTapRef = useRef(null)
  const _onSingleTap = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert("Hey");
    }
  };

  const _onDoubleTap = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert("Hey dbl");
    }
  }
  
  return (
    <TapGestureHandler
      onHandlerStateChange={_onSingleTap}
      waitFor={doubleTapRef}>
      <TapGestureHandler ref={doubleTapRef} onHandlerStateChange={_onDoubleTap} numberOfTaps={2}>
        <View style={{ width: 100, height: 100, backgroundColor: "red" }}>
          <Text>HEY!</Text>
        </View>
      </TapGestureHandler>
    </TapGestureHandler>
  );
}

[timurridjanovic]

Made it work… I had to abstract out all the logic into its own separate component… That made it work.