diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -141,6 +141,7 @@
   +navigation: AppNavigationProp<'ImageModal'>,
   +route: NavigationRoute<'ImageModal'>,
   +children: React.Node,
+  +contentDimensions: Dimensions,
   +saveContentCallback?: () => Promise<mixed>,
   +copyContentCallback?: () => mixed,
 };
@@ -891,7 +892,7 @@
       this.centerY = new Value(centerY);
     }
 
-    const { width, height } = this.imageDimensions;
+    const { width, height } = this.props.contentDimensions;
     if (this.imageWidth) {
       this.imageWidth.setValue(width);
     } else {
@@ -935,37 +936,8 @@
     return { width, height: safeAreaHeight };
   }
 
-  get imageDimensions(): Dimensions {
-    // Make space for the close button
-    let { height: maxHeight, width: maxWidth } = this.frame;
-    if (maxHeight > maxWidth) {
-      maxHeight -= 100;
-    } else {
-      maxWidth -= 100;
-    }
-
-    const { dimensions } = this.props.route.params.mediaInfo;
-    if (dimensions.height < maxHeight && dimensions.width < maxWidth) {
-      return dimensions;
-    }
-
-    const heightRatio = maxHeight / dimensions.height;
-    const widthRatio = maxWidth / dimensions.width;
-    if (heightRatio < widthRatio) {
-      return {
-        height: maxHeight,
-        width: dimensions.width * heightRatio,
-      };
-    } else {
-      return {
-        width: maxWidth,
-        height: dimensions.height * widthRatio,
-      };
-    }
-  }
-
-  get imageContainerStyle() {
-    const { height, width } = this.imageDimensions;
+  get contentViewContainerStyle() {
+    const { height, width } = this.props.contentDimensions;
     const { height: frameHeight, width: frameWidth } = this.frame;
     const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
     const left = (frameWidth - width) / 2;
@@ -1068,7 +1040,7 @@
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={this.contentContainerStyle}>
-          <Animated.View style={this.imageContainerStyle}>
+          <Animated.View style={this.contentViewContainerStyle}>
             {children}
           </Animated.View>
         </View>
diff --git a/native/media/image-modal.react.js b/native/media/image-modal.react.js
--- a/native/media/image-modal.react.js
+++ b/native/media/image-modal.react.js
@@ -4,7 +4,7 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { type MediaInfo } from 'lib/types/media-types.js';
+import type { MediaInfo, Dimensions } from 'lib/types/media-types.js';
 
 import Multimedia from './multimedia.react.js';
 import { useIntentionalSaveMedia } from './save-media.js';
@@ -12,6 +12,8 @@
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
+import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import {
   type VerticalBounds,
@@ -35,6 +37,8 @@
   const { navigation, route } = props;
   const { mediaInfo, item } = route.params;
 
+  const dimensionsInfo = useSelector(derivedDimensionsInfoSelector);
+
   const intentionalSaveMedia = useIntentionalSaveMedia();
 
   const onPressSave = React.useCallback(() => {
@@ -56,18 +60,53 @@
     });
   }, [mediaInfo]);
 
+  const imageDimensions: Dimensions = React.useMemo(() => {
+    const frame = {
+      width: dimensionsInfo.width,
+      height: dimensionsInfo.safeAreaHeight,
+    };
+
+    // Make space for the close button
+    let { height: maxHeight, width: maxWidth } = frame;
+    if (maxHeight > maxWidth) {
+      maxHeight -= 100;
+    } else {
+      maxWidth -= 100;
+    }
+
+    const { dimensions } = mediaInfo;
+    if (dimensions.height < maxHeight && dimensions.width < maxWidth) {
+      return dimensions;
+    }
+
+    const heightRatio = maxHeight / dimensions.height;
+    const widthRatio = maxWidth / dimensions.width;
+    if (heightRatio < widthRatio) {
+      return {
+        height: maxHeight,
+        width: dimensions.width * heightRatio,
+      };
+    } else {
+      return {
+        width: maxWidth,
+        height: dimensions.height * widthRatio,
+      };
+    }
+  }, [dimensionsInfo.safeAreaHeight, dimensionsInfo.width, mediaInfo]);
+
   const imageModal = React.useMemo(
     () => (
       <FullScreenViewModal
         navigation={navigation}
         route={route}
+        contentDimensions={imageDimensions}
         saveContentCallback={onPressSave}
         copyContentCallback={onPressCopy}
       >
         <Multimedia mediaInfo={mediaInfo} spinnerColor="white" />
       </FullScreenViewModal>
     ),
-    [mediaInfo, navigation, onPressCopy, onPressSave, route],
+    [imageDimensions, mediaInfo, navigation, onPressCopy, onPressSave, route],
   );
 
   return imageModal;