Lift the swipe animated value upwards

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -3,6 +3,7 @@ import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
+  SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
@@ -43,6 +44,7 @@ type Props = {
   onZoom: (isZoomed: boolean) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
+  dismissSwipeTranslateY: SharedValue<number>
 }
 const ImageItem = ({
   imageSrc,
@@ -50,6 +52,7 @@ const ImageItem = ({
   onZoom,
   onRequestClose,
   isScrollViewBeingDragged,
+  dismissSwipeTranslateY,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
   const [imageAspect, imageDimensions] = useImageDimensions({
@@ -61,7 +64,6 @@ const ImageItem = ({
   const pinchOrigin = useSharedValue({x: 0, y: 0})
   const pinchScale = useSharedValue(1)
   const pinchTranslation = useSharedValue({x: 0, y: 0})
-  const dismissSwipeTranslateY = useSharedValue(0)
   const containerRef = useAnimatedRef()
 
   // Keep track of when we're entering or leaving scaled rendering.

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -12,9 +12,9 @@ import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   interpolate,
   runOnJS,
+  SharedValue,
   useAnimatedRef,
   useAnimatedStyle,
-  useSharedValue,
 } from 'react-native-reanimated'
 import {Image} from 'expo-image'
 
@@ -35,6 +35,7 @@ type Props = {
   onZoom: (scaled: boolean) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
+  dismissSwipeTranslateY: SharedValue<number>
 }
 
 const ImageItem = ({
@@ -43,9 +44,10 @@ const ImageItem = ({
   onZoom,
   onRequestClose,
   showControls,
+  dismissSwipeTranslateY,
 }: Props) => {
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
-  const translationY = useSharedValue(0)
+
   const [scaled, setScaled] = useState(false)
   const [imageAspect, imageDimensions] = useImageDimensions({
     src: imageSrc.uri,
@@ -58,7 +60,7 @@ const ImageItem = ({
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: interpolate(
-        translationY.value,
+        dismissSwipeTranslateY.value,
         [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
         [0.5, 1, 0.5],
       ),
@@ -68,7 +70,7 @@ const ImageItem = ({
   const scrollHandler = useAnimatedScrollHandler({
     onScroll(e) {
       const nextIsScaled = e.zoomScale > 1
-      translationY.value = nextIsScaled ? 0 : e.contentOffset.y
+      dismissSwipeTranslateY.value = nextIsScaled ? 0 : e.contentOffset.y
       if (scaled !== nextIsScaled) {
         runOnJS(handleZoom)(nextIsScaled)
       }

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import {View} from 'react-native'
+import {SharedValue} from 'react-native-reanimated'
 
 import {ImageSource} from '../../@types'
 
@@ -12,6 +13,7 @@ type Props = {
   onZoom: (scaled: boolean) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
+  dismissSwipeTranslateY: SharedValue<number>
 }
 
 const ImageItem = (_props: Props) => {

src/view/com/lightbox/ImageViewing/index.tsx

@@ -18,7 +18,11 @@ import {
 } from 'react-native'
 import PagerView from 'react-native-pager-view'
 import {MeasuredDimensions} from 'react-native-reanimated'
-import Animated, {useAnimatedStyle, withSpring} from 'react-native-reanimated'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Edge, SafeAreaView} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -62,6 +66,7 @@ function ImageViewing({
   const [imageIndex, setImageIndex] = useState(initialImageIndex)
   const [showControls, setShowControls] = useState(true)
 
+  const dismissSwipeTranslateY = useSharedValue(0)
   const animatedHeaderStyle = useAnimatedStyle(() => ({
     pointerEvents: showControls ? 'auto' : 'none',
     opacity: withClampedSpring(showControls ? 1 : 0),
@@ -134,6 +139,7 @@ function ImageViewing({
                 onRequestClose={onRequestClose}
                 isScrollViewBeingDragged={isDragging}
                 showControls={showControls}
+                dismissSwipeTranslateY={dismissSwipeTranslateY}
               />
             </View>
           ))}