diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -25,6 +25,7 @@
 import Reanimated, {
   EasingNode as ReanimatedEasing,
 } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
 
 import { pathFromURI, filenameFromPathOrURI } from 'lib/media/file-utils.js';
@@ -612,21 +613,21 @@
     if (this.state.stagingMode) {
       return this.renderStagingView();
     }
-    const topButtonStyle = {
-      top: Math.max(this.props.dimensions.topInset, 6),
-    };
+
     return (
-      <>
-        {this.renderCameraContent(status)}
-        <TouchableOpacity
-          onPress={this.close}
-          onLayout={this.onCloseButtonLayout}
-          style={[styles.closeButton, topButtonStyle]}
-          ref={this.closeButtonRef}
-        >
-          <Text style={styles.closeIcon}>×</Text>
-        </TouchableOpacity>
-      </>
+      <SafeAreaView style={styles.fill}>
+        <View style={styles.fill}>
+          {this.renderCameraContent(status)}
+          <TouchableOpacity
+            onPress={this.close}
+            onLayout={this.onCloseButtonLayout}
+            style={styles.closeButton}
+            ref={this.closeButtonRef}
+          >
+            <Text style={styles.closeIcon}>×</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
     );
   };
 
@@ -640,30 +641,25 @@
       image = <ContentLoading fillType="flex" colors={colors.dark} />;
     }
 
-    const topButtonStyle = {
-      top: Math.max(this.props.dimensions.topInset - 3, 3),
-    };
-    const sendButtonContainerStyle = {
-      bottom: this.props.dimensions.bottomInset + 22,
-    };
     return (
       <>
         {image}
-        <TouchableOpacity
-          onPress={this.clearPendingImage}
-          style={[styles.retakeButton, topButtonStyle]}
-        >
-          <Icon name="ios-arrow-back" style={styles.retakeIcon} />
-        </TouchableOpacity>
-        <SendMediaButton
-          onPress={this.sendPhoto}
-          pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
-          containerStyle={[
-            styles.sendButtonContainer,
-            sendButtonContainerStyle,
-          ]}
-          style={this.sendButtonStyle}
-        />
+        <SafeAreaView style={styles.stagingViewOverlay}>
+          <View style={styles.fill}>
+            <TouchableOpacity
+              onPress={this.clearPendingImage}
+              style={styles.retakeButton}
+            >
+              <Icon name="ios-arrow-back" style={styles.retakeIcon} />
+            </TouchableOpacity>
+            <SendMediaButton
+              onPress={this.sendPhoto}
+              pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
+              containerStyle={styles.sendButtonContainer}
+              style={this.sendButtonStyle}
+            />
+          </View>
+        </SafeAreaView>
       </>
     );
   }
@@ -709,12 +705,6 @@
       );
     }
 
-    const topButtonStyle = {
-      top: Math.max(this.props.dimensions.topInset - 3, 3),
-    };
-    const bottomButtonsContainerStyle = {
-      bottom: this.props.dimensions.bottomInset + 20,
-    };
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
@@ -734,17 +724,12 @@
               <TouchableOpacity
                 onPress={this.changeFlashMode}
                 onLayout={this.onFlashButtonLayout}
-                style={[styles.flashButton, topButtonStyle]}
+                style={styles.flashButton}
                 ref={this.flashButtonRef}
               >
                 {flashIcon}
               </TouchableOpacity>
-              <View
-                style={[
-                  styles.bottomButtonsContainer,
-                  bottomButtonsContainerStyle,
-                ]}
-              >
+              <View style={styles.bottomButtonsContainer}>
                 <TouchableOpacity
                   onPress={this.takePhoto}
                   onLayout={this.onPhotoButtonLayout}
@@ -1060,7 +1045,9 @@
   },
   bottomButtonsContainer: {
     alignItems: 'center',
+    bottom: 20,
     flexDirection: 'row',
+    flex: 1,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
@@ -1071,6 +1058,7 @@
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
+    top: 6,
   },
   closeIcon: {
     color: 'white',
@@ -1092,6 +1080,7 @@
     paddingVertical: 3,
     position: 'absolute',
     right: 15,
+    top: 3,
   },
   flashIcon: {
     color: 'white',
@@ -1135,6 +1124,7 @@
     paddingBottom: 3,
     paddingHorizontal: 10,
     position: 'absolute',
+    top: 6,
   },
   retakeIcon: {
     color: 'white',
@@ -1159,6 +1149,7 @@
     width: 60,
   },
   sendButtonContainer: {
+    bottom: 22,
     position: 'absolute',
     right: 32,
   },
@@ -1167,6 +1158,13 @@
     flex: 1,
     resizeMode: 'contain',
   },
+  stagingViewOverlay: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
   switchCameraButton: {
     justifyContent: 'center',
     paddingHorizontal: 8,
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
@@ -18,6 +18,7 @@
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import Animated from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { type MediaInfo, type Dimensions } from 'lib/types/media-types.js';
 
@@ -1028,11 +1029,9 @@
     const backdropStyle = { opacity: this.backdropOpacity };
     const closeButtonStyle = {
       opacity: this.closeButtonOpacity,
-      top: Math.max(this.props.dimensions.topInset - 2, 4),
     };
     const mediaIconsButtonStyle = {
       opacity: this.actionLinksOpacity,
-      bottom: this.props.dimensions.bottomInset + 8,
     };
 
     let copyButton;
@@ -1058,35 +1057,41 @@
             <Multimedia mediaInfo={mediaInfo} spinnerColor="white" />
           </Animated.View>
         </View>
-        <Animated.View style={[styles.closeButtonContainer, closeButtonStyle]}>
-          <TouchableOpacity
-            onPress={this.close}
-            disabled={!this.state.closeButtonEnabled}
-            onLayout={this.onCloseButtonLayout}
-            ref={this.closeButtonRef}
-          >
-            <Text style={styles.closeButton}>×</Text>
-          </TouchableOpacity>
-        </Animated.View>
-        <Animated.View
-          style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
-        >
-          <View
-            style={styles.mediaIconsRow}
-            onLayout={this.onMediaIconsLayout}
-            ref={this.mediaIconsRef}
-          >
-            <TouchableOpacity
-              onPress={this.save}
-              disabled={!this.state.actionLinksEnabled}
-              style={styles.mediaIconButtons}
+        <SafeAreaView style={styles.buttonsOverlay}>
+          <View style={styles.fill}>
+            <Animated.View
+              style={[styles.closeButtonContainer, closeButtonStyle]}
             >
-              <SWMansionIcon name="save" style={styles.mediaIcon} />
-              <Text style={styles.mediaIconText}>Save</Text>
-            </TouchableOpacity>
-            {copyButton}
+              <TouchableOpacity
+                onPress={this.close}
+                disabled={!this.state.closeButtonEnabled}
+                onLayout={this.onCloseButtonLayout}
+                ref={this.closeButtonRef}
+              >
+                <Text style={styles.closeButton}>×</Text>
+              </TouchableOpacity>
+            </Animated.View>
+            <Animated.View
+              style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
+            >
+              <View
+                style={styles.mediaIconsRow}
+                onLayout={this.onMediaIconsLayout}
+                ref={this.mediaIconsRef}
+              >
+                <TouchableOpacity
+                  onPress={this.save}
+                  disabled={!this.state.actionLinksEnabled}
+                  style={styles.mediaIconButtons}
+                >
+                  <SWMansionIcon name="save" style={styles.mediaIcon} />
+                  <Text style={styles.mediaIconText}>Save</Text>
+                </TouchableOpacity>
+                {copyButton}
+              </View>
+            </Animated.View>
           </View>
-        </Animated.View>
+        </SafeAreaView>
       </Animated.View>
     );
     return (
@@ -1211,6 +1216,13 @@
     right: 0,
     top: 0,
   },
+  buttonsOverlay: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
   closeButton: {
     color: 'white',
     fontSize: 36,
@@ -1223,6 +1235,7 @@
   closeButtonContainer: {
     position: 'absolute',
     right: 4,
+    top: 4,
   },
   container: {
     flex: 1,
@@ -1231,6 +1244,9 @@
     flex: 1,
     overflow: 'hidden',
   },
+  fill: {
+    flex: 1,
+  },
   mediaIcon: {
     color: '#D7D7DC',
     fontSize: 36,
@@ -1253,6 +1269,7 @@
     textShadowRadius: 1,
   },
   mediaIconsContainer: {
+    bottom: 8,
     left: 16,
     position: 'absolute',
   },
diff --git a/native/media/video-playback-modal.react.js b/native/media/video-playback-modal.react.js
--- a/native/media/video-playback-modal.react.js
+++ b/native/media/video-playback-modal.react.js
@@ -8,6 +8,7 @@
 import { TapGestureHandler } from 'react-native-gesture-handler';
 import * as Progress from 'react-native-progress';
 import Animated from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import Video from 'react-native-video';
 
 import { useIsAppBackgroundedOrInactive } from 'lib/shared/lifecycle-utils.js';
@@ -574,41 +575,45 @@
       style={[styles.controls, { opacity: controlsOpacity }]}
       pointerEvents={controlsEnabled ? 'box-none' : 'none'}
     >
-      <View style={styles.header}>
-        <View style={styles.closeButton}>
-          <TouchableOpacity
-            onPress={navigation.goBackOnce}
-            ref={(closeButtonRef: any)}
-            onLayout={onCloseButtonLayout}
-          >
-            <Icon name="close" size={30} style={styles.iconButton} />
-          </TouchableOpacity>
+      <SafeAreaView style={styles.fill}>
+        <View style={styles.fill}>
+          <View style={styles.header}>
+            <View style={styles.closeButton}>
+              <TouchableOpacity
+                onPress={navigation.goBackOnce}
+                ref={(closeButtonRef: any)}
+                onLayout={onCloseButtonLayout}
+              >
+                <Icon name="close" size={30} style={styles.iconButton} />
+              </TouchableOpacity>
+            </View>
+          </View>
+          <View style={styles.footer} ref={footerRef} onLayout={onFooterLayout}>
+            <TouchableOpacity
+              onPress={togglePlayback}
+              style={styles.playPauseButton}
+            >
+              <Icon
+                name={paused ? 'play' : 'pause'}
+                size={28}
+                style={styles.iconButton}
+              />
+            </TouchableOpacity>
+            <View style={styles.progressBar}>
+              <Progress.Bar
+                progress={percentElapsed / 100}
+                height={4}
+                width={null}
+                color={styles.progressBar.color}
+                style={styles.expand}
+              />
+            </View>
+            <Text style={styles.durationText}>
+              {timeElapsed} / {totalDuration}
+            </Text>
+          </View>
         </View>
-      </View>
-      <View style={styles.footer} ref={footerRef} onLayout={onFooterLayout}>
-        <TouchableOpacity
-          onPress={togglePlayback}
-          style={styles.playPauseButton}
-        >
-          <Icon
-            name={paused ? 'play' : 'pause'}
-            size={28}
-            style={styles.iconButton}
-          />
-        </TouchableOpacity>
-        <View style={styles.progressBar}>
-          <Progress.Bar
-            progress={percentElapsed / 100}
-            height={4}
-            width={null}
-            color={styles.progressBar.color}
-            style={styles.expand}
-          />
-        </View>
-        <Text style={styles.durationText}>
-          {timeElapsed} / {totalDuration}
-        </Text>
-      </View>
+      </SafeAreaView>
     </Animated.View>
   );
 
@@ -739,6 +744,9 @@
     flex: 1,
     overflow: 'hidden',
   },
+  fill: {
+    flex: 1,
+  },
 };
 
 export default VideoPlaybackModal;