|
1 | 1 | import { useEffect, useRef, useState } from 'react'; |
2 | | -import { Image, Platform, Text, View, type GestureResponderEvent } from 'react-native'; |
| 2 | +import { Image, Platform, Pressable, Text, View, type GestureResponderEvent } from 'react-native'; |
3 | 3 | import { |
4 | 4 | Directions, |
5 | 5 | FlingGestureHandler, |
@@ -64,6 +64,7 @@ export function GestureLab() { |
64 | 64 | const [canaryReady, setCanaryReady] = useState(false); |
65 | 65 | const [transform, setTransform] = useState<TransformState>(initialTransform); |
66 | 66 | const [counts, setCounts] = useState<GestureCounts>(initialCounts); |
| 67 | + const [dragCompleted, setDragCompleted] = useState(false); |
67 | 68 | const transformRef = useRef<TransformState>(initialTransform); |
68 | 69 | const gestureStartRef = useRef<TransformState>(initialTransform); |
69 | 70 | const androidTouchStartRef = useRef<AndroidTouchStart | undefined>(undefined); |
@@ -191,6 +192,15 @@ export function GestureLab() { |
191 | 192 | .minDistance(4) |
192 | 193 | .runOnJS(true) |
193 | 194 | .onStart(handleTwoPointerPan); |
| 195 | + const holdDragGesture = Gesture.Pan() |
| 196 | + .activateAfterLongPress(500) |
| 197 | + .minDistance(10) |
| 198 | + .runOnJS(true) |
| 199 | + .onEnd((event, completed) => { |
| 200 | + if (completed && Math.hypot(event.translationX, event.translationY) > 60) { |
| 201 | + setDragCompleted(true); |
| 202 | + } |
| 203 | + }); |
194 | 204 | const legacyFlingRefs = [ |
195 | 205 | legacyFlingLeftRef, |
196 | 206 | legacyFlingRightRef, |
@@ -282,6 +292,32 @@ export function GestureLab() { |
282 | 292 | title="Gesture lab" |
283 | 293 | testID="gesture-lab-card" |
284 | 294 | > |
| 295 | + <View style={styles.dragRow} testID="drag-gesture-fixture"> |
| 296 | + <GestureDetector gesture={holdDragGesture}> |
| 297 | + <Pressable |
| 298 | + accessibilityLabel="Drag source" |
| 299 | + accessibilityRole="button" |
| 300 | + onPress={() => undefined} |
| 301 | + style={styles.dragEndpoint} |
| 302 | + testID="drag-source" |
| 303 | + > |
| 304 | + <Text style={styles.dragEndpointLabel}>Source</Text> |
| 305 | + </Pressable> |
| 306 | + </GestureDetector> |
| 307 | + <Pressable |
| 308 | + accessibilityLabel="Drag destination" |
| 309 | + accessibilityRole="button" |
| 310 | + onPress={() => undefined} |
| 311 | + style={styles.dragEndpoint} |
| 312 | + testID="drag-destination" |
| 313 | + > |
| 314 | + <Text style={styles.dragEndpointLabel}>Destination</Text> |
| 315 | + </Pressable> |
| 316 | + </View> |
| 317 | + <Text style={styles.metric} testID="drag-gesture-status"> |
| 318 | + drag completed {dragCompleted ? 'yes' : 'no'} |
| 319 | + </Text> |
| 320 | + |
285 | 321 | <View |
286 | 322 | accessibilityLabel="Gesture test image" |
287 | 323 | onTouchEnd={ |
|
0 commit comments