diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 766e469bb1..0e4f73631c 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -104,11 +104,12 @@ function ImageViewing({ transform: [{translateY: dismissSwipeTranslateY.value}], } } - if (thumbDims) { + if (thumbDims && images[imageIndex].dimensions) { const interpolatedTransform = interpolateTransform( openProgress.value, thumbDims, SCREEN, + images[imageIndex].dimensions, ) return { pointerEvents: 'none', @@ -333,6 +334,7 @@ function interpolateTransform( height: number }, screenSize: {width: number; height: number}, + imageDims: {width: number; height: number}, ) { 'worklet' const screenCenterX = screenSize.width / 2 @@ -342,7 +344,14 @@ function interpolateTransform( const initialTranslateX = thumbnailCenterX - screenCenterX const initialTranslateY = thumbnailCenterY - screenCenterY - const initialScale = thumbnailDims.width / screenSize.width + let initialScale = thumbnailDims.width / screenSize.width + + const imageAspect = imageDims.width / imageDims.height + const finalWidth = screenSize.width + const finalHeight = finalWidth / imageAspect + if (initialScale * finalHeight < thumbnailDims.height) { + initialScale = initialScale * imageAspect + } const translateX = interpolate(progress, [0, 1], [initialTranslateX, 0]) const translateY = interpolate(progress, [0, 1], [initialTranslateY, 0]) @@ -422,7 +431,14 @@ function ImageViewingRoot({ React.useEffect(() => { if (nextLightbox) { - openProgress.value = withClampedSpring(1) + if ( + nextLightbox.images[nextLightbox.index].dimensions && + nextLightbox.thumbDims + ) { + openProgress.value = withClampedSpring(1) + } else { + openProgress.value = 1 + } } else { openProgress.value = withClampedSpring(0) }