diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -382,7 +382,6 @@
         curX,
         curY,
       ),
-      this.panUpdate(panActive, panTranslationX, panTranslationY, curX, curY),
       this.singleTapUpdate(
         singleTapState,
         singleTapX,
@@ -534,23 +533,6 @@
     );
   }
 
-  panUpdate(
-    // Inputs
-    panActive: Node,
-    panTranslationX: Node,
-    panTranslationY: Node,
-    // Outputs
-    curX: Value,
-    curY: Value,
-  ): Node {
-    const deltaX = panDelta(panTranslationX, panActive);
-    const deltaY = panDelta(panTranslationY, panActive);
-    return cond(
-      [deltaX, deltaY, panActive],
-      [set(curX, add(curX, deltaX)), set(curY, add(curY, deltaY))],
-    );
-  }
-
   singleTapUpdate(
     // Inputs
     singleTapState: Node,
@@ -1208,8 +1190,6 @@
       });
     }, [mediaIconsDimensions]);
 
-    // TODO: use this in the next diffs
-    // eslint-disable-next-line no-unused-vars
     const outsideButtons = React.useCallback(
       (x: number, y: number): boolean => {
         'worklet';
@@ -1240,9 +1220,58 @@
       ],
     );
 
+    const curX = useSharedValue(0);
+    const curY = useSharedValue(0);
+
+    const panActive = useSharedValue(false);
+
+    const lastPanTranslationX = useSharedValue(0);
+    const lastPanTranslationY = useSharedValue(0);
+
+    const panStart = React.useCallback(
+      ({
+        absoluteX,
+        absoluteY,
+        translationX,
+        translationY,
+      }: PanGestureEvent) => {
+        'worklet';
+        lastPanTranslationX.value = 0;
+        lastPanTranslationY.value = 0;
+        panActive.value = outsideButtons(
+          absoluteX - translationX,
+          absoluteY - translationY,
+        );
+      },
+      [lastPanTranslationX, lastPanTranslationY, outsideButtons, panActive],
+    );
+
+    const panUpdate = React.useCallback(
+      ({ translationX, translationY }: PanGestureEvent) => {
+        'worklet';
+        if (!panActive.value) {
+          return;
+        }
+        curX.value += translationX - lastPanTranslationX.value;
+        curY.value += translationY - lastPanTranslationY.value;
+        lastPanTranslationX.value = translationX;
+        lastPanTranslationY.value = translationY;
+      },
+      [curX, curY, lastPanTranslationX, lastPanTranslationY, panActive],
+    );
+
+    const panEnd = React.useCallback(() => {
+      'worklet';
+      panActive.value = false;
+    }, [panActive]);
+
     const gesture = React.useMemo(() => {
       const pinchGesture = Gesture.Pinch();
-      const panGesture = Gesture.Pan().averageTouches(true);
+      const panGesture = Gesture.Pan()
+        .averageTouches(true)
+        .onStart(panStart)
+        .onUpdate(panUpdate)
+        .onEnd(panEnd);
       const doubleTapGesture = Gesture.Tap().numberOfTaps(2);
       const singleTapGesture = Gesture.Tap().numberOfTaps(1);
 
@@ -1251,7 +1280,7 @@
         doubleTapGesture,
         singleTapGesture,
       );
-    }, []);
+    }, [panEnd, panStart, panUpdate]);
 
     return (
       <FullScreenViewModal