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

call([this.isSwiping], ([value]: readonly Binary[]) => {
        const { keyboardDismissMode } = this.props;

        if (value === TRUE) {
          if (keyboardDismissMode === 'on-drag') {
            Keyboard.dismiss();
          }

          this.toggleStatusBar(true);
        } else {
          this.toggleStatusBar(this.currentOpenValue);
        }
      })
    ),
    cond(
      eq(this.gestureState, State.ACTIVE),
      [
        cond(this.isSwiping, NOOP, [
          // We weren't dragging before, set it to true
          set(this.isSwiping, TRUE),
          // Also update the drag offset to the last position
          set(this.offsetX, this.position),
        ]),
        // Update position with previous offset + gesture distance
        set(
          this.position,
          add(this.offsetX, this.gestureX, this.touchDistanceFromDrawer)
        ),
        // Stop animations while we're dragging
        stopClock(this.clock),
      ],
      [

resetPosition = true
	) => [
		// we stop
		stopClock(clock),
		set(state.finished, 0),
		resetPosition ? set(state.position, 0) : 1,
		set(state.time, 0),
		set(state.frameTime, 0),
		set(config.toValue, toValue),
		set(config.duration, duration),
		// and we restart
		startClock(clock)
	];

	const isNotDragging = and(
		neq(gestureState, State.ACTIVE),
		neq(gestureState, State.BEGAN)
	);

	const pendingPosition = () => cond(greaterThan(state.position, 180), 360, 0);

	const pendingRotate = () =>
		cond(
			greaterThan(state.position, 180),
			sub(360, state.position),
			state.position
		);

	// 180           - 1.0
	// pendingRotate - x
	const pendingDurationP = () => divide(pendingRotate(), 180);

const clock = memoize(new Clock());

  // snap focus to activeIndex when it updates
  useEffect(() => {
    if (activeIndex >= minIndex && activeIndex <= maxIndex) {
      nextIndex.setValue(activeIndex);
    }
  }, [activeIndex, minIndex, maxIndex]);

  // animatedIndex represents pager position with an animated value
  // this value is used to compute the transformations of the container screen
  // its also used to compute the offsets of child screens, and any other consumers
  const animatedIndex = memoize(
    block([
      cond(
        eq(gestureState, State.ACTIVE),
        [
          cond(clockRunning(clock), stopClock(clock)),
          // captures the initial drag value on first drag event
          cond(swiping, 0, [set(dragStart, position), set(swiping, TRUE)]),

          set(position, sub(dragStart, clampedDelta)),
        ],
        [
          // on release -- figure out if the index needs to change, and what index it should change to
          cond(swiping, [
            set(swiping, FALSE),
            cond(shouldTransition, [
              // rounds index change if pan gesture greater than just one screen
              set(indexChange, ceil(absChange)),
              // nextIndex set to the next snap point
              set(

_onRotateHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this._lastRotate += event.nativeEvent.rotation;
      this._rotate.setOffset(this._lastRotate);
      this._rotate.setValue(0);
    }
  };
  _onPinchHandlerStateChange = event => {

if (props.boundaries) {
        advance = withLimits(
          advance,
          props.boundaries[lowerBound],
          props.boundaries[upperBound]
        );
      }
      const last = new Value(Number.MAX_SAFE_INTEGER);
      const noMoveFrameCount = noMovementFrames[axis];
      const testMovementFrames = cond(
        eq(advance, last),
        set(noMoveFrameCount, add(noMoveFrameCount, 1)),
        [set(last, advance), set(noMoveFrameCount, 0)]
      );
      const step = cond(
        eq(state, State.ACTIVE),
        [
          cond(dragging, 0, [
            handleStartDrag,
            startClock(clock),
            set(dragging, 1),
            set(start, x),
          ]),
          set(anchor, add(start, drag)),
          cond(dt, dragBehaviors[axis]),
        ],
        [
          cond(clockRunning(clock), 0, startClock(clock)),
          cond(dragging, [updateSnapTo, set(dragging, 0)]),
          cond(dt, snapBehaviors[axis]),
          testMovementFrames,
          stopWhenNeeded,

this._onHandlerStateChange = event => {
      if (event.nativeEvent.oldState === State.ACTIVE) {
        this.state.transX.setOffset(0);
        this.state.transY.setOffset(0);
      }
      if (event.nativeEvent.oldState === State.ACTIVE) {
        const endOffsetX =
          event.nativeEvent.velocityX > 0
            ? Math.min(
                event.nativeEvent.translationX +
                  DRAG_TOSS * event.nativeEvent.velocityX,
                MAX_TRANS_HORIZONTAL - 100,
              )
            : Math.max(
                event.nativeEvent.translationX +
                  DRAG_TOSS * event.nativeEvent.velocityX,
                -MAX_TRANS_HORIZONTAL + 315,
              );

_onStateChange = event => {
    if (event.nativeEvent.state === State.ACTIVE)
    {
      this.setState({
        downHeading: this.state.heading,
        downPitch: this.state.pitch,
        downLocation: this.state.location,
      });
    }
  }

constructor(props) {
    super(props);
    const TOSS_SEC = 0.2;

    const dragX = new Value(0);
    const state = new Value(-1);
    const transX = new Value(0);
    const prevDragX = new Value(0);

    this._onGestureEvent = event([
      { nativeEvent: { translationX: dragX, state: state } },
    ]);

    this._transX = cond(
      eq(state, State.ACTIVE),
      [
        set(transX, add(transX, sub(dragX, prevDragX))),
        set(prevDragX, dragX),
        transX,
      ],
      [set(prevDragX, 0), transX]
    );

    this._transXA = interpolate(this._transX, {
      inputRange: [-120, 120],
      outputRange: [-100, 100],
    });
    this._transXB = interpolate(this._transX, {
      inputRange: [-120, -60, 60, 120],
      outputRange: [-60, -10, 10, 60],
    });

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 (

export const withOffset = ({
  offset,
  value,
  state: gestureState
}: {
  offset: Animated.Adaptable;
  value: Animated.Value;
  state: Animated.Value;
}) => {
  const safeOffset = new Value(0);
  return cond(
    eq(gestureState, State.ACTIVE),
    add(safeOffset, value),
    set(safeOffset, offset)
  );
};