diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 5775691c6e..16da4e002f 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -100,40 +100,24 @@ function ImageViewing({ } }) - const initialTransform = calculateOverlayTransform(SCREEN, thumbDims) + const initialTransform = calculateInitialTransform(SCREEN, thumbDims) const activeImageStyle = useAnimatedStyle(() => { if (openProgress.value === 1) { return { transform: [{translateY: dismissSwipeTranslateY.value}], } } - if (!initialTransform) { - return {} + if (initialTransform) { + const interpolatedTransform = interpolateTransform( + openProgress.value, + initialTransform, + ) + return { + transform: interpolatedTransform, + } } return { - transform: [ - { - scale: interpolate( - openProgress.value, - [0, 1], - [initialTransform.scale, 1], - ), - }, - { - translateX: interpolate( - openProgress.value, - [0, 1], - [initialTransform.translateX, 0], - ), - }, - { - translateY: interpolate( - openProgress.value, - [0, 1], - [initialTransform.translateY, 0], - ), - }, - ], + transform: [], } }) @@ -331,7 +315,7 @@ function LightboxFooter({ ) } -function calculateOverlayTransform( +function calculateInitialTransform( screenSize: {width: number; height: number}, thumbnailPlacement: | { @@ -358,6 +342,36 @@ function calculateOverlayTransform( return {scale, translateX, translateY} } +function interpolateTransform( + progress: number, + initialTransform: { + translateX: number + translateY: number + scale: number + }, +) { + 'worklet' + return [ + { + scale: interpolate(progress, [0, 1], [initialTransform.scale, 1]), + }, + { + translateX: interpolate( + progress, + [0, 1], + [initialTransform.translateX, 0], + ), + }, + { + translateY: interpolate( + progress, + [0, 1], + [initialTransform.translateY, 0], + ), + }, + ] +} + const styles = StyleSheet.create({ screen: { position: 'absolute',