CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native

—

Pending
Overview
Eval results
Files

constants.mddocs/

Constants and Enums

Essential constants for gesture states, directions, pointer types, and mouse button handling across all gesture interactions.

Capabilities

State Constants

Gesture handler state constants representing different phases of gesture recognition.

/**
 * Gesture handler state constants
 * Represents the current state of a gesture recognizer
 */
const State: {
  readonly UNDETERMINED: 0;
  readonly FAILED: 1;
  readonly BEGAN: 2;
  readonly CANCELLED: 3;
  readonly ACTIVE: 4;
  readonly END: 5;
};

Usage Example:

import React from "react";
import { GestureDetector, Gesture, State } from "react-native-gesture-handler";

function StateExample() {
  const tapGesture = Gesture.Tap()
    .onBegin((event) => {
      console.log("State:", event.state === State.BEGAN ? "BEGAN" : "Other");
    })
    .onStart((event) => {
      console.log("State:", event.state === State.ACTIVE ? "ACTIVE" : "Other");
    })
    .onEnd((event) => {
      if (event.state === State.END) {
        console.log("Gesture completed successfully");
      } else if (event.state === State.FAILED) {
        console.log("Gesture failed");
      } else if (event.state === State.CANCELLED) {
        console.log("Gesture was cancelled");
      }
    });

  return (
    <GestureDetector gesture={tapGesture}>
      {/* Your component */}
    </GestureDetector>
  );
}

State Descriptions:

  • UNDETERMINED (0): Initial state, gesture recognizer hasn't determined if this is the gesture it's looking for
  • FAILED (1): Gesture recognition failed, this gesture will not be recognized
  • BEGAN (2): Gesture has been detected and is about to start
  • CANCELLED (3): Gesture was cancelled (e.g., by system interruption)
  • ACTIVE (4): Gesture is currently active and being tracked
  • END (5): Gesture has ended successfully

Direction Constants

Direction constants used for gesture configuration, particularly with fling gestures and pan gesture constraints.

/**
 * Direction constants for gesture configuration
 * Can be combined using bitwise OR for multiple directions
 */
const Directions: {
  readonly RIGHT: 1;
  readonly LEFT: 2;
  readonly UP: 4;
  readonly DOWN: 8;
};

Usage Example:

import React from "react";
import { GestureDetector, Gesture, Directions } from "react-native-gesture-handler";

function DirectionExample() {
  // Fling gesture that only responds to left or right swipes
  const horizontalFling = Gesture.Fling()
    .direction(Directions.LEFT | Directions.RIGHT)
    .onStart(() => {
      console.log("Horizontal fling detected");
    });

  // Fling gesture that only responds to up swipes
  const upwardFling = Gesture.Fling()
    .direction(Directions.UP)
    .onStart(() => {
      console.log("Upward fling detected");
    });

  // Fling gesture that responds to any direction
  const anyDirectionFling = Gesture.Fling()
    .direction(Directions.UP | Directions.DOWN | Directions.LEFT | Directions.RIGHT)
    .onStart(() => {
      console.log("Fling in any direction detected");
    });

  return (
    <GestureDetector gesture={Gesture.Race(horizontalFling, upwardFling)}>
      {/* Your component */}
    </GestureDetector>
  );
}

Direction Values:

  • RIGHT (1): Rightward direction
  • LEFT (2): Leftward direction
  • UP (4): Upward direction
  • DOWN (8): Downward direction

Combining Directions:

// Multiple directions using bitwise OR
const horizontal = Directions.LEFT | Directions.RIGHT; // 3
const vertical = Directions.UP | Directions.DOWN; // 12
const all = Directions.LEFT | Directions.RIGHT | Directions.UP | Directions.DOWN; // 15

Pointer Type Enum

Enumeration of different pointer input types for distinguishing between touch, stylus, mouse, and other input methods.

/**
 * Pointer input type enumeration
 * Identifies the type of input device generating the gesture
 */
enum PointerType {
  TOUCH = 0,
  STYLUS = 1,
  MOUSE = 2,
  KEY = 3,
  OTHER = 4,
}

Usage Example:

import React from "react";
import { GestureDetector, Gesture, PointerType } from "react-native-gesture-handler";

function PointerTypeExample() {
  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      // Note: PointerType information is typically available in raw touch events
      // This is more commonly used in lower-level event processing
      console.log("Pan gesture update:", event.translationX, event.translationY);
    });

  return (
    <GestureDetector gesture={panGesture}>
      {/* Your component */}
    </GestureDetector>
  );
}

Pointer Types:

  • TOUCH (0): Touch screen input (fingers)
  • STYLUS (1): Stylus or pen input
  • MOUSE (2): Mouse input
  • KEY (3): Keyboard input
  • OTHER (4): Other input methods

Mouse Button Enum

Mouse button constants for handling mouse-specific interactions, particularly useful for web and desktop platforms.

/**
 * Mouse button enumeration
 * Identifies which mouse buttons are pressed during gesture events
 */
enum MouseButton {
  LEFT = 1,
  RIGHT = 2,
  MIDDLE = 4,
  BUTTON_4 = 8,
  BUTTON_5 = 16,
  ALL = 31,
}

Usage Example:

import React from "react";
import { GestureDetector, Gesture, MouseButton } from "react-native-gesture-handler";

function MouseButtonExample() {
  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      // Mouse button information is available in web/desktop environments
      console.log("Pan gesture with mouse interaction");
    });

  const tapGesture = Gesture.Tap()
    .onEnd(() => {
      console.log("Click detected");
    });

  return (
    <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
      {/* Your component */}
    </GestureDetector>
  );
}

Mouse Button Values:

  • LEFT (1): Left mouse button
  • RIGHT (2): Right mouse button
  • MIDDLE (4): Middle mouse button (scroll wheel)
  • BUTTON_4 (8): Additional mouse button 4
  • BUTTON_5 (16): Additional mouse button 5
  • ALL (31): All mouse buttons (bitwise combination of all above)

Combining Mouse Buttons:

// Check for multiple buttons using bitwise operations
const leftAndRight = MouseButton.LEFT | MouseButton.RIGHT; // 3
const anyButton = MouseButton.ALL; // 31

// Check if specific button is pressed (in event handler)
function checkMouseButton(buttonState: number) {
  if (buttonState & MouseButton.LEFT) {
    console.log("Left button is pressed");
  }
  if (buttonState & MouseButton.RIGHT) {
    console.log("Right button is pressed");
  }
  if (buttonState & MouseButton.MIDDLE) {
    console.log("Middle button is pressed");
  }
}

Platform-Specific Usage

iOS Considerations

// iOS-specific gesture state handling
import { State } from "react-native-gesture-handler";

function iOSGestureHandling() {
  const gesture = Gesture.Pan()
    .onEnd((event) => {
      // iOS provides detailed state information
      if (event.state === State.END) {
        console.log("Gesture completed on iOS");
      }
    });
}

Android Considerations

// Android-specific direction handling
import { Directions } from "react-native-gesture-handler";

function androidGestureHandling() {
  const flingGesture = Gesture.Fling()
    .direction(Directions.LEFT | Directions.RIGHT)
    .onStart(() => {
      console.log("Horizontal fling on Android");
    });
}

Web Considerations

// Web-specific mouse button handling
import { MouseButton } from "react-native-gesture-handler";

function webGestureHandling() {
  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      // Web environment provides mouse button information
      console.log("Pan gesture on web");
    });

  // Web-specific hover gesture
  const hoverGesture = Gesture.Hover()
    .onStart(() => {
      console.log("Mouse hover started");
    })
    .onEnd(() => {
      console.log("Mouse hover ended");
    });
}

Utility Functions

State Checking Utilities

Helper functions for working with gesture states:

import { State } from "react-native-gesture-handler";

/**
 * Check if gesture is in an active state
 */
function isGestureActive(state: number): boolean {
  return state === State.ACTIVE || state === State.BEGAN;
}

/**
 * Check if gesture has completed successfully
 */
function isGestureComplete(state: number): boolean {
  return state === State.END;
}

/**
 * Check if gesture has failed or was cancelled
 */
function isGestureFailed(state: number): boolean {
  return state === State.FAILED || state === State.CANCELLED;
}

// Usage example
const panGesture = Gesture.Pan()
  .onEnd((event) => {
    if (isGestureComplete(event.state)) {
      console.log("Pan completed successfully");
    } else if (isGestureFailed(event.state)) {
      console.log("Pan failed or was cancelled");
    }
  });

Direction Utilities

Helper functions for working with directions:

import { Directions } from "react-native-gesture-handler";

/**
 * Check if direction includes horizontal movement
 */
function isHorizontalDirection(direction: number): boolean {
  return (direction & (Directions.LEFT | Directions.RIGHT)) !== 0;
}

/**
 * Check if direction includes vertical movement  
 */
function isVerticalDirection(direction: number): boolean {
  return (direction & (Directions.UP | Directions.DOWN)) !== 0;
}

/**
 * Get all allowed directions as array
 */
function getDirectionNames(direction: number): string[] {
  const directions: string[] = [];
  if (direction & Directions.LEFT) directions.push("LEFT");
  if (direction & Directions.RIGHT) directions.push("RIGHT");
  if (direction & Directions.UP) directions.push("UP");
  if (direction & Directions.DOWN) directions.push("DOWN");
  return directions;
}

// Usage example
const flingDirection = Directions.LEFT | Directions.UP;
console.log("Allowed directions:", getDirectionNames(flingDirection)); // ["LEFT", "UP"]
console.log("Is horizontal:", isHorizontalDirection(flingDirection)); // true
console.log("Is vertical:", isVerticalDirection(flingDirection)); // true

Constants in Legacy API

When using the deprecated legacy gesture handler components, these same constants apply:

import React from "react";
import { PanGestureHandler, State, Directions } from "react-native-gesture-handler";

// Legacy usage (deprecated)
function LegacyGestureHandler() {
  const handleStateChange = (event) => {
    if (event.nativeEvent.state === State.END) {
      console.log("Legacy pan gesture ended");
    }
  };

  return (
    <PanGestureHandler onHandlerStateChange={handleStateChange}>
      {/* Child component */}
    </PanGestureHandler>
  );
}

The constants maintain the same values and behavior across both legacy and modern APIs, ensuring consistency and easy migration.

Install with Tessl CLI

npx tessl i tessl/npm-react-native-gesture-handler

docs

advanced-components.md

buttons.md

components.md

constants.md

events.md

gestures.md

index.md

setup.md

tile.json