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

2 files changed, 51 insertions, 13 deletions

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index 927657baf..6276a1a14 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -22,7 +22,7 @@ import {Image} from 'expo-image'
 import useImageDimensions from '../../hooks/useImageDimensions'
 import usePanResponder from '../../hooks/usePanResponder'
 
-import {getImageStyles, getImageTransform} from '../../utils'
+import {getImageTransform} from '../../utils'
 import {ImageSource} from '../../@types'
 import {ImageLoading} from './ImageLoading'
 
@@ -133,4 +133,27 @@ const styles = StyleSheet.create({
   },
 })
 
+const getImageStyles = (
+  image: {width: number; height: number} | null,
+  translate: Animated.ValueXY,
+  scale?: Animated.Value,
+) => {
+  if (!image?.width || !image?.height) {
+    return {width: 0, height: 0}
+  }
+
+  const transform = translate.getTranslateTransform()
+
+  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)
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)