simplified pan in v3 by using event.changeX

Author: relextm19

packages/docs-gesture-handler/static/examples/FlingGestureBasic.js

@@ -7,15 +7,12 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
+  clamp,
   withTiming,
   useSharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
 export default function App() {
   const translateX = useSharedValue(0);
   const startTranslateX = useSharedValue(0);

packages/docs-gesture-handler/static/examples/PanGestureBasic.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Animated, {
+  clamp,
   useSharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated';
@@ -10,15 +11,9 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
 export default function App() {
   const translationX = useSharedValue(0);
   const translationY = useSharedValue(0);
-  const prevTranslationX = useSharedValue(0);
-  const prevTranslationY = useSharedValue(0);
   const grabbing = useSharedValue(false);
   const maxTranslateX = useSharedValue(0);
   const maxTranslateY = useSharedValue(0);
@@ -60,17 +55,15 @@ export default function App() {
     minDistance: 1,
     onBegin: () => {
       grabbing.value = true;
-      prevTranslationX.value = translationX.value;
-      prevTranslationY.value = translationY.value;
     },
     onUpdate: (event) => {
       translationX.value = clamp(
-        prevTranslationX.value + event.translationX,
+        translationX.value + event.changeX,
         -maxTranslateX.value,
         maxTranslateX.value
       );
       translationY.value = clamp(
-        prevTranslationY.value + event.translationY,
+        translationX.value + event.changeY,
         -maxTranslateY.value,
         maxTranslateY.value
       );
@@ -81,8 +74,8 @@ export default function App() {
   });
 
   return (
-    <GestureHandlerRootView >
-      <View ref={containerRef} style={styles.container} >
+    <GestureHandlerRootView>
+      <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View style={[animatedStyles, styles.box]}></Animated.View>
         </GestureDetector>

packages/docs-gesture-handler/static/examples/PinchGestureBasic.js

@@ -6,20 +6,19 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
+  clamp,
   useSharedValue,
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';
 
-const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
-
 export default function App() {
   const boxWidth = useSharedValue(100);
   const distanceDifference = useSharedValue(0);
 
   const centerX = useSharedValue(0);
   const centerY = useSharedValue(0);
-  const maxBoxSize = useSharedValue(0) ;
+  const maxBoxSize = useSharedValue(0);
   const minBoxSize = 20;
 
   const pointerPositionX = useSharedValue(0);
@@ -97,7 +96,7 @@ export default function App() {
   }));
 
   return (
-    <GestureHandlerRootView >
+    <GestureHandlerRootView>
       <View ref={containerRef} style={[styles.container]}>
         <GestureDetector gesture={pan}>
           <Animated.View

packages/docs-gesture-handler/versioned_docs/version-2.x/examples/FlingGestureBasic.js

@@ -7,15 +7,12 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
+  clamp,
   withTiming,
   useSharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
 export default function App() {
   const translateX = useSharedValue(0);
   const startTranslateX = useSharedValue(0);

packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PanGestureBasic.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
+  clamp,
 } from 'react-native-reanimated';
 import {
   Gesture,
@@ -10,10 +11,6 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
 export default function App() {
   const translationX = useSharedValue(0);
   const translationY = useSharedValue(0);
@@ -38,7 +35,7 @@ export default function App() {
 
     containerRef.current.measureInWindow((x, y, width, height) => {
       maxTranslateX.value = width / 2 - 50;
-      maxTranslateY.value = height / 2;
+      maxTranslateY.value = height / 2 - 50;
     });
   };
 
@@ -80,7 +77,7 @@ export default function App() {
     });
 
   return (
-    <GestureHandlerRootView >
+    <GestureHandlerRootView>
       <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View style={[animatedStyles, styles.box]}></Animated.View>

packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasic.js

@@ -6,13 +6,12 @@ import {
 } from 'react-native-gesture-handler';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
+  clamp,
   useSharedValue,
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated';
 
-const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
-
 export default function App() {
   const boxWidth = useSharedValue(100);
   const distanceDifference = useSharedValue(0);

packages/docs-gesture-handler/versioned_docs/version-2.x/examples/PinchGestureBasicSrc.js

@@ -6,16 +6,13 @@ import {
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import Animated, {
+  clamp,
   useSharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
 const { width, height } = Dimensions.get('screen');
 
-function clamp(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
 export default function App() {
   const scale = useSharedValue(1);
   const startScale = useSharedValue(0);