How to use the react-native-gesture-handler.State.CANCELLED function in react-native-gesture-handler

onPanHandlerStateChange = ({nativeEvent}) => {
        switch (nativeEvent.state) {
        case GestureState.UNDETERMINED:
            console.log('PAN undetermined', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.FAILED:
            console.log('PAN failed', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.BEGAN:
            console.log('PAN began', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.CANCELLED:
            console.log('PAN cancelled', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.ACTIVE:
            console.log('PAN active', nativeEvent.state); // eslint-disable-line no-console
            break;
        case GestureState.END:
            console.log('PAN end', nativeEvent.state); // eslint-disable-line no-console
            break;
        }
    };

_onHandlerStateChange = ({ nativeEvent: event }) => {
    // console.log("event", event);
    switch (event.state) {
      case State.BEGAN:
        this._slowDownAnimation && this._slowDownAnimation.stop();
        this._slowDownAnimation = null;
        this._transformY.extractOffset();
        break;
      case State.CANCELLED:
      case State.FAILED:
      case State.END:
        this._transformY.flattenOffset();
        this._slowDownAnimation = Animated.sequence([
          Animated.decay(this._transformY, {
            velocity: event.velocityY / 1000,
            deceleration: 0.95,
            useNativeDriver: true
          }),
          Animated.timing(this._transformY, {
            toValue: 0,
            duration: 300,
            easing: Easing.sin,
            useNativeDriver: true
          })
        ]);

)
    // current snap point desired
    this.snapPoint = currentSnapPoint()

    if (props.enabledBottomClamp) {
      this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
    }

    const masterClock = new Clock()
    const prevMasterDrag = new Value(0)
    const wasRun: Animated.Value = new Value(0)
    this.translateMaster = block([
      cond(
        or(
          eq(this.panMasterState, GestureState.END),
          eq(this.panMasterState, GestureState.CANCELLED)
        ),
        [
          set(prevMasterDrag, 0),
          cond(
            or(clockRunning(masterClock), not(wasRun), this.isManuallySetValue),
            [
              cond(this.isManuallySetValue, stopClock(masterClock)),
              set(
                masterOffseted,
                this.runSpring(
                  masterClock,
                  masterOffseted,
                  this.masterVelocity,
                  cond(
                    this.isManuallySetValue,
                    this.manuallySetValue,

function gestureStateFromEnum(s) {
  switch (s) {
    case State.UNDETERMINED:
      return 'UNDETERMINED';
    case State.BEGAN:
      return 'BEGAN';
    case State.FAILED:
      return 'FAILED';
    case State.CANCELLED:
      return 'CANCELLED';
    case State.ACTIVE:
      return 'ACTIVE';
    case State.END:
      return 'END';
    default:
      return `Invalid gesture state: ${s}`;
  }
}

nativeEvent: ({ state }) => block([
        cond(and(
          neq(state, this.panGestureState),
          not(this.disabled),
        ), [
          set(this.panGestureState, state),
          cond(or(
            eq(state, GestureState.END),
            eq(state, GestureState.CANCELLED),
            eq(state, GestureState.FAILED),
          ), this.onGestureRelease),
        ]
        ),
      ])
    }

TapGestureHandler,
  LongPressGestureHandler,
  RectButton,
  BorderlessButton,
  BaseButton,
  PanGestureHandler,
  PinchGestureHandler,
  RotationGestureHandler,
  State,
} from 'react-native-gesture-handler';
import { Icon } from 'expo';

const stateToPropMappings = {
  [State.BEGAN]: 'BEGAN',
  [State.FAILED]: 'FAILED',
  [State.CANCELLED]: 'CANCELLED',
  [State.ACTIVE]: 'ACTIVE',
  [State.END]: 'END',
};

class TapHandlerExamples extends React.Component {
  tapValue = new Animated.Value(1);
  longPressValue = new Animated.Value(1);

  render() {
    let { tapValue, longPressValue } = this;
    let longPressBackgroundColor = longPressValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['red', '#eee'],
    });

    return (

runHoverClock = cond(clockRunning(this.hoverClock), [
    spring(this.hoverClock, this.hoverAnimState, this.hoverAnimConfig),
    cond(eq(this.hoverAnimState.finished, 1), [
      stopClock(this.hoverClock),
      call(this.moveEndParams, this.onDragEnd),
      this.resetHoverSpring,
      set(this.hasMoved, 0),
    ]),
    this.hoverAnimState.position
  ])

  hoverComponentTranslate = cond(clockRunning(this.hoverClock), this.runHoverClock, this.hoverAnim)
  hoverComponentOpacity = and(
    this.isHovering,
    neq(this.panGestureState, GestureState.CANCELLED),
  )

  renderHoverComponent = () => {
    const { hoverComponent } = this.state
    const { horizontal } = this.props

    return (

_onHandlerStateChange = ({ nativeEvent: event }) => {
    switch (event.state) {
      case State.BEGAN:
        this._onTouchBegin();
        break;
      case State.CANCELLED:
        break;
      case State.FAILED:
      case State.END:
        this._onTouchEnd(event.translationY, event.velocityY / 1000);
    }
  };