From 4ec5fabdd1c1b70fd8a3f5671c056bba3d38e174 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 5 Oct 2023 23:52:04 +0100
Subject: Fix animations and gestures getting reset on state updates in the
 lightbox (#1618)

* Fix translation resetting on state update

* Copy getImageStyles into iOS and Android forks

* Fix opacity resetting on state update
---
 .../components/ImageItem/ImageItem.ios.tsx         | 39 +++++++++++++++-------
 1 file changed, 27 insertions(+), 12 deletions(-)

(limited to 'src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx')

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 f379df22f..b9f3ae510 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -23,7 +23,7 @@ import {Image} from 'expo-image'
 
 import useImageDimensions from '../../hooks/useImageDimensions'
 
-import {getImageStyles, getImageTransform} from '../../utils'
+import {getImageTransform} from '../../utils'
 import {ImageSource} from '../../@types'
 import {ImageLoading} from './ImageLoading'
 
@@ -52,23 +52,14 @@ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
   const [scaled, setScaled] = useState(false)
   const imageDimensions = useImageDimensions(imageSrc)
   const [translate, scale] = getImageTransform(imageDimensions, SCREEN)
-
-  // TODO: It's not valid to reinitialize Animated values during render.
-  // This is a bug.
-  const scrollValueY = new Animated.Value(0)
-  const scaleValue = new Animated.Value(scale || 1)
-  const translateValue = new Animated.ValueXY(translate)
+  const [scrollValueY] = useState(() => new Animated.Value(0))
   const maxScrollViewZoom = MAX_SCALE / (scale || 1)
 
   const imageOpacity = scrollValueY.interpolate({
     inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
     outputRange: [0.5, 1, 0.5],
   })
-  const imagesStyles = getImageStyles(
-    imageDimensions,
-    translateValue,
-    scaleValue,
-  )
+  const imagesStyles = getImageStyles(imageDimensions, translate, scale || 1)
   const imageStylesWithOpacity = {...imagesStyles, opacity: imageOpacity}
 
   const onScrollEndDrag = useCallback(
@@ -260,4 +251,28 @@ const getZoomRectAfterDoubleTap = (
   }
 }
 
+const getImageStyles = (
+  image: {width: number; height: number} | null,
+  translate: {readonly x: number; readonly y: number} | undefined,
+  scale?: number,
+) => {
+  if (!image?.width || !image?.height) {
+    return {width: 0, height: 0}
+  }
+  const transform = []
+  if (translate) {
+    transform.push({translateX: translate.x})
+    transform.push({translateY: translate.y})
+  }
+  if (scale) {
+    // @ts-ignore TODO - is scale incorrect? might need to remove -prf
+    transform.push({scale}, {perspective: new Animated.Value(1000)})
+  }
+  return {
+    width: image.width,
+    height: image.height,
+    transform,
+  }
+}
+
 export default React.memo(ImageItem)
-- 
cgit 1.4.1

