1 files changed, 25 insertions, 9 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index f06a59ed6..c103e131b 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -16,9 +16,11 @@ import {
 import Animated, {
   runOnJS,
   SharedValue,
+  useAnimatedProps,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import {Image} from 'expo-image'
@@ -75,6 +77,7 @@ const ImageItem = ({
 }: Props) => {
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
   const [scaled, setScaled] = useState(false)
+  const isDragging = useSharedValue(false)
   const screenSizeDelayedForJSThreadOnly = useSafeAreaFrame()
   const maxZoomScale = Math.max(
     MIN_SCREEN_ZOOM,
@@ -86,11 +89,20 @@ const ImageItem = ({
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll(e) {
+      'worklet'
       const nextIsScaled = e.zoomScale > 1
       if (scaled !== nextIsScaled) {
         runOnJS(handleZoom)(nextIsScaled)
       }
     },
+    onBeginDrag() {
+      'worklet'
+      isDragging.value = true
+    },
+    onEndDrag() {
+      'worklet'
+      isDragging.value = false
+    },
   })
 
   function handleZoom(nextIsScaled: boolean) {
@@ -148,7 +160,7 @@ const ImageItem = ({
   )
 
   const containerStyle = useAnimatedStyle(() => {
-    const {scaleAndMoveTransform, isHidden} = transforms.value
+    const {scaleAndMoveTransform, isHidden} = transforms.get()
     return {
       flex: 1,
       transform: scaleAndMoveTransform,
@@ -158,7 +170,7 @@ const ImageItem = ({
 
   const imageCropStyle = useAnimatedStyle(() => {
     const screenSize = measureSafeArea()
-    const {cropFrameTransform} = transforms.value
+    const {cropFrameTransform} = transforms.get()
     return {
       overflow: 'hidden',
       transform: cropFrameTransform,
@@ -171,7 +183,7 @@ const ImageItem = ({
   })
 
   const imageStyle = useAnimatedStyle(() => {
-    const {cropContentTransform} = transforms.value
+    const {cropContentTransform} = transforms.get()
     return {
       transform: cropContentTransform,
       width: '100%',
@@ -184,13 +196,13 @@ const ImageItem = ({
   const [hasLoaded, setHasLoaded] = useState(false)
   useAnimatedReaction(
     () => {
-      return transforms.value.isResting && !hasLoaded
+      return transforms.get().isResting && !hasLoaded
     },
     (show, prevShow) => {
-      if (show && !prevShow) {
-        runOnJS(setShowLoader)(false)
-      } else if (!prevShow && show) {
+      if (!prevShow && show) {
         runOnJS(setShowLoader)(true)
+      } else if (prevShow && !show) {
+        runOnJS(setShowLoader)(false)
       }
     },
   )
@@ -199,6 +211,11 @@ const ImageItem = ({
   const borderRadius =
     type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
 
+  const scrollViewProps = useAnimatedProps(() => ({
+    // Don't allow bounce at 1:1 rest so it can be swiped away.
+    bounces: scaled || isDragging.value,
+  }))
+
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.ScrollView
@@ -210,8 +227,7 @@ const ImageItem = ({
         maximumZoomScale={maxZoomScale}
         onScroll={scrollHandler}
         style={containerStyle}
-        bounces={scaled}
-        bouncesZoom={true}
+        animatedProps={scrollViewProps}
         centerContent>
         {showLoader && (
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />