diff --git a/patches/react-native-fast-image+8.6.3.patch b/patches/react-native-fast-image+8.6.3+001+initial.patch
similarity index 100%
rename from patches/react-native-fast-image+8.6.3.patch
rename to patches/react-native-fast-image+8.6.3+001+initial.patch
diff --git a/patches/react-native-fast-image+8.6.3+002+bitmap-downsampling.patch b/patches/react-native-fast-image+8.6.3+002+bitmap-downsampling.patch
new file mode 100644
index 000000000000..a626d5b16b2f
--- /dev/null
+++ b/patches/react-native-fast-image+8.6.3+002+bitmap-downsampling.patch
@@ -0,0 +1,62 @@
+diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
+index 1339f5c..9dfec0c 100644
+--- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
++++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java
+@@ -176,7 +176,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
+                             .apply(FastImageViewConverter
+                                     .getOptions(context, imageSource, mSource)
+                                     .placeholder(mDefaultSource) // show until loaded
+-                                    .fallback(mDefaultSource)); // null will not be treated as error
++                                    .fallback(mDefaultSource))
++                            .transform(new ResizeTransformation());
+
+             if (key != null)
+                 builder.listener(new FastImageRequestListener(key));
+diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/ResizeTransformation.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/ResizeTransformation.java
+new file mode 100644
+index 0000000..1daa227
+--- /dev/null
++++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/ResizeTransformation.java
+@@ -0,0 +1,41 @@
++package com.dylanvann.fastimage;
++
++ import android.content.Context;
++ import android.graphics.Bitmap;
++
++ import androidx.annotation.NonNull;
++
++ import com.bumptech.glide.load.Transformation;
++ import com.bumptech.glide.load.engine.Resource;
++ import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
++ import com.bumptech.glide.load.resource.bitmap.BitmapResource;
++
++ import java.security.MessageDigest;
++
++ public class ResizeTransformation implements Transformation<Bitmap> {
++
++     private final double MAX_BYTES = 25000000.0;
++
++     @NonNull
++     @Override
++     public Resource<Bitmap> transform(@NonNull Context context, @NonNull Resource<Bitmap> resource, int outWidth, int outHeight) {
++         Bitmap toTransform = resource.get();
++
++         if (toTransform.getByteCount() > MAX_BYTES) {
++             double scaleFactor = Math.sqrt(MAX_BYTES / (double) toTransform.getByteCount());
++             int newHeight = (int) (outHeight * scaleFactor);
++             int newWidth = (int) (outWidth * scaleFactor);
++
++             BitmapPool pool = GlideApp.get(context).getBitmapPool();
++             Bitmap scaledBitmap =  Bitmap.createScaledBitmap(toTransform, newWidth, newHeight, true);
++             return BitmapResource.obtain(scaledBitmap, pool);
++         }
++
++         return resource;
++     }
++
++     @Override
++     public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
++         messageDigest.update(("ResizeTransformation").getBytes());
++     }
++ }
+\ No newline at end of file
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 13b3b9f1e836..b1af96561ef5 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -4,6 +4,7 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {Animated, Keyboard, View} from 'react-native';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
@@ -425,78 +426,80 @@ function AttachmentModal(props) {
                 }}
                 propagateSwipe
             >
-                {props.isSmallScreenWidth && <HeaderGap />}
-                <HeaderWithBackButton
-                    title={headerTitle}
-                    shouldShowBorderBottom
-                    shouldShowDownloadButton={shouldShowDownloadButton}
-                    onDownloadButtonPress={() => downloadAttachment(source)}
-                    shouldShowCloseButton={!props.isSmallScreenWidth}
-                    shouldShowBackButton={props.isSmallScreenWidth}
-                    onBackButtonPress={closeModal}
-                    onCloseButtonPress={closeModal}
-                    shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
-                    threeDotsMenuItems={threeDotsMenuItems}
-                    shouldOverlay
-                />
-                <View style={styles.imageModalImageCenterContainer}>
-                    {!_.isEmpty(props.report) && !props.isReceiptAttachment ? (
-                        <AttachmentCarousel
-                            report={props.report}
-                            onNavigate={onNavigate}
-                            source={props.source}
-                            onClose={closeModal}
-                            onToggleKeyboard={updateConfirmButtonVisibility}
-                            setDownloadButtonVisibility={setDownloadButtonVisibility}
-                        />
-                    ) : (
-                        Boolean(sourceForAttachmentView) &&
-                        shouldLoadAttachment && (
-                            <AttachmentView
-                                containerStyles={[styles.mh5]}
-                                source={sourceForAttachmentView}
-                                isAuthTokenRequired={isAuthTokenRequired}
-                                file={file}
+                <GestureHandlerRootView style={styles.flex1}>
+                    {props.isSmallScreenWidth && <HeaderGap />}
+                    <HeaderWithBackButton
+                        title={headerTitle}
+                        shouldShowBorderBottom
+                        shouldShowDownloadButton={shouldShowDownloadButton}
+                        onDownloadButtonPress={() => downloadAttachment(source)}
+                        shouldShowCloseButton={!props.isSmallScreenWidth}
+                        shouldShowBackButton={props.isSmallScreenWidth}
+                        onBackButtonPress={closeModal}
+                        onCloseButtonPress={closeModal}
+                        shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                        threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
+                        threeDotsMenuItems={threeDotsMenuItems}
+                        shouldOverlay
+                    />
+                    <View style={styles.imageModalImageCenterContainer}>
+                        {!_.isEmpty(props.report) && !props.isReceiptAttachment ? (
+                            <AttachmentCarousel
+                                report={props.report}
+                                onNavigate={onNavigate}
+                                source={props.source}
+                                onClose={closeModal}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
-                                isWorkspaceAvatar={props.isWorkspaceAvatar}
-                                fallbackSource={props.fallbackSource}
-                                isUsedInAttachmentModal
-                                transactionID={props.transaction.transactionID}
+                                setDownloadButtonVisibility={setDownloadButtonVisibility}
                             />
-                        )
-                    )}
-                </View>
-                {/* If we have an onConfirm method show a confirmation button */}
-                {Boolean(props.onConfirm) && (
-                    <SafeAreaConsumer>
-                        {({safeAreaPaddingBottomStyle}) => (
-                            <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
-                                <Button
-                                    success
-                                    style={[styles.buttonConfirm, props.isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
-                                    textStyles={[styles.buttonConfirmText]}
-                                    text={translate('common.send')}
-                                    onPress={submitAndClose}
-                                    disabled={isConfirmButtonDisabled}
-                                    pressOnEnter
+                        ) : (
+                            Boolean(sourceForAttachmentView) &&
+                            shouldLoadAttachment && (
+                                <AttachmentView
+                                    containerStyles={[styles.mh5]}
+                                    source={sourceForAttachmentView}
+                                    isAuthTokenRequired={isAuthTokenRequired}
+                                    file={file}
+                                    onToggleKeyboard={updateConfirmButtonVisibility}
+                                    isWorkspaceAvatar={props.isWorkspaceAvatar}
+                                    fallbackSource={props.fallbackSource}
+                                    isUsedInAttachmentModal
+                                    transactionID={props.transaction.transactionID}
                                 />
-                            </Animated.View>
+                            )
                         )}
-                    </SafeAreaConsumer>
-                )}
-                {props.isReceiptAttachment && (
-                    <ConfirmModal
-                        title={translate('receipt.deleteReceipt')}
-                        isVisible={isDeleteReceiptConfirmModalVisible}
-                        onConfirm={deleteAndCloseModal}
-                        onCancel={closeConfirmModal}
-                        prompt={translate('receipt.deleteConfirmation')}
-                        confirmText={translate('common.delete')}
-                        cancelText={translate('common.cancel')}
-                        danger
-                    />
-                )}
+                    </View>
+                    {/* If we have an onConfirm method show a confirmation button */}
+                    {Boolean(props.onConfirm) && (
+                        <SafeAreaConsumer>
+                            {({safeAreaPaddingBottomStyle}) => (
+                                <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
+                                    <Button
+                                        success
+                                        style={[styles.buttonConfirm, props.isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
+                                        textStyles={[styles.buttonConfirmText]}
+                                        text={translate('common.send')}
+                                        onPress={submitAndClose}
+                                        disabled={isConfirmButtonDisabled}
+                                        pressOnEnter
+                                    />
+                                </Animated.View>
+                            )}
+                        </SafeAreaConsumer>
+                    )}
+                    {props.isReceiptAttachment && (
+                        <ConfirmModal
+                            title={translate('receipt.deleteReceipt')}
+                            isVisible={isDeleteReceiptConfirmModalVisible}
+                            onConfirm={deleteAndCloseModal}
+                            onCancel={closeConfirmModal}
+                            prompt={translate('receipt.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            danger
+                        />
+                    )}
+                </GestureHandlerRootView>
             </Modal>
             {!props.isReceiptAttachment && (
                 <ConfirmModal
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index e1fcc86e12a5..5552f15320f3 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -37,8 +37,14 @@ const propTypes = {
         transactionID: PropTypes.string,
     }).isRequired,
 
-    /** Whether the attachment is currently being viewed in the carousel */
-    isFocused: PropTypes.bool.isRequired,
+    /** Whether there is only one element in the attachment carousel */
+    isSingleItem: PropTypes.bool.isRequired,
+
+    /** The index of the carousel item */
+    index: PropTypes.number.isRequired,
+
+    /** The index of the currently active carousel item */
+    activeIndex: PropTypes.number.isRequired,
 
     /** onPress callback */
     onPress: PropTypes.func,
@@ -48,7 +54,7 @@ const defaultProps = {
     onPress: undefined,
 };
 
-function CarouselItem({item, isFocused, onPress}) {
+function CarouselItem({item, index, activeIndex, isSingleItem, onPress}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
@@ -98,9 +104,11 @@ function CarouselItem({item, isFocused, onPress}) {
                     source={item.source}
                     file={item.file}
                     isAuthTokenRequired={item.isAuthTokenRequired}
-                    isFocused={isFocused}
-                    onPress={onPress}
                     isUsedInCarousel
+                    isSingleCarouselItem={isSingleItem}
+                    carouselItemIndex={index}
+                    carouselActiveItemIndex={activeIndex}
+                    onPress={onPress}
                     transactionID={item.transactionID}
                 />
             </View>
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
deleted file mode 100644
index 7a083d71b591..000000000000
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/* eslint-disable es/no-optional-chaining */
-import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
-import Image from '@components/Image';
-import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
-import ImageTransformer from './ImageTransformer';
-import ImageWrapper from './ImageWrapper';
-
-function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) {
-    const imageScaleX = canvasWidth / imageWidth;
-    const imageScaleY = canvasHeight / imageHeight;
-
-    return {imageScaleX, imageScaleY};
-}
-
-const cachedDimensions = new Map();
-
-const pagePropTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
-    source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
-
-    isActive: PropTypes.bool.isRequired,
-};
-
-const defaultProps = {
-    isAuthTokenRequired: false,
-};
-
-function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialIsActive}) {
-    const {canvasWidth, canvasHeight} = useContext(AttachmentCarouselPagerContext);
-
-    const dimensions = cachedDimensions.get(source);
-
-    const [isActive, setIsActive] = useState(initialIsActive);
-    // We delay setting a page to active state by a (few) millisecond(s),
-    // to prevent the image transformer from flashing while still rendering
-    // Instead, we show the fallback image while the image transformer is loading the image
-    useEffect(() => {
-        if (initialIsActive) {
-            setTimeout(() => setIsActive(true), 1);
-        } else {
-            setIsActive(false);
-        }
-    }, [initialIsActive]);
-
-    const [initialActivePageLoad, setInitialActivePageLoad] = useState(isActive);
-    const isImageLoaded = useRef(null);
-    const [isImageLoading, setIsImageLoading] = useState(false);
-    const [isFallbackLoading, setIsFallbackLoading] = useState(false);
-    const [showFallback, setShowFallback] = useState(true);
-
-    // We delay hiding the fallback image while image transformer is still rendering
-    useEffect(() => {
-        if (isImageLoading || showFallback) {
-            setShowFallback(true);
-        } else {
-            setTimeout(() => setShowFallback(false), 100);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isImageLoading]);
-
-    return (
-        <>
-            {isActive && (
-                <View style={StyleSheet.absoluteFill}>
-                    <ImageTransformer
-                        isActive
-                        imageWidth={dimensions?.imageWidth}
-                        imageHeight={dimensions?.imageHeight}
-                        scaledImageWidth={dimensions?.scaledImageWidth}
-                        scaledImageHeight={dimensions?.scaledImageHeight}
-                        minImageScale={dimensions?.minImageScale}
-                        imageScaleX={dimensions?.imageScaleX}
-                        imageScaleY={dimensions?.imageScaleY}
-                    >
-                        <Image
-                            source={{uri: source}}
-                            style={dimensions == null ? undefined : {width: dimensions.imageWidth, height: dimensions.imageHeight}}
-                            isAuthTokenRequired={isAuthTokenRequired}
-                            onLoadStart={() => {
-                                setIsImageLoading(true);
-                            }}
-                            onLoadEnd={() => {
-                                setShowFallback(false);
-                                setIsImageLoading(false);
-                                isImageLoaded.current = true;
-                            }}
-                            onLoad={(evt) => {
-                                const imageWidth = (evt.nativeEvent?.width || 0) / PixelRatio.get();
-                                const imageHeight = (evt.nativeEvent?.height || 0) / PixelRatio.get();
-
-                                const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
-
-                                // Don't update the dimensions if they are already set
-                                if (
-                                    dimensions?.imageWidth !== imageWidth ||
-                                    dimensions?.imageHeight !== imageHeight ||
-                                    dimensions?.imageScaleX !== imageScaleX ||
-                                    dimensions?.imageScaleY !== imageScaleY
-                                ) {
-                                    cachedDimensions.set(source, {
-                                        ...dimensions,
-                                        imageWidth,
-                                        imageHeight,
-                                        imageScaleX,
-                                        imageScaleY,
-                                    });
-                                }
-
-                                // On the initial render of the active page, the onLoadEnd event is never fired.
-                                // That's why we instead set isImageLoading to false in the onLoad event.
-                                if (initialActivePageLoad) {
-                                    setInitialActivePageLoad(false);
-                                    setIsImageLoading(false);
-                                    setTimeout(() => setShowFallback(false), 100);
-                                    isImageLoaded.current = true;
-                                }
-                            }}
-                        />
-                    </ImageTransformer>
-                </View>
-            )}
-
-            {/* Keep rendering the image without gestures as fallback while ImageTransformer is loading the image */}
-            {(showFallback || !isActive) && (
-                <ImageWrapper>
-                    <Image
-                        source={{uri: source}}
-                        isAuthTokenRequired={isAuthTokenRequired}
-                        onLoadStart={() => {
-                            setIsImageLoading(true);
-                            if (isImageLoaded.current) {
-                                return;
-                            }
-                            setIsFallbackLoading(true);
-                        }}
-                        onLoadEnd={() => {
-                            if (isImageLoaded.current) {
-                                return;
-                            }
-                            setIsFallbackLoading(false);
-                        }}
-                        onLoad={(evt) => {
-                            const imageWidth = evt.nativeEvent.width;
-                            const imageHeight = evt.nativeEvent.height;
-
-                            const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
-                            const minImageScale = Math.min(imageScaleX, imageScaleY);
-
-                            const scaledImageWidth = imageWidth * minImageScale;
-                            const scaledImageHeight = imageHeight * minImageScale;
-
-                            // Don't update the dimensions if they are already set
-                            if (dimensions?.scaledImageWidth === scaledImageWidth && dimensions?.scaledImageHeight === scaledImageHeight) {
-                                return;
-                            }
-
-                            cachedDimensions.set(source, {
-                                ...dimensions,
-                                scaledImageWidth,
-                                scaledImageHeight,
-                            });
-                        }}
-                        style={dimensions == null ? undefined : {width: dimensions.scaledImageWidth, height: dimensions.scaledImageHeight}}
-                    />
-                </ImageWrapper>
-            )}
-
-            {/* Show activity indicator while ImageTransfomer is still loading the image. */}
-            {isActive && isFallbackLoading && !isImageLoaded.current && (
-                <ActivityIndicator
-                    size="large"
-                    style={StyleSheet.absoluteFill}
-                />
-            )}
-        </>
-    );
-}
-
-AttachmentCarouselPage.propTypes = pagePropTypes;
-AttachmentCarouselPage.defaultProps = defaultProps;
-AttachmentCarouselPage.displayName = 'AttachmentCarouselPage';
-
-export default AttachmentCarouselPage;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js
index 39535288e22d..abaf06900853 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js
@@ -1,5 +1,5 @@
 import {createContext} from 'react';
 
-const AttachmentCarouselContextPager = createContext(null);
+const AttachmentCarouselPagerContext = createContext(null);
 
-export default AttachmentCarouselContextPager;
+export default AttachmentCarouselPagerContext;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
deleted file mode 100644
index b639eb291bb1..000000000000
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import Animated from 'react-native-reanimated';
-import useThemeStyles from '@hooks/useThemeStyles';
-
-const imageWrapperPropTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-function ImageWrapper({children}) {
-    const styles = useThemeStyles();
-    return (
-        <Animated.View
-            collapsable={false}
-            style={[StyleSheet.absoluteFill, styles.justifyContentCenter, styles.alignItemsCenter]}
-        >
-            {children}
-        </Animated.View>
-    );
-}
-
-ImageWrapper.propTypes = imageWrapperPropTypes;
-ImageWrapper.displayName = 'ImageWrapper';
-
-export default ImageWrapper;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js
index 15c98ece62cb..553e963a3461 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import React, {useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
-import {createNativeWrapper, GestureHandlerRootView} from 'react-native-gesture-handler';
+import {createNativeWrapper} from 'react-native-gesture-handler';
 import PagerView from 'react-native-pager-view';
 import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
 import _ from 'underscore';
@@ -51,8 +51,6 @@ const pagerPropTypes = {
     onSwipeDown: PropTypes.func,
     onPinchGestureChange: PropTypes.func,
     forwardedRef: refPropTypes,
-    containerWidth: PropTypes.number.isRequired,
-    containerHeight: PropTypes.number.isRequired,
 };
 
 const pagerDefaultProps = {
@@ -66,20 +64,7 @@ const pagerDefaultProps = {
     forwardedRef: null,
 };
 
-function AttachmentCarouselPager({
-    items,
-    renderItem,
-    initialIndex,
-    onPageSelected,
-    onTap,
-    onSwipe = noopWorklet,
-    onSwipeSuccess,
-    onSwipeDown,
-    onPinchGestureChange,
-    forwardedRef,
-    containerWidth,
-    containerHeight,
-}) {
+function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelected, onTap, onSwipe = noopWorklet, onSwipeSuccess, onSwipeDown, onPinchGestureChange, forwardedRef}) {
     const styles = useThemeStyles();
     const shouldPagerScroll = useSharedValue(true);
     const pagerRef = useRef(null);
@@ -101,6 +86,11 @@ function AttachmentCarouselPager({
 
     const [activePage, setActivePage] = useState(initialIndex);
 
+    useEffect(() => {
+        setActivePage(initialIndex);
+        activeIndex.value = initialIndex;
+    }, [activeIndex, initialIndex]);
+
     // we use reanimated for this since onPageSelected is called
     // in the middle of the pager animation
     useAnimatedReaction(
@@ -128,8 +118,6 @@ function AttachmentCarouselPager({
 
     const contextValue = useMemo(
         () => ({
-            canvasWidth: containerWidth,
-            canvasHeight: containerHeight,
             isScrolling,
             pagerRef,
             shouldPagerScroll,
@@ -139,33 +127,31 @@ function AttachmentCarouselPager({
             onSwipeSuccess,
             onSwipeDown,
         }),
-        [containerWidth, containerHeight, isScrolling, pagerRef, shouldPagerScroll, onPinchGestureChange, onTap, onSwipe, onSwipeSuccess, onSwipeDown],
+        [isScrolling, pagerRef, shouldPagerScroll, onPinchGestureChange, onTap, onSwipe, onSwipeSuccess, onSwipeDown],
     );
 
     return (
-        <GestureHandlerRootView style={styles.flex1}>
-            <AttachmentCarouselPagerContext.Provider value={contextValue}>
-                <AnimatedPagerView
-                    pageMargin={40}
-                    offscreenPageLimit={1}
-                    onPageScroll={pageScrollHandler}
-                    animatedProps={animatedProps}
-                    onPageSelected={onPageSelected}
-                    ref={pagerRef}
-                    style={styles.flex1}
-                    initialPage={initialIndex}
-                >
-                    {_.map(items, (item, index) => (
-                        <View
-                            key={item.source}
-                            style={styles.flex1}
-                        >
-                            {renderItem({item, index, isActive: index === activePage})}
-                        </View>
-                    ))}
-                </AnimatedPagerView>
-            </AttachmentCarouselPagerContext.Provider>
-        </GestureHandlerRootView>
+        <AttachmentCarouselPagerContext.Provider value={contextValue}>
+            <AnimatedPagerView
+                pageMargin={40}
+                offscreenPageLimit={1}
+                onPageScroll={pageScrollHandler}
+                animatedProps={animatedProps}
+                onPageSelected={onPageSelected}
+                ref={pagerRef}
+                style={styles.flex1}
+                initialPage={initialIndex}
+            >
+                {_.map(items, (item, index) => (
+                    <View
+                        key={item.source}
+                        style={styles.flex1}
+                    >
+                        {renderItem({item, index, isActive: index === activePage})}
+                    </View>
+                ))}
+            </AnimatedPagerView>
+        </AttachmentCarouselPagerContext.Provider>
     );
 }
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 8f225d426dca..974bb92bf3c8 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -139,10 +139,11 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             <CarouselItem
                 item={item}
                 isFocused={activeSource === item.source}
+                isSingleItem={attachments.length === 1}
                 onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
             />
         ),
-        [activeSource, canUseTouchScreen, setShouldShowArrows, shouldShowArrows],
+        [activeSource, attachments.length, canUseTouchScreen, setShouldShowArrows, shouldShowArrows],
     );
 
     return (
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index 374b2d47d12d..f5479b73abdb 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -1,8 +1,9 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Keyboard, PixelRatio, View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import BlockingView from '@components/BlockingViews/BlockingView';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,13 +21,11 @@ import useCarouselArrows from './useCarouselArrows';
 function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) {
     const styles = useThemeStyles();
     const pagerRef = useRef(null);
-
-    const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0});
-    const [page, setPage] = useState(0);
+    const [page, setPage] = useState();
     const [attachments, setAttachments] = useState([]);
-    const [activeSource, setActiveSource] = useState(source);
     const [isPinchGestureRunning, setIsPinchGestureRunning] = useState(true);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    const [activeSource, setActiveSource] = useState(source);
 
     const compareImage = useCallback((attachment) => attachment.source === source, [source]);
 
@@ -95,61 +94,63 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item, isActive}) => (
+        ({item, index, isActive}) => (
             <CarouselItem
                 item={item}
+                isSingleItem={attachments.length === 1}
+                index={index}
+                activeIndex={page}
                 isFocused={isActive && activeSource === item.source}
                 onPress={() => setShouldShowArrows(!shouldShowArrows)}
             />
         ),
-        [activeSource, setShouldShowArrows, shouldShowArrows],
+        [activeSource, attachments.length, page, setShouldShowArrows, shouldShowArrows],
     );
 
     return (
         <View
             style={[styles.flex1, styles.attachmentCarouselContainer]}
-            onLayout={({nativeEvent}) =>
-                setContainerDimensions({width: PixelRatio.roundToNearestPixel(nativeEvent.layout.width), height: PixelRatio.roundToNearestPixel(nativeEvent.layout.height)})
-            }
             onMouseEnter={() => setShouldShowArrows(true)}
             onMouseLeave={() => setShouldShowArrows(false)}
         >
-            {page === -1 ? (
-                <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
-                    iconWidth={variables.modalTopIconWidth}
-                    iconHeight={variables.modalTopIconHeight}
-                    title={translate('notFound.notHere')}
-                />
+            {page == null ? (
+                <FullScreenLoadingIndicator />
             ) : (
                 <>
-                    <CarouselButtons
-                        shouldShowArrows={shouldShowArrows && !isPinchGestureRunning}
-                        page={page}
-                        attachments={attachments}
-                        onBack={() => cycleThroughAttachments(-1)}
-                        onForward={() => cycleThroughAttachments(1)}
-                        autoHideArrow={autoHideArrows}
-                        cancelAutoHideArrow={cancelAutoHideArrows}
-                    />
-
-                    {containerDimensions.width > 0 && containerDimensions.height > 0 && (
-                        <AttachmentCarouselPager
-                            items={attachments}
-                            renderItem={renderItem}
-                            initialIndex={page}
-                            onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
-                            onPinchGestureChange={(newIsPinchGestureRunning) => {
-                                setIsPinchGestureRunning(newIsPinchGestureRunning);
-                                if (!newIsPinchGestureRunning && !shouldShowArrows) {
-                                    setShouldShowArrows(true);
-                                }
-                            }}
-                            onSwipeDown={onClose}
-                            containerWidth={containerDimensions.width}
-                            containerHeight={containerDimensions.height}
-                            ref={pagerRef}
+                    {page === -1 ? (
+                        <BlockingView
+                            icon={Illustrations.ToddBehindCloud}
+                            iconWidth={variables.modalTopIconWidth}
+                            iconHeight={variables.modalTopIconHeight}
+                            title={translate('notFound.notHere')}
                         />
+                    ) : (
+                        <>
+                            <CarouselButtons
+                                shouldShowArrows={shouldShowArrows && !isPinchGestureRunning}
+                                page={page}
+                                attachments={attachments}
+                                onBack={() => cycleThroughAttachments(-1)}
+                                onForward={() => cycleThroughAttachments(1)}
+                                autoHideArrow={autoHideArrows}
+                                cancelAutoHideArrow={cancelAutoHideArrows}
+                            />
+
+                            <AttachmentCarouselPager
+                                items={attachments}
+                                renderItem={renderItem}
+                                initialIndex={page}
+                                onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
+                                onPinchGestureChange={(newIsPinchGestureRunning) => {
+                                    setIsPinchGestureRunning(newIsPinchGestureRunning);
+                                    if (!newIsPinchGestureRunning && !shouldShowArrows) {
+                                        setShouldShowArrows(true);
+                                    }
+                                }}
+                                onSwipeDown={onClose}
+                                ref={pagerRef}
+                            />
+                        </>
                     )}
                 </>
             )}
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
index 78b69be077aa..f53b993f6053 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
@@ -12,17 +12,38 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate, onError}) {
+function AttachmentViewImage({
+    source,
+    file,
+    isAuthTokenRequired,
+    isUsedInCarousel,
+    isSingleCarouselItem,
+    carouselItemIndex,
+    carouselActiveItemIndex,
+    isFocused,
+    loadComplete,
+    onPress,
+    onError,
+    isImage,
+    onScaleChanged,
+    translate,
+}) {
     const styles = useThemeStyles();
     const children = (
         <ImageView
             onScaleChanged={onScaleChanged}
+            onError={onError}
             url={source}
             fileName={file.name}
             isAuthTokenRequired={isImage && isAuthTokenRequired}
-            onError={onError}
+            isFocused={isFocused}
+            isUsedInCarousel={isUsedInCarousel}
+            isSingleCarouselItem={isSingleCarouselItem}
+            carouselItemIndex={carouselItemIndex}
+            carouselActiveItemIndex={carouselActiveItemIndex}
         />
     );
+
     return onPress ? (
         <PressableWithoutFeedback
             onPress={onPress}
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
deleted file mode 100755
index fd709c82a2e2..000000000000
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {memo} from 'react';
-import AttachmentCarouselPage from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage';
-import ImageView from '@components/ImageView';
-import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import CONST from '@src/CONST';
-import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
-
-const propTypes = {
-    ...attachmentViewImagePropTypes,
-    ...withLocalizePropTypes,
-};
-
-function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUsedInCarousel, loadComplete, onPress, isImage, onScaleChanged, translate}) {
-    const styles = useThemeStyles();
-    const children = isUsedInCarousel ? (
-        <AttachmentCarouselPage
-            source={source}
-            isAuthTokenRequired={isImage && isAuthTokenRequired}
-            file={file}
-            isActive={isFocused}
-        />
-    ) : (
-        <ImageView
-            onScaleChanged={onScaleChanged}
-            url={source}
-            fileName={file.name}
-            isAuthTokenRequired={isImage && isAuthTokenRequired}
-        />
-    );
-
-    return onPress ? (
-        <PressableWithoutFeedback
-            onPress={onPress}
-            disabled={loadComplete}
-            style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
-            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-            accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
-        >
-            {children}
-        </PressableWithoutFeedback>
-    ) : (
-        children
-    );
-}
-
-AttachmentViewImage.propTypes = propTypes;
-AttachmentViewImage.defaultProps = attachmentViewImageDefaultProps;
-AttachmentViewImage.displayName = 'AttachmentViewImage';
-
-export default compose(memo, withLocalize)(AttachmentViewImage);
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 79d1b6f407b9..94faa13fbb0f 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -63,7 +63,6 @@ function AttachmentView({
     source,
     file,
     isAuthTokenRequired,
-    isUsedInCarousel,
     onPress,
     shouldShowLoadingSpinnerIcon,
     shouldShowDownloadIcon,
@@ -72,10 +71,14 @@ function AttachmentView({
     onToggleKeyboard,
     translate,
     isFocused,
+    isUsedInCarousel,
+    isSingleCarouselItem,
+    carouselItemIndex,
+    carouselActiveItemIndex,
+    isUsedInAttachmentModal,
     isWorkspaceAvatar,
     fallbackSource,
     transaction,
-    isUsedInAttachmentModal,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -132,10 +135,11 @@ function AttachmentView({
                 <AttachmentViewPdf
                     source={source}
                     file={file}
+                    isFocused={isFocused}
                     isAuthTokenRequired={isAuthTokenRequired}
                     encryptedSourceUrl={encryptedSourceUrl}
-                    isUsedInCarousel={isUsedInCarousel}
-                    isFocused={isFocused}
+                    carouselItemIndex={carouselItemIndex}
+                    carouselActiveItemIndex={carouselActiveItemIndex}
                     onPress={onPress}
                     onScaleChanged={onScaleChanged}
                     onToggleKeyboard={onToggleKeyboard}
@@ -161,9 +165,12 @@ function AttachmentView({
                 source={imageError ? fallbackSource : source}
                 file={file}
                 isAuthTokenRequired={isAuthTokenRequired}
-                isUsedInCarousel={isUsedInCarousel}
                 loadComplete={loadComplete}
                 isFocused={isFocused}
+                isUsedInCarousel={isUsedInCarousel}
+                isSingleCarouselItem={isSingleCarouselItem}
+                carouselItemIndex={carouselItemIndex}
+                carouselActiveItemIndex={carouselActiveItemIndex}
                 isImage={isImage}
                 onPress={onPress}
                 onScaleChanged={onScaleChanged}
diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js
index 0c7c8814267f..286c903ccf5b 100644
--- a/src/components/Attachments/AttachmentView/propTypes.js
+++ b/src/components/Attachments/AttachmentView/propTypes.js
@@ -17,14 +17,23 @@ const attachmentViewPropTypes = {
     /** Whether this AttachmentView is shown as part of a AttachmentCarousel */
     isUsedInCarousel: PropTypes.bool,
 
+    /** When "isUsedInCarousel" is set to true, determines whether there is only one item in the carousel */
+    isSingleCarouselItem: PropTypes.bool,
+
+    /** Whether this AttachmentView is shown as part of an AttachmentModal */
+    isUsedInAttachmentModal: PropTypes.bool,
+
+    /** The index of the carousel item */
+    carouselItemIndex: PropTypes.number,
+
+    /** The index of the currently active carousel item */
+    carouselActiveItemIndex: PropTypes.number,
+
     /** Function for handle on press */
     onPress: PropTypes.func,
 
     /** Handles scale changed event */
     onScaleChanged: PropTypes.func,
-
-    /** Whether this AttachmentView is shown as part of an AttachmentModal */
-    isUsedInAttachmentModal: PropTypes.bool,
 };
 
 const attachmentViewDefaultProps = {
@@ -34,9 +43,13 @@ const attachmentViewDefaultProps = {
     },
     isFocused: false,
     isUsedInCarousel: false,
+    isSingleCarouselItem: false,
+    carouselItemIndex: 0,
+    carouselActiveItemIndex: 0,
+    isSingleElement: false,
+    isUsedInAttachmentModal: false,
     onPress: undefined,
     onScaleChanged: () => {},
-    isUsedInAttachmentModal: false,
 };
 
 export {attachmentViewPropTypes, attachmentViewDefaultProps};
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 0db1f87cd704..f16b37f328f5 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -8,28 +7,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
-
-const propTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** Handles scale changed event in image zoom component. Used on native only */
-    // eslint-disable-next-line react/no-unused-prop-types
-    onScaleChanged: PropTypes.func.isRequired,
-
-    /** URL to full-sized image */
-    url: PropTypes.string.isRequired,
-
-    /** image file name */
-    fileName: PropTypes.string.isRequired,
-
-    onError: PropTypes.func,
-};
-
-const defaultProps = {
-    isAuthTokenRequired: false,
-    onError: () => {},
-};
+import {imageViewDefaultProps, imageViewPropTypes} from './propTypes';
 
 function ImageView({isAuthTokenRequired, url, fileName, onError}) {
     const styles = useThemeStyles();
@@ -283,8 +261,8 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
     );
 }
 
-ImageView.propTypes = propTypes;
-ImageView.defaultProps = defaultProps;
+ImageView.propTypes = imageViewPropTypes;
+ImageView.defaultProps = imageViewDefaultProps;
 ImageView.displayName = 'ImageView';
 
 export default ImageView;
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index 6c04a1c83ee5..98349b213aa5 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -1,26 +1,15 @@
 import PropTypes from 'prop-types';
-import React, {useEffect, useRef, useState} from 'react';
-import {PanResponder, View} from 'react-native';
-import ImageZoom from 'react-native-image-pan-zoom';
-import _ from 'underscore';
-import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import Image from '@components/Image';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import variables from '@styles/variables';
+import React from 'react';
+import Lightbox from '@components/Lightbox';
+import {zoomRangeDefaultProps, zoomRangePropTypes} from '@components/MultiGestureCanvas/propTypes';
+import {imageViewDefaultProps, imageViewPropTypes} from './propTypes';
 
 /**
  * On the native layer, we use a image library to handle zoom functionality
  */
 const propTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** URL to full-sized image */
-    url: PropTypes.string.isRequired,
-
-    /** Handles scale changed event in image zoom component. Used on native only */
-    onScaleChanged: PropTypes.func.isRequired,
+    ...imageViewPropTypes,
+    ...zoomRangePropTypes,
 
     /** Function for handle on press */
     onPress: PropTypes.func,
@@ -30,214 +19,29 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isAuthTokenRequired: false,
+    ...imageViewDefaultProps,
+    ...zoomRangeDefaultProps,
+
     onPress: () => {},
     style: {},
 };
 
-// Use the default double click interval from the ImageZoom library
-// https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts#L79
-const DOUBLE_CLICK_INTERVAL = 175;
-
-function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style}) {
-    const styles = useThemeStyles();
-    const {windowWidth, windowHeight} = useWindowDimensions();
-
-    const [isLoading, setIsLoading] = useState(true);
-    const [imageDimensions, setImageDimensions] = useState({
-        width: 0,
-        height: 0,
-    });
-    const [containerHeight, setContainerHeight] = useState(null);
-
-    const imageZoomScale = useRef(1);
-    const lastClickTime = useRef(0);
-    const numberOfTouches = useRef(0);
-    const zoom = useRef(null);
-
-    /**
-     * Updates the amount of active touches on the PanResponder on our ImageZoom overlay View
-     *
-     * @param {Event} e
-     * @param {GestureState} gestureState
-     * @returns {Boolean}
-     */
-    const updatePanResponderTouches = (e, gestureState) => {
-        if (_.isNumber(gestureState.numberActiveTouches)) {
-            numberOfTouches.current = gestureState.numberActiveTouches;
-        }
-
-        // We don't need to set the panResponder since all we care about is checking the gestureState, so return false
-        return false;
-    };
-
-    // PanResponder used to capture how many touches are active on the attachment image
-    const panResponder = useRef(
-        PanResponder.create({
-            onStartShouldSetPanResponder: updatePanResponderTouches,
-        }),
-    ).current;
-
-    /**
-     * When the url changes and the image must load again,
-     * this resets the zoom to ensure the next image loads with the correct dimensions.
-     */
-    const resetImageZoom = () => {
-        if (imageZoomScale.current !== 1) {
-            imageZoomScale.current = 1;
-        }
-
-        if (zoom.current) {
-            zoom.current.centerOn({
-                x: 0,
-                y: 0,
-                scale: 1,
-                duration: 0,
-            });
-        }
-    };
-
-    const imageLoadingStart = () => {
-        if (isLoading) {
-            return;
-        }
-
-        resetImageZoom();
-        setImageDimensions({
-            width: 0,
-            height: 0,
-        });
-        setIsLoading(true);
-    };
-
-    useEffect(() => {
-        imageLoadingStart();
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- this effect only needs to run when the url changes
-    }, [url]);
+function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style, zoomRange, onError, isUsedInCarousel, isSingleCarouselItem, carouselItemIndex, carouselActiveItemIndex}) {
+    const hasSiblingCarouselItems = isUsedInCarousel && !isSingleCarouselItem;
 
-    /**
-     * The `ImageZoom` component requires image dimensions which
-     * are calculated here from the natural image dimensions produced by
-     * the `onLoad` event
-     *
-     * @param {Object} nativeEvent
-     */
-    const configureImageZoom = ({nativeEvent}) => {
-        let imageZoomWidth = nativeEvent.width;
-        let imageZoomHeight = nativeEvent.height;
-        const roundedContainerWidth = Math.round(windowWidth);
-        const roundedContainerHeight = Math.round(containerHeight || windowHeight);
-
-        const aspectRatio = Math.min(roundedContainerHeight / imageZoomHeight, roundedContainerWidth / imageZoomWidth);
-
-        imageZoomHeight *= aspectRatio;
-        imageZoomWidth *= aspectRatio;
-
-        // Resize the image to max dimensions possible on the Native platforms to prevent crashes on Android. To keep the same behavior, apply to IOS as well.
-        const maxDimensionsScale = 11;
-        imageZoomWidth = Math.min(imageZoomWidth, roundedContainerWidth * maxDimensionsScale);
-        imageZoomHeight = Math.min(imageZoomHeight, roundedContainerHeight * maxDimensionsScale);
-
-        setImageDimensions({
-            height: imageZoomHeight,
-            width: imageZoomWidth,
-        });
-        setIsLoading(false);
-    };
-
-    const configurePanResponder = () => {
-        const currentTimestamp = new Date().getTime();
-        const isDoubleClick = currentTimestamp - lastClickTime.current <= DOUBLE_CLICK_INTERVAL;
-        lastClickTime.current = currentTimestamp;
-
-        // Let ImageZoom handle the event if the tap is more than one touchPoint or if we are zoomed in
-        if (numberOfTouches.current === 2 || imageZoomScale.current !== 1) {
-            return true;
-        }
-
-        // When we have a double click and the zoom scale is 1 then programmatically zoom the image
-        // but let the tap fall through to the parent so we can register a swipe down to dismiss
-        if (isDoubleClick) {
-            zoom.current.centerOn({
-                x: 0,
-                y: 0,
-                scale: 2,
-                duration: 100,
-            });
-
-            // onMove will be called after the zoom animation.
-            // So it's possible to zoom and swipe and stuck in between the images.
-            // Sending scale just when we actually trigger the animation makes this nearly impossible.
-            // you should be really fast to catch in between state updates.
-            // And this lucky case will be fixed by migration to UI thread only code
-            // with gesture handler and reanimated.
-            onScaleChanged(2);
-        }
-
-        // We must be either swiping down or double tapping since we are at zoom scale 1
-        return false;
-    };
-
-    // Default windowHeight accounts for the modal header height
-    const calculatedWindowHeight = windowHeight - variables.contentHeaderHeight;
-    const hasImageDimensions = imageDimensions.width !== 0 && imageDimensions.height !== 0;
-    const shouldShowLoadingIndicator = isLoading || !hasImageDimensions;
-
-    // Zoom view should be loaded only after measuring actual image dimensions, otherwise it causes blurred images on Android
     return (
-        <View
-            style={[styles.w100, styles.h100, styles.alignItemsCenter, styles.justifyContentCenter, styles.overflowHidden]}
-            onLayout={(event) => {
-                const layout = event.nativeEvent.layout;
-                setContainerHeight(layout.height);
-            }}
-        >
-            {Boolean(containerHeight) && (
-                <ImageZoom
-                    ref={zoom}
-                    onClick={onPress}
-                    cropWidth={windowWidth}
-                    cropHeight={calculatedWindowHeight}
-                    imageWidth={imageDimensions.width}
-                    imageHeight={imageDimensions.height}
-                    onStartShouldSetPanResponder={configurePanResponder}
-                    onMove={({scale}) => {
-                        onScaleChanged(scale);
-                        imageZoomScale.current = scale;
-                    }}
-                >
-                    <Image
-                        style={[
-                            styles.w100,
-                            styles.h100,
-                            style,
-
-                            // Hide image while loading so ImageZoom can get the image
-                            // size before presenting - preventing visual glitches or shift
-                            // due to ImageZoom
-                            shouldShowLoadingIndicator ? styles.opacity0 : styles.opacity1,
-                        ]}
-                        source={{uri: url}}
-                        isAuthTokenRequired={isAuthTokenRequired}
-                        resizeMode={Image.resizeMode.contain}
-                        onLoadStart={imageLoadingStart}
-                        onLoad={configureImageZoom}
-                    />
-
-                    {/**
-            Create an invisible view on top of the image so we can capture and set the amount of touches before
-           the ImageZoom's PanResponder does. Children will be triggered first, so this needs to be inside the
-           ImageZoom to work
-           */}
-                    <View
-                        /* eslint-disable-next-line react/jsx-props-no-spreading */
-                        {...panResponder.panHandlers}
-                        style={[styles.w100, styles.h100, styles.invisible]}
-                    />
-                </ImageZoom>
-            )}
-            {shouldShowLoadingIndicator && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
-        </View>
+        <Lightbox
+            source={url}
+            zoomRange={zoomRange}
+            isAuthTokenRequired={isAuthTokenRequired}
+            onScaleChanged={onScaleChanged}
+            onPress={onPress}
+            onError={onError}
+            index={carouselItemIndex}
+            activeIndex={carouselActiveItemIndex}
+            hasSiblingCarouselItems={hasSiblingCarouselItems}
+            style={style}
+        />
     );
 }
 
diff --git a/src/components/ImageView/propTypes.js b/src/components/ImageView/propTypes.js
new file mode 100644
index 000000000000..3809d9aed043
--- /dev/null
+++ b/src/components/ImageView/propTypes.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+
+const imageViewPropTypes = {
+    /** Whether source url requires authentication */
+    isAuthTokenRequired: PropTypes.bool,
+
+    /** Handles scale changed event in image zoom component. Used on native only */
+    // eslint-disable-next-line react/no-unused-prop-types
+    onScaleChanged: PropTypes.func.isRequired,
+
+    /** URL to full-sized image */
+    url: PropTypes.string.isRequired,
+
+    /** image file name */
+    fileName: PropTypes.string.isRequired,
+
+    /** Handles errors while displaying the image */
+    onError: PropTypes.func,
+
+    /** Whether this view is the active screen  */
+    isFocused: PropTypes.bool,
+
+    /** Whether this AttachmentView is shown as part of a AttachmentCarousel */
+    isUsedInCarousel: PropTypes.bool,
+
+    /** When "isUsedInCarousel" is set to true, determines whether there is only one item in the carousel */
+    isSingleCarouselItem: PropTypes.bool,
+
+    /** The index of the carousel item */
+    carouselItemIndex: PropTypes.number,
+
+    /** The index of the currently active carousel item */
+    carouselActiveItemIndex: PropTypes.number,
+};
+
+const imageViewDefaultProps = {
+    isAuthTokenRequired: false,
+    onError: () => {},
+    isFocused: true,
+    isUsedInCarousel: false,
+    isSingleCarouselItem: false,
+    carouselItemIndex: 0,
+    carouselActiveItemIndex: 0,
+};
+
+export {imageViewPropTypes, imageViewDefaultProps};
diff --git a/src/components/Lightbox.js b/src/components/Lightbox.js
new file mode 100644
index 000000000000..94cd1156bc7b
--- /dev/null
+++ b/src/components/Lightbox.js
@@ -0,0 +1,233 @@
+/* eslint-disable es/no-optional-chaining */
+import PropTypes from 'prop-types';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import * as AttachmentsPropTypes from './Attachments/propTypes';
+import Image from './Image';
+import MultiGestureCanvas from './MultiGestureCanvas';
+import getCanvasFitScale from './MultiGestureCanvas/getCanvasFitScale';
+import {zoomRangeDefaultProps, zoomRangePropTypes} from './MultiGestureCanvas/propTypes';
+
+// Increase/decrease this number to change the number of concurrent lightboxes
+// The more concurrent lighboxes, the worse performance gets (especially on low-end devices)
+// -1 means unlimited
+const NUMBER_OF_CONCURRENT_LIGHTBOXES = 3;
+
+const cachedDimensions = new Map();
+
+/**
+ * On the native layer, we use a image library to handle zoom functionality
+ */
+const propTypes = {
+    ...zoomRangePropTypes,
+
+    /** Function for handle on press */
+    onPress: PropTypes.func,
+
+    /** Handles errors while displaying the image */
+    onError: PropTypes.func,
+
+    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
+    source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
+
+    /** Whether source url requires authentication */
+    isAuthTokenRequired: PropTypes.bool,
+
+    /** Whether the Lightbox is used within a carousel component and there are other sibling elements */
+    hasSiblingCarouselItems: PropTypes.bool,
+
+    /** The index of the carousel item */
+    index: PropTypes.number,
+
+    /** The index of the currently active carousel item */
+    activeIndex: PropTypes.number,
+
+    /** Additional styles to add to the component */
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    ...zoomRangeDefaultProps,
+
+    isAuthTokenRequired: false,
+    index: 0,
+    activeIndex: 0,
+    hasSiblingCarouselItems: false,
+    onPress: () => {},
+    onError: () => {},
+    style: {},
+};
+
+function Lightbox({isAuthTokenRequired, source, onScaleChanged, onPress, onError, style, index, activeIndex, hasSiblingCarouselItems, zoomRange}) {
+    const StyleUtils = useStyleUtils();
+
+    const [containerSize, setContainerSize] = useState({width: 0, height: 0});
+    const isContainerLoaded = containerSize.width !== 0 && containerSize.height !== 0;
+
+    const [imageDimensions, _setImageDimensions] = useState(() => cachedDimensions.get(source));
+    const setImageDimensions = (newDimensions) => {
+        _setImageDimensions(newDimensions);
+        cachedDimensions.set(source, newDimensions);
+    };
+
+    const isItemActive = index === activeIndex;
+    const [isActive, setActive] = useState(isItemActive);
+    const [isImageLoaded, setImageLoaded] = useState(false);
+
+    const isInactiveCarouselItem = hasSiblingCarouselItems && !isActive;
+    const [isFallbackVisible, setFallbackVisible] = useState(isInactiveCarouselItem);
+    const [isFallbackLoaded, setFallbackLoaded] = useState(false);
+
+    const isLightboxLoaded = imageDimensions?.lightboxSize != null;
+    const isLightboxInRange = useMemo(() => {
+        if (NUMBER_OF_CONCURRENT_LIGHTBOXES === -1) {
+            return true;
+        }
+
+        const indexCanvasOffset = Math.floor((NUMBER_OF_CONCURRENT_LIGHTBOXES - 1) / 2) || 0;
+        const indexOutOfRange = index > activeIndex + indexCanvasOffset || index < activeIndex - indexCanvasOffset;
+        return !indexOutOfRange;
+    }, [activeIndex, index]);
+    const isLightboxVisible = isLightboxInRange && (isActive || isLightboxLoaded || isFallbackLoaded);
+
+    const isLoading = isActive && (!isContainerLoaded || !isImageLoaded);
+
+    const updateCanvasSize = useCallback(
+        ({nativeEvent}) => setContainerSize({width: PixelRatio.roundToNearestPixel(nativeEvent.layout.width), height: PixelRatio.roundToNearestPixel(nativeEvent.layout.height)}),
+        [],
+    );
+
+    // We delay setting a page to active state by a (few) millisecond(s),
+    // to prevent the image transformer from flashing while still rendering
+    // Instead, we show the fallback image while the image transformer is loading the image
+    useEffect(() => {
+        if (isItemActive) {
+            setTimeout(() => setActive(true), 1);
+        } else {
+            setActive(false);
+        }
+    }, [isItemActive]);
+
+    useEffect(() => {
+        if (isLightboxVisible) {
+            return;
+        }
+        setImageLoaded(false);
+    }, [isLightboxVisible]);
+
+    useEffect(() => {
+        if (!hasSiblingCarouselItems) {
+            return;
+        }
+
+        if (isActive) {
+            if (isImageLoaded && isFallbackVisible) {
+                // We delay hiding the fallback image while image transformer is still rendering
+                setTimeout(() => {
+                    setFallbackVisible(false);
+                    setFallbackLoaded(false);
+                }, 100);
+            }
+        } else {
+            if (isLightboxVisible && isLightboxLoaded) {
+                return;
+            }
+
+            // Show fallback when the image goes out of focus or when the image is loading
+            setFallbackVisible(true);
+        }
+    }, [hasSiblingCarouselItems, isActive, isImageLoaded, isFallbackVisible, isLightboxLoaded, isLightboxVisible]);
+
+    const fallbackSize = useMemo(() => {
+        if (!hasSiblingCarouselItems || (imageDimensions?.lightboxSize == null && imageDimensions?.fallbackSize == null) || containerSize.width === 0 || containerSize.height === 0) {
+            return;
+        }
+
+        const imageSize = imageDimensions.lightboxSize || imageDimensions.fallbackSize;
+
+        const {minScale} = getCanvasFitScale({canvasSize: containerSize, contentSize: imageSize});
+
+        return {
+            width: PixelRatio.roundToNearestPixel(imageSize.width * minScale),
+            height: PixelRatio.roundToNearestPixel(imageSize.height * minScale),
+        };
+    }, [containerSize, hasSiblingCarouselItems, imageDimensions]);
+
+    return (
+        <View
+            onPress={onPress}
+            style={[StyleSheet.absoluteFill, style]}
+            onLayout={updateCanvasSize}
+        >
+            {isContainerLoaded && (
+                <>
+                    {isLightboxVisible && (
+                        <View style={[StyleSheet.absoluteFill, {opacity: hasSiblingCarouselItems && isFallbackVisible ? 0 : 1}]}>
+                            <MultiGestureCanvas
+                                isActive={isActive}
+                                onScaleChanged={onScaleChanged}
+                                canvasSize={containerSize}
+                                contentSize={imageDimensions?.lightboxSize}
+                                zoomRange={zoomRange}
+                            >
+                                <Image
+                                    source={{uri: source}}
+                                    style={imageDimensions?.lightboxSize}
+                                    isAuthTokenRequired={isAuthTokenRequired}
+                                    onError={onError}
+                                    onLoadEnd={() => setImageLoaded(true)}
+                                    onLoad={(e) => {
+                                        const width = (e.nativeEvent?.width || 0) / PixelRatio.get();
+                                        const height = (e.nativeEvent?.height || 0) / PixelRatio.get();
+                                        setImageDimensions({...imageDimensions, lightboxSize: {width, height}});
+                                    }}
+                                />
+                            </MultiGestureCanvas>
+                        </View>
+                    )}
+
+                    {/* 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()}
+                        >
+                            <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;
+
+                                    if (imageDimensions?.lightboxSize != null) {
+                                        return;
+                                    }
+
+                                    setImageDimensions({...imageDimensions, fallbackSize: {width, height}});
+                                }}
+                            />
+                        </View>
+                    )}
+
+                    {/* Show activity indicator while the lightbox is still loading the image. */}
+                    {isLoading && (
+                        <ActivityIndicator
+                            size="large"
+                            style={StyleSheet.absoluteFill}
+                        />
+                    )}
+                </>
+            )}
+        </View>
+    );
+}
+
+Lightbox.propTypes = propTypes;
+Lightbox.defaultProps = defaultProps;
+Lightbox.displayName = 'Lightbox';
+
+export default Lightbox;
diff --git a/src/components/MultiGestureCanvas/getCanvasFitScale.ts b/src/components/MultiGestureCanvas/getCanvasFitScale.ts
new file mode 100644
index 000000000000..e3e402fb066b
--- /dev/null
+++ b/src/components/MultiGestureCanvas/getCanvasFitScale.ts
@@ -0,0 +1,22 @@
+type GetCanvasFitScale = (props: {
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    contentSize: {
+        width: number;
+        height: number;
+    };
+}) => {scaleX: number; scaleY: number; minScale: number; maxScale: number};
+
+const getCanvasFitScale: GetCanvasFitScale = ({canvasSize, contentSize}) => {
+    const scaleX = canvasSize.width / contentSize.width;
+    const scaleY = canvasSize.height / contentSize.height;
+
+    const minScale = Math.min(scaleX, scaleY);
+    const maxScale = Math.max(scaleX, scaleY);
+
+    return {scaleX, scaleY, minScale, maxScale};
+};
+
+export default getCanvasFitScale;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js b/src/components/MultiGestureCanvas/index.js
similarity index 71%
rename from src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
rename to src/components/MultiGestureCanvas/index.js
index 4bce03b6f25e..c5fd2632c22d 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
+++ b/src/components/MultiGestureCanvas/index.js
@@ -1,5 +1,3 @@
-/* eslint-disable es/no-optional-chaining */
-import PropTypes from 'prop-types';
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
@@ -15,18 +13,19 @@ import Animated, {
     withDecay,
     withSpring,
 } from 'react-native-reanimated';
+import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
-import ImageWrapper from './ImageWrapper';
-
-const MIN_ZOOM_SCALE_WITHOUT_BOUNCE = 1;
-const MAX_ZOOM_SCALE_WITHOUT_BOUNCE = 20;
-
-const MIN_ZOOM_SCALE_WITH_BOUNCE = MIN_ZOOM_SCALE_WITHOUT_BOUNCE * 0.7;
-const MAX_ZOOM_SCALE_WITH_BOUNCE = MAX_ZOOM_SCALE_WITHOUT_BOUNCE * 1.5;
+import getCanvasFitScale from './getCanvasFitScale';
+import {defaultZoomRange, multiGestureCanvasDefaultProps, multiGestureCanvasPropTypes} from './propTypes';
 
 const DOUBLE_TAP_SCALE = 3;
 
+const zoomScaleBounceFactors = {
+    min: 0.7,
+    max: 1.5,
+};
+
 const SPRING_CONFIG = {
     mass: 1,
     stiffness: 1000,
@@ -39,44 +38,54 @@ function clamp(value, lowerBound, upperBound) {
     return Math.min(Math.max(lowerBound, value), upperBound);
 }
 
-const imageTransformerPropTypes = {
-    imageWidth: PropTypes.number,
-    imageHeight: PropTypes.number,
-    imageScaleX: PropTypes.number,
-    imageScaleY: PropTypes.number,
-    scaledImageWidth: PropTypes.number,
-    scaledImageHeight: PropTypes.number,
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
-};
+function getDeepDefaultProps({contentSize: contentSizeProp = {}, zoomRange: zoomRangeProp = {}}) {
+    const contentSize = {
+        width: contentSizeProp.width == null ? 1 : contentSizeProp.width,
+        height: contentSizeProp.height == null ? 1 : contentSizeProp.height,
+    };
 
-const imageTransformerDefaultProps = {
-    imageWidth: 0,
-    imageHeight: 0,
-    imageScaleX: 1,
-    imageScaleY: 1,
-    scaledImageWidth: 0,
-    scaledImageHeight: 0,
-};
+    const zoomRange = {
+        min: zoomRangeProp.min == null ? defaultZoomRange.min : zoomRangeProp.min,
+        max: zoomRangeProp.max == null ? defaultZoomRange.max : zoomRangeProp.max,
+    };
 
-function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, scaledImageWidth, scaledImageHeight, isActive, children}) {
+    return {contentSize, zoomRange};
+}
+
+function MultiGestureCanvas({canvasSize, isActive = true, onScaleChanged, children, ...props}) {
     const styles = useThemeStyles();
-    const {canvasWidth, canvasHeight, onTap, onSwipe, onSwipeSuccess, pagerRef, shouldPagerScroll, isScrolling, onPinchGestureChange} = useContext(AttachmentCarouselPagerContext);
+    const StyleUtils = useStyleUtils();
+    const {contentSize, zoomRange} = getDeepDefaultProps(props);
+
+    const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
+
+    const pagerRefFallback = useRef(null);
+    const {onTap, onSwipe, onSwipeSuccess, pagerRef, shouldPagerScroll, isScrolling, onPinchGestureChange} = attachmentCarouselPagerContext || {
+        onTap: () => undefined,
+        onSwipe: () => undefined,
+        onSwipeSuccess: () => undefined,
+        onPinchGestureChange: () => undefined,
+        pagerRef: pagerRefFallback,
+        shouldPagerScroll: false,
+        isScrolling: false,
+        ...props,
+    };
 
-    const minImageScale = useMemo(() => Math.min(imageScaleX, imageScaleY), [imageScaleX, imageScaleY]);
-    const maxImageScale = useMemo(() => Math.max(imageScaleX, imageScaleY), [imageScaleX, imageScaleY]);
+    const {minScale: minContentScale, maxScale: maxContentScale} = useMemo(() => getCanvasFitScale({canvasSize, contentSize}), [canvasSize, contentSize]);
+    const scaledWidth = useMemo(() => contentSize.width * minContentScale, [contentSize.width, minContentScale]);
+    const scaledHeight = useMemo(() => contentSize.height * minContentScale, [contentSize.height, minContentScale]);
 
     // On double tap zoom to fill, but at least 3x zoom
-    const doubleTapScale = useMemo(() => Math.max(maxImageScale / minImageScale, DOUBLE_TAP_SCALE), [maxImageScale, minImageScale]);
+    const doubleTapScale = useMemo(() => Math.max(DOUBLE_TAP_SCALE, maxContentScale / minContentScale), [maxContentScale, minContentScale]);
 
     const zoomScale = useSharedValue(1);
-    // Adding together the pinch zoom scale and the initial scale to fit the image into the canvas
-    // Using the smaller imageScale, so that the immage is not bigger than the canvas
+    // Adding together the pinch zoom scale and the initial scale to fit the content into the canvas
+    // Using the smaller content scale, so that the immage is not bigger than the canvas
     // and not smaller than needed to fit
-    const totalScale = useDerivedValue(() => zoomScale.value * minImageScale, [minImageScale]);
+    const totalScale = useDerivedValue(() => zoomScale.value * minContentScale, [minContentScale]);
 
-    const zoomScaledImageWidth = useDerivedValue(() => imageWidth * totalScale.value, [imageWidth]);
-    const zoomScaledImageHeight = useDerivedValue(() => imageHeight * totalScale.value, [imageHeight]);
+    const zoomScaledContentWidth = useDerivedValue(() => contentSize.width * totalScale.value, [contentSize.width]);
+    const zoomScaledContentHeight = useDerivedValue(() => contentSize.height * totalScale.value, [contentSize.height]);
 
     // used for pan gesture
     const translateY = useSharedValue(0);
@@ -104,22 +113,22 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     // store scale in between gestures
     const pinchScaleOffset = useSharedValue(1);
 
-    // disable pan vertically when image is smaller than screen
-    const canPanVertically = useDerivedValue(() => canvasHeight < zoomScaledImageHeight.value, [canvasHeight]);
+    // disable pan vertically when content is smaller than screen
+    const canPanVertically = useDerivedValue(() => canvasSize.height < zoomScaledContentHeight.value, [canvasSize.height]);
 
-    // calculates bounds of the scaled image
+    // calculates bounds of the scaled content
     // can we pan left/right/up/down
     // can be used to limit gesture or implementing tension effect
     const getBounds = useWorkletCallback(() => {
         let rightBoundary = 0;
         let topBoundary = 0;
 
-        if (canvasWidth < zoomScaledImageWidth.value) {
-            rightBoundary = Math.abs(canvasWidth - zoomScaledImageWidth.value) / 2;
+        if (canvasSize.width < zoomScaledContentWidth.value) {
+            rightBoundary = Math.abs(canvasSize.width - zoomScaledContentWidth.value) / 2;
         }
 
-        if (canvasHeight < zoomScaledImageHeight.value) {
-            topBoundary = Math.abs(zoomScaledImageHeight.value - canvasHeight) / 2;
+        if (canvasSize.height < zoomScaledContentHeight.value) {
+            topBoundary = Math.abs(zoomScaledContentHeight.value - canvasSize.height) / 2;
         }
 
         const maxVector = {x: rightBoundary, y: topBoundary};
@@ -142,7 +151,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             canPanLeft: target.x < maxVector.x,
             canPanRight: target.x > minVector.x,
         };
-    }, [canvasWidth, canvasHeight]);
+    }, [canvasSize.width, canvasSize.height]);
 
     const afterPanGesture = useWorkletCallback(() => {
         const {target, isInBoundaryX, isInBoundaryY, minVector, maxVector} = getBounds();
@@ -166,7 +175,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         const deceleration = 0.9915;
 
         if (isInBoundaryX) {
-            if (Math.abs(panVelocityX.value) > 0 && zoomScale.value <= MAX_ZOOM_SCALE_WITHOUT_BOUNCE) {
+            if (Math.abs(panVelocityX.value) > 0 && zoomScale.value <= zoomRange.max) {
                 offsetX.value = withDecay({
                     velocity: panVelocityX.value,
                     clamp: [minVector.x, maxVector.x],
@@ -181,8 +190,8 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         if (isInBoundaryY) {
             if (
                 Math.abs(panVelocityY.value) > 0 &&
-                zoomScale.value <= MAX_ZOOM_SCALE_WITHOUT_BOUNCE &&
-                // limit vertical pan only when image is smaller than screen
+                zoomScale.value <= zoomRange.max &&
+                // limit vertical pan only when content is smaller than screen
                 offsetY.value !== minVector.y &&
                 offsetY.value !== maxVector.y
             ) {
@@ -210,42 +219,42 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
 
             stopAnimation();
 
-            const canvasOffsetX = Math.max(0, (canvasWidth - scaledImageWidth) / 2);
-            const canvasOffsetY = Math.max(0, (canvasHeight - scaledImageHeight) / 2);
+            const canvasOffsetX = Math.max(0, (canvasSize.width - scaledWidth) / 2);
+            const canvasOffsetY = Math.max(0, (canvasSize.height - scaledHeight) / 2);
 
-            const imageFocal = {
-                x: clamp(canvasFocalX - canvasOffsetX, 0, scaledImageWidth),
-                y: clamp(canvasFocalY - canvasOffsetY, 0, scaledImageHeight),
+            const contentFocal = {
+                x: clamp(canvasFocalX - canvasOffsetX, 0, scaledWidth),
+                y: clamp(canvasFocalY - canvasOffsetY, 0, scaledHeight),
             };
 
             const canvasCenter = {
-                x: canvasWidth / 2,
-                y: canvasHeight / 2,
+                x: canvasSize.width / 2,
+                y: canvasSize.height / 2,
             };
 
-            const originImageCenter = {
-                x: scaledImageWidth / 2,
-                y: scaledImageHeight / 2,
+            const originContentCenter = {
+                x: scaledWidth / 2,
+                y: scaledHeight / 2,
             };
 
-            const targetImageSize = {
-                width: scaledImageWidth * doubleTapScale,
-                height: scaledImageHeight * doubleTapScale,
+            const targetContentSize = {
+                width: scaledWidth * doubleTapScale,
+                height: scaledHeight * doubleTapScale,
             };
 
-            const targetImageCenter = {
-                x: targetImageSize.width / 2,
-                y: targetImageSize.height / 2,
+            const targetContentCenter = {
+                x: targetContentSize.width / 2,
+                y: targetContentSize.height / 2,
             };
 
             const currentOrigin = {
-                x: (targetImageCenter.x - canvasCenter.x) * -1,
-                y: (targetImageCenter.y - canvasCenter.y) * -1,
+                x: (targetContentCenter.x - canvasCenter.x) * -1,
+                y: (targetContentCenter.y - canvasCenter.y) * -1,
             };
 
             const koef = {
-                x: (1 / originImageCenter.x) * imageFocal.x - 1,
-                y: (1 / originImageCenter.y) * imageFocal.y - 1,
+                x: (1 / originContentCenter.x) * contentFocal.x - 1,
+                y: (1 / originContentCenter.y) * contentFocal.y - 1,
             };
 
             const target = {
@@ -253,7 +262,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
                 y: currentOrigin.y * koef.y,
             };
 
-            if (targetImageSize.height < canvasHeight) {
+            if (targetContentSize.height < canvasSize.height) {
                 target.y = 0;
             }
 
@@ -262,7 +271,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             zoomScale.value = withSpring(doubleTapScale, SPRING_CONFIG);
             pinchScaleOffset.value = doubleTapScale;
         },
-        [scaledImageWidth, scaledImageHeight, canvasWidth, canvasHeight],
+        [scaledWidth, scaledHeight, canvasSize, doubleTapScale],
     );
 
     const reset = useWorkletCallback((animated) => {
@@ -295,6 +304,10 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             } else {
                 zoomToCoordinates(evt.x, evt.y);
             }
+
+            if (onScaleChanged != null) {
+                runOnJS(onScaleChanged)(zoomScale.value);
+            }
         });
 
     const panGestureRef = useRef(Gesture.Pan());
@@ -396,7 +409,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
                     };
 
                     offsetY.value = withSpring(
-                        maybeInvert(imageHeight * 2),
+                        maybeInvert(contentSize.height * 2),
                         {
                             stiffness: 50,
                             damping: 30,
@@ -423,10 +436,10 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
 
     const getAdjustedFocal = useWorkletCallback(
         (focalX, focalY) => ({
-            x: focalX - (canvasWidth / 2 + offsetX.value),
-            y: focalY - (canvasHeight / 2 + offsetY.value),
+            x: focalX - (canvasSize.width / 2 + offsetX.value),
+            y: focalY - (canvasSize.height / 2 + offsetY.value),
         }),
-        [canvasWidth, canvasHeight],
+        [canvasSize.width, canvasSize.height],
     );
 
     // used to store event scale value when we limit scale
@@ -455,7 +468,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         .onChange((evt) => {
             const newZoomScale = pinchScaleOffset.value * evt.scale;
 
-            if (zoomScale.value >= MIN_ZOOM_SCALE_WITH_BOUNCE && zoomScale.value <= MAX_ZOOM_SCALE_WITH_BOUNCE) {
+            if (zoomScale.value >= zoomRange.min * zoomScaleBounceFactors.min && zoomScale.value <= zoomRange.max * zoomScaleBounceFactors.max) {
                 zoomScale.value = newZoomScale;
                 pinchGestureScale.value = evt.scale;
             }
@@ -464,7 +477,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             const newPinchTranslateX = adjustedFocal.x + pinchGestureScale.value * origin.x.value * -1;
             const newPinchTranslateY = adjustedFocal.y + pinchGestureScale.value * origin.y.value * -1;
 
-            if (zoomScale.value >= MIN_ZOOM_SCALE_WITHOUT_BOUNCE && zoomScale.value <= MAX_ZOOM_SCALE_WITHOUT_BOUNCE) {
+            if (zoomScale.value >= zoomRange.min && zoomScale.value <= zoomRange.max) {
                 pinchTranslateX.value = newPinchTranslateX;
                 pinchTranslateY.value = newPinchTranslateY;
             } else {
@@ -480,12 +493,12 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             pinchScaleOffset.value = zoomScale.value;
             pinchGestureScale.value = 1;
 
-            if (pinchScaleOffset.value < MIN_ZOOM_SCALE_WITHOUT_BOUNCE) {
-                pinchScaleOffset.value = MIN_ZOOM_SCALE_WITHOUT_BOUNCE;
-                zoomScale.value = withSpring(MIN_ZOOM_SCALE_WITHOUT_BOUNCE, SPRING_CONFIG);
-            } else if (pinchScaleOffset.value > MAX_ZOOM_SCALE_WITHOUT_BOUNCE) {
-                pinchScaleOffset.value = MAX_ZOOM_SCALE_WITHOUT_BOUNCE;
-                zoomScale.value = withSpring(MAX_ZOOM_SCALE_WITHOUT_BOUNCE, SPRING_CONFIG);
+            if (pinchScaleOffset.value < zoomRange.min) {
+                pinchScaleOffset.value = zoomRange.min;
+                zoomScale.value = withSpring(zoomRange.min, SPRING_CONFIG);
+            } else if (pinchScaleOffset.value > zoomRange.max) {
+                pinchScaleOffset.value = zoomRange.max;
+                zoomScale.value = withSpring(zoomRange.max, SPRING_CONFIG);
             }
 
             if (pinchBounceTranslateX.value !== 0 || pinchBounceTranslateY.value !== 0) {
@@ -494,6 +507,10 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             }
 
             pinchGestureRunning.value = false;
+
+            if (onScaleChanged != null) {
+                runOnJS(onScaleChanged)(zoomScale.value);
+            }
         });
 
     const [isPinchGestureInUse, setIsPinchGestureInUse] = useState(false);
@@ -556,25 +573,30 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             style={[
                 styles.flex1,
                 {
-                    width: canvasWidth,
+                    width: canvasSize.width,
+                    overflow: 'hidden',
                 },
             ]}
         >
             <GestureDetector gesture={Gesture.Simultaneous(pinchGesture, doubleTap, Gesture.Race(pinchGesture, singleTap, panGesture))}>
-                <ImageWrapper>
+                <View
+                    collapsable={false}
+                    style={StyleUtils.getFullscreenCenteredContentStyles()}
+                >
                     <Animated.View
                         collapsable={false}
-                        style={[animatedStyles]}
+                        style={animatedStyles}
                     >
                         {children}
                     </Animated.View>
-                </ImageWrapper>
+                </View>
             </GestureDetector>
         </View>
     );
 }
-ImageTransformer.propTypes = imageTransformerPropTypes;
-ImageTransformer.defaultProps = imageTransformerDefaultProps;
-ImageTransformer.displayName = 'ImageTransformer';
+MultiGestureCanvas.propTypes = multiGestureCanvasPropTypes;
+MultiGestureCanvas.defaultProps = multiGestureCanvasDefaultProps;
+MultiGestureCanvas.displayName = 'MultiGestureCanvas';
 
-export default ImageTransformer;
+export default MultiGestureCanvas;
+export {defaultZoomRange, zoomScaleBounceFactors};
diff --git a/src/components/MultiGestureCanvas/propTypes.js b/src/components/MultiGestureCanvas/propTypes.js
new file mode 100644
index 000000000000..f1961ec0e156
--- /dev/null
+++ b/src/components/MultiGestureCanvas/propTypes.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+
+const defaultZoomRange = {
+    min: 1,
+    max: 20,
+};
+
+const zoomRangePropTypes = {
+    /** Range of zoom that can be applied to the content by pinching or double tapping. */
+    zoomRange: PropTypes.shape({
+        min: PropTypes.number,
+        max: PropTypes.number,
+    }),
+};
+
+const zoomRangeDefaultProps = {
+    zoomRange: {
+        min: defaultZoomRange.min,
+        max: defaultZoomRange.max,
+    },
+};
+
+const multiGestureCanvasPropTypes = {
+    ...zoomRangePropTypes,
+
+    /**
+     * Wheter the canvas is currently active (in the screen) or not.
+     * Disables certain gestures and functionality
+     */
+    isActive: PropTypes.bool,
+
+    /** Handles scale changed event */
+    onScaleChanged: PropTypes.func,
+
+    /** The width and height of the canvas.
+     * This is needed in order to properly scale the content in the canvas
+     */
+    canvasSize: PropTypes.shape({
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+    }).isRequired,
+
+    /** The width and height of the content.
+     * This is needed in order to properly scale the content in the canvas
+     */
+    contentSize: PropTypes.shape({
+        width: PropTypes.number,
+        height: PropTypes.number,
+    }),
+
+    /** The scale factors (scaleX, scaleY) that are used to scale the content (width/height) to the canvas size.
+     * `scaledWidth` and `scaledHeight` reflect the actual size of the content after scaling.
+     */
+    contentScaling: PropTypes.shape({
+        scaleX: PropTypes.number,
+        scaleY: PropTypes.number,
+        scaledWidth: PropTypes.number,
+        scaledHeight: PropTypes.number,
+    }),
+
+    /** Content that should be transformed inside the canvas (images, pdf, ...) */
+    children: PropTypes.node.isRequired,
+};
+
+const multiGestureCanvasDefaultProps = {
+    isActive: true,
+    onScaleChanged: () => undefined,
+    contentSize: undefined,
+    contentScaling: undefined,
+    zoomRange: undefined,
+};
+
+export {defaultZoomRange, zoomRangePropTypes, zoomRangeDefaultProps, multiGestureCanvasPropTypes, multiGestureCanvasDefaultProps};
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c392e61f0814..1dbe0b8587fd 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,5 +1,5 @@
 import {CSSProperties} from 'react';
-import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
@@ -1430,6 +1430,8 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
 
         return containerStyles;
     },
+
+    getFullscreenCenteredContentStyles: () => [StyleSheet.absoluteFill, styles.justifyContentCenter, styles.alignItemsCenter],
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;