0
# Constants and Enums
1

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

4
## Capabilities
5

6
### State Constants
7

8
Gesture handler state constants representing different phases of gesture recognition.
9

10
```typescript { .api }
11
/**
12
 * Gesture handler state constants
13
 * Represents the current state of a gesture recognizer
14
 */
15
const State: {
16
  readonly UNDETERMINED: 0;
17
  readonly FAILED: 1;
18
  readonly BEGAN: 2;
19
  readonly CANCELLED: 3;
20
  readonly ACTIVE: 4;
21
  readonly END: 5;
22
};
23
```
24

25
**Usage Example:**
26

27
```typescript
28
import React from "react";
29
import { GestureDetector, Gesture, State } from "react-native-gesture-handler";
30

31
function StateExample() {
32
  const tapGesture = Gesture.Tap()
33
    .onBegin((event) => {
34
      console.log("State:", event.state === State.BEGAN ? "BEGAN" : "Other");
35
    })
36
    .onStart((event) => {
37
      console.log("State:", event.state === State.ACTIVE ? "ACTIVE" : "Other");
38
    })
39
    .onEnd((event) => {
40
      if (event.state === State.END) {
41
        console.log("Gesture completed successfully");
42
      } else if (event.state === State.FAILED) {
43
        console.log("Gesture failed");
44
      } else if (event.state === State.CANCELLED) {
45
        console.log("Gesture was cancelled");
46
      }
47
    });
48

49
  return (
50
    <GestureDetector gesture={tapGesture}>
51
      {/* Your component */}
52
    </GestureDetector>
53
  );
54
}
55
```
56

57
**State Descriptions:**
58

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

66
### Direction Constants
67

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

70
```typescript { .api }
71
/**
72
 * Direction constants for gesture configuration
73
 * Can be combined using bitwise OR for multiple directions
74
 */
75
const Directions: {
76
  readonly RIGHT: 1;
77
  readonly LEFT: 2;
78
  readonly UP: 4;
79
  readonly DOWN: 8;
80
};
81
```
82

83
**Usage Example:**
84

85
```typescript
86
import React from "react";
87
import { GestureDetector, Gesture, Directions } from "react-native-gesture-handler";
88

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

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

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

111
  return (
112
    <GestureDetector gesture={Gesture.Race(horizontalFling, upwardFling)}>
113
      {/* Your component */}
114
    </GestureDetector>
115
  );
116
}
117
```
118

119
**Direction Values:**
120

121
- **RIGHT (1)**: Rightward direction
122
- **LEFT (2)**: Leftward direction  
123
- **UP (4)**: Upward direction
124
- **DOWN (8)**: Downward direction
125

126
**Combining Directions:**
127

128
```typescript
129
// Multiple directions using bitwise OR
130
const horizontal = Directions.LEFT | Directions.RIGHT; // 3
131
const vertical = Directions.UP | Directions.DOWN; // 12
132
const all = Directions.LEFT | Directions.RIGHT | Directions.UP | Directions.DOWN; // 15
133
```
134

135
### Pointer Type Enum
136

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

139
```typescript { .api }
140
/**
141
 * Pointer input type enumeration
142
 * Identifies the type of input device generating the gesture
143
 */
144
enum PointerType {
145
  TOUCH = 0,
146
  STYLUS = 1,
147
  MOUSE = 2,
148
  KEY = 3,
149
  OTHER = 4,
150
}
151
```
152

153
**Usage Example:**
154

155
```typescript
156
import React from "react";
157
import { GestureDetector, Gesture, PointerType } from "react-native-gesture-handler";
158

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

167
  return (
168
    <GestureDetector gesture={panGesture}>
169
      {/* Your component */}
170
    </GestureDetector>
171
  );
172
}
173
```
174

175
**Pointer Types:**
176

177
- **TOUCH (0)**: Touch screen input (fingers)
178
- **STYLUS (1)**: Stylus or pen input
179
- **MOUSE (2)**: Mouse input
180
- **KEY (3)**: Keyboard input
181
- **OTHER (4)**: Other input methods
182

183
### Mouse Button Enum
184

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

187
```typescript { .api }
188
/**
189
 * Mouse button enumeration
190
 * Identifies which mouse buttons are pressed during gesture events
191
 */
192
enum MouseButton {
193
  LEFT = 1,
194
  RIGHT = 2,
195
  MIDDLE = 4,
196
  BUTTON_4 = 8,
197
  BUTTON_5 = 16,
198
  ALL = 31,
199
}
200
```
201

202
**Usage Example:**
203

204
```typescript
205
import React from "react";
206
import { GestureDetector, Gesture, MouseButton } from "react-native-gesture-handler";
207

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

215
  const tapGesture = Gesture.Tap()
216
    .onEnd(() => {
217
      console.log("Click detected");
218
    });
219

220
  return (
221
    <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
222
      {/* Your component */}
223
    </GestureDetector>
224
  );
225
}
226
```
227

228
**Mouse Button Values:**
229

230
- **LEFT (1)**: Left mouse button
231
- **RIGHT (2)**: Right mouse button
232
- **MIDDLE (4)**: Middle mouse button (scroll wheel)
233
- **BUTTON_4 (8)**: Additional mouse button 4
234
- **BUTTON_5 (16)**: Additional mouse button 5
235
- **ALL (31)**: All mouse buttons (bitwise combination of all above)
236

237
**Combining Mouse Buttons:**
238

239
```typescript
240
// Check for multiple buttons using bitwise operations
241
const leftAndRight = MouseButton.LEFT | MouseButton.RIGHT; // 3
242
const anyButton = MouseButton.ALL; // 31
243

244
// Check if specific button is pressed (in event handler)
245
function checkMouseButton(buttonState: number) {
246
  if (buttonState & MouseButton.LEFT) {
247
    console.log("Left button is pressed");
248
  }
249
  if (buttonState & MouseButton.RIGHT) {
250
    console.log("Right button is pressed");
251
  }
252
  if (buttonState & MouseButton.MIDDLE) {
253
    console.log("Middle button is pressed");
254
  }
255
}
256
```
257

258
## Platform-Specific Usage
259

260
### iOS Considerations
261

262
```typescript
263
// iOS-specific gesture state handling
264
import { State } from "react-native-gesture-handler";
265

266
function iOSGestureHandling() {
267
  const gesture = Gesture.Pan()
268
    .onEnd((event) => {
269
      // iOS provides detailed state information
270
      if (event.state === State.END) {
271
        console.log("Gesture completed on iOS");
272
      }
273
    });
274
}
275
```
276

277
### Android Considerations
278

279
```typescript
280
// Android-specific direction handling
281
import { Directions } from "react-native-gesture-handler";
282

283
function androidGestureHandling() {
284
  const flingGesture = Gesture.Fling()
285
    .direction(Directions.LEFT | Directions.RIGHT)
286
    .onStart(() => {
287
      console.log("Horizontal fling on Android");
288
    });
289
}
290
```
291

292
### Web Considerations
293

294
```typescript
295
// Web-specific mouse button handling
296
import { MouseButton } from "react-native-gesture-handler";
297

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

305
  // Web-specific hover gesture
306
  const hoverGesture = Gesture.Hover()
307
    .onStart(() => {
308
      console.log("Mouse hover started");
309
    })
310
    .onEnd(() => {
311
      console.log("Mouse hover ended");
312
    });
313
}
314
```
315

316
## Utility Functions
317

318
### State Checking Utilities
319

320
Helper functions for working with gesture states:
321

322
```typescript
323
import { State } from "react-native-gesture-handler";
324

325
/**
326
 * Check if gesture is in an active state
327
 */
328
function isGestureActive(state: number): boolean {
329
  return state === State.ACTIVE || state === State.BEGAN;
330
}
331

332
/**
333
 * Check if gesture has completed successfully
334
 */
335
function isGestureComplete(state: number): boolean {
336
  return state === State.END;
337
}
338

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

346
// Usage example
347
const panGesture = Gesture.Pan()
348
  .onEnd((event) => {
349
    if (isGestureComplete(event.state)) {
350
      console.log("Pan completed successfully");
351
    } else if (isGestureFailed(event.state)) {
352
      console.log("Pan failed or was cancelled");
353
    }
354
  });
355
```
356

357
### Direction Utilities
358

359
Helper functions for working with directions:
360

361
```typescript
362
import { Directions } from "react-native-gesture-handler";
363

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

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

378
/**
379
 * Get all allowed directions as array
380
 */
381
function getDirectionNames(direction: number): string[] {
382
  const directions: string[] = [];
383
  if (direction & Directions.LEFT) directions.push("LEFT");
384
  if (direction & Directions.RIGHT) directions.push("RIGHT");
385
  if (direction & Directions.UP) directions.push("UP");
386
  if (direction & Directions.DOWN) directions.push("DOWN");
387
  return directions;
388
}
389

390
// Usage example
391
const flingDirection = Directions.LEFT | Directions.UP;
392
console.log("Allowed directions:", getDirectionNames(flingDirection)); // ["LEFT", "UP"]
393
console.log("Is horizontal:", isHorizontalDirection(flingDirection)); // true
394
console.log("Is vertical:", isVerticalDirection(flingDirection)); // true
395
```
396

397
## Constants in Legacy API
398

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

401
```typescript
402
import React from "react";
403
import { PanGestureHandler, State, Directions } from "react-native-gesture-handler";
404

405
// Legacy usage (deprecated)
406
function LegacyGestureHandler() {
407
  const handleStateChange = (event) => {
408
    if (event.nativeEvent.state === State.END) {
409
      console.log("Legacy pan gesture ended");
410
    }
411
  };
412

413
  return (
414
    <PanGestureHandler onHandlerStateChange={handleStateChange}>
415
      {/* Child component */}
416
    </PanGestureHandler>
417
  );
418
}
419
```
420

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