Extract gesture logic from MultiGestureCanvas to hooks and improve code

src/components/Attachments/AttachmentCarousel/Pager/index.js

@@ -69,7 +69,7 @@ function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelecte
     const shouldPagerScroll = useSharedValue(true);
     const pagerRef = useRef(null);
 
-    const isScrolling = useSharedValue(false);
+    const isSwipingHorizontally = useSharedValue(false);
     const activeIndex = useSharedValue(initialIndex);
 
     const pageScrollHandler = usePageScrollHandler(
@@ -78,7 +78,7 @@ function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelecte
                 'worklet';
 
                 activeIndex.value = e.position;
-                isScrolling.value = e.offset !== 0;
+                isSwipingHorizontally.value = e.offset !== 0;
             },
         },
         [],
@@ -94,7 +94,7 @@ function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelecte
     // we use reanimated for this since onPageSelected is called
     // in the middle of the pager animation
     useAnimatedReaction(
-        () => isScrolling.value,
+        () => isSwipingHorizontally.value,
         (stillScrolling) => {
             if (stillScrolling) {
                 return;
@@ -118,7 +118,7 @@ function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelecte
 
     const contextValue = useMemo(
         () => ({
-            isScrolling,
+            isSwipingHorizontally,
             pagerRef,
             shouldPagerScroll,
             onPinchGestureChange,
@@ -127,7 +127,7 @@ function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelecte
             onSwipeSuccess,
             onSwipeDown,
         }),
-        [isScrolling, pagerRef, shouldPagerScroll, onPinchGestureChange, onTap, onSwipe, onSwipeSuccess, onSwipeDown],
+        [isSwipingHorizontally, pagerRef, shouldPagerScroll, onPinchGestureChange, onTap, onSwipe, onSwipeSuccess, onSwipeDown],
     );
 
     return (

src/components/Lightbox.js

@@ -168,7 +168,7 @@ function Lightbox({isAuthTokenRequired, source, onScaleChanged, onPress, onError
             {isContainerLoaded && (
                 <>
                     {isLightboxVisible && (
-                        <View style={[StyleSheet.absoluteFill, {opacity: hasSiblingCarouselItems && isFallbackVisible ? 0 : 1}]}>
+                        <View style={[...StyleUtils.getFullscreenCenteredContentStyles(), {opacity: hasSiblingCarouselItems && isFallbackVisible ? 0 : 1}]}>
                             <MultiGestureCanvas
                                 isActive={isActive}
                                 onScaleChanged={onScaleChanged}
@@ -183,8 +183,8 @@ function Lightbox({isAuthTokenRequired, source, onScaleChanged, onPress, onError
                                     onError={onError}
                                     onLoadEnd={() => setImageLoaded(true)}
                                     onLoad={(e) => {
-                                        const width = (e.nativeEvent?.width || 0) / PixelRatio.get();
-                                        const height = (e.nativeEvent?.height || 0) / PixelRatio.get();
+                                        const width = (e.nativeEvent?.width || 0) * PixelRatio.get();
+                                        const height = (e.nativeEvent?.height || 0) * PixelRatio.get();
                                         setImageDimensions({...imageDimensions, lightboxSize: {width, height}});
                                     }}
                                 />
@@ -194,19 +194,16 @@ function Lightbox({isAuthTokenRequired, source, onScaleChanged, onPress, onError
 
                     {/* Keep rendering the image without gestures as fallback if the carousel item is not active and while the lightbox is loading the image */}
                     {isFallbackVisible && (
-                        <View
-                            collapsable={false}
-                            style={StyleUtils.getFullscreenCenteredContentStyles()}
-                        >
+                        <View style={StyleUtils.getFullscreenCenteredContentStyles()}>
                             <Image
                                 source={{uri: source}}
                                 resizeMode="contain"
                                 style={fallbackSize}
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 onLoadEnd={() => setFallbackLoaded(true)}
                                 onLoad={(e) => {
-                                    const width = e.nativeEvent?.width || 0;
-                                    const height = e.nativeEvent?.height || 0;
+                                    const width = (e.nativeEvent?.width || 0) * PixelRatio.get();
+                                    const height = (e.nativeEvent?.height || 0) * PixelRatio.get();
 
                                     if (imageDimensions?.lightboxSize != null) {
                                         return;