diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index f4b5c642e..30374a70f 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1211 +1,1209 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
   Image,
   Animated,
   Easing,
 } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import filesystem from 'react-native-fs';
 import {
   PinchGestureHandler,
   TapGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import type { Orientations } from 'react-native-orientation-locker';
 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';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js';
 import type { PhotoCapture } from 'lib/types/media-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import SendMediaButton from './send-media-button.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { colors } from '../themes/colors.js';
 import { type DeviceCameraInfo } from '../types/camera.js';
 import type { NativeMethods } from '../types/react-native.js';
 import {
   AnimatedView,
   type ViewStyle,
   type AnimatedViewStyle,
 } from '../types/styles.js';
 import { clamp, gestureJustEnded } from '../utils/animation-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   timing,
   spring,
   SpringUtils,
 } = Reanimated;
 /* eslint-enable import/no-named-as-default-member */
 
 const maxZoom = 16;
 const zoomUpdateFactor = (() => {
   if (Platform.OS === 'ios') {
     return 0.002;
   }
   if (Platform.OS === 'android' && Platform.Version > 26) {
     return 0.005;
   }
   if (Platform.OS === 'android' && Platform.Version > 23) {
     return 0.01;
   }
   return 0.03;
 })();
 
 const stagingModeAnimationConfig = {
   duration: 150,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const indicatorSpringConfig = {
   ...SpringUtils.makeDefaultConfig(),
   damping: 0,
   mass: 0.6,
   toValue: 1,
 };
 const indicatorTimingConfig = {
   duration: 500,
   easing: ReanimatedEasing.out(ReanimatedEasing.ease),
   toValue: 0,
 };
 function runIndicatorAnimation(
   // Inputs
   springClock: Clock,
   delayClock: Clock,
   timingClock: Clock,
   animationRunning: Node,
   // Outputs
   scale: Value,
   opacity: Value,
 ): Node {
   const delayStart = new Value(0);
 
   const springScale = new Value(0.75);
   const delayScale = new Value(0);
   const timingScale = new Value(0.75);
 
   const animatedScale = cond(
     clockRunning(springClock),
     springScale,
     cond(clockRunning(delayClock), delayScale, timingScale),
   );
   const lastAnimatedScale = new Value(0.75);
   const numScaleLoops = new Value(0);
 
   const springState = {
     finished: new Value(1),
     velocity: new Value(0),
     time: new Value(0),
     position: springScale,
   };
   const timingState = {
     finished: new Value(1),
     frameTime: new Value(0),
     time: new Value(0),
     position: timingScale,
   };
 
   return block([
     cond(not(animationRunning), [
       set(springState.finished, 0),
       set(springState.velocity, 0),
       set(springState.time, 0),
       set(springScale, 0.75),
       set(lastAnimatedScale, 0.75),
       set(numScaleLoops, 0),
       set(opacity, 1),
       startClock(springClock),
     ]),
     [
       cond(
         clockRunning(springClock),
         spring(springClock, springState, indicatorSpringConfig),
       ),
       timing(timingClock, timingState, indicatorTimingConfig),
     ],
     [
       cond(
         and(
           greaterThan(animatedScale, 1.2),
           not(greaterThan(lastAnimatedScale, 1.2)),
         ),
         [
           set(numScaleLoops, add(numScaleLoops, 1)),
           cond(greaterThan(numScaleLoops, 1), [
             set(springState.finished, 1),
             stopClock(springClock),
             set(delayScale, springScale),
             set(delayStart, delayClock),
             startClock(delayClock),
           ]),
         ],
       ),
       set(lastAnimatedScale, animatedScale),
     ],
     cond(
       and(
         clockRunning(delayClock),
         greaterThan(delayClock, add(delayStart, 400)),
       ),
       [
         stopClock(delayClock),
         set(timingState.finished, 0),
         set(timingState.frameTime, 0),
         set(timingState.time, 0),
         set(timingScale, delayScale),
         startClock(timingClock),
       ],
     ),
     cond(
       and(springState.finished, timingState.finished),
       stopClock(timingClock),
     ),
     set(scale, animatedScale),
     cond(clockRunning(timingClock), set(opacity, clamp(animatedScale, 0, 1))),
   ]);
 }
 
 export type CameraModalParams = {
   +presentedFrom: string,
   +thread: ThreadInfo,
 };
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +navigation: AppNavigationProp<'CameraModal'>,
   +route: NavigationRoute<'CameraModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +deviceCameraInfo: DeviceCameraInfo,
   +deviceOrientation: Orientations,
   +foreground: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // withInputState
   +inputState: ?InputState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +zoom: number,
   +useFrontCamera: boolean,
   +hasCamerasOnBothSides: boolean,
   +flashMode: number,
   +autoFocusPointOfInterest: ?{
     x: number,
     y: number,
     autoExposure?: boolean,
   },
   +stagingMode: boolean,
   +pendingPhotoCapture: ?PhotoCapture,
 };
 class CameraModal extends React.PureComponent<Props, State> {
   camera: ?RNCamera;
 
   pinchEvent;
   pinchHandler = React.createRef();
   tapEvent;
   tapHandler = React.createRef();
   animationCode: Node;
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   closeButtonX = new Value(-1);
   closeButtonY = new Value(-1);
   closeButtonWidth = new Value(0);
   closeButtonHeight = new Value(0);
 
   photoButton: ?React.ElementRef<TouchableOpacityInstance>;
   photoButtonX = new Value(-1);
   photoButtonY = new Value(-1);
   photoButtonWidth = new Value(0);
   photoButtonHeight = new Value(0);
 
   switchCameraButton: ?React.ElementRef<TouchableOpacityInstance>;
   switchCameraButtonX = new Value(-1);
   switchCameraButtonY = new Value(-1);
   switchCameraButtonWidth = new Value(0);
   switchCameraButtonHeight = new Value(0);
 
   flashButton: ?React.ElementRef<TouchableOpacityInstance>;
   flashButtonX = new Value(-1);
   flashButtonY = new Value(-1);
   flashButtonWidth = new Value(0);
   flashButtonHeight = new Value(0);
 
   focusIndicatorX = new Value(-1);
   focusIndicatorY = new Value(-1);
   focusIndicatorScale = new Value(0);
   focusIndicatorOpacity = new Value(0);
 
   cancelIndicatorAnimation = new Value(0);
 
   cameraIDsFetched = false;
 
   stagingModeProgress = new Value(0);
   sendButtonProgress = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   overlayStyle: AnimatedViewStyle;
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
       zoom: 0,
       useFrontCamera: props.deviceCameraInfo.defaultUseFrontCamera,
       hasCamerasOnBothSides: props.deviceCameraInfo.hasCamerasOnBothSides,
       flashMode: RNCamera.Constants.FlashMode.off,
       autoFocusPointOfInterest: undefined,
       stagingMode: false,
       pendingPhotoCapture: undefined,
     };
 
     const sendButtonScale = this.sendButtonProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.1, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.sendButtonProgress,
       transform: [{ scale: sendButtonScale }],
     };
 
     const overlayOpacity = interpolateNode(this.stagingModeProgress, {
       inputRange: [0, 0.01, 1],
       outputRange: [0, 0.5, 0],
       extrapolate: Extrapolate.CLAMP,
     });
     this.overlayStyle = {
       ...styles.overlay,
       opacity: overlayOpacity,
     };
 
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     this.pinchEvent = event([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
         },
       },
     ]);
 
     const tapState = new Value(-1);
     const tapX = new Value(0);
     const tapY = new Value(0);
     this.tapEvent = event([
       {
         nativeEvent: {
           state: tapState,
           x: tapX,
           y: tapY,
         },
       },
     ]);
 
     this.animationCode = block([
       this.zoomAnimationCode(pinchState, pinchScale),
       this.focusAnimationCode(tapState, tapX, tapY),
     ]);
   }
 
   zoomAnimationCode(pinchState: Node, pinchScale: Node): Node {
     const pinchJustEnded = gestureJustEnded(pinchState);
 
     const zoomBase = new Value(1);
     const zoomReported = new Value(1);
 
     const currentZoom = interpolateNode(multiply(zoomBase, pinchScale), {
       inputRange: [1, 8],
       outputRange: [1, 8],
       extrapolate: Extrapolate.CLAMP,
     });
     const cameraZoomFactor = interpolateNode(zoomReported, {
       inputRange: [1, 8],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const resolvedZoom = cond(
       eq(pinchState, GestureState.ACTIVE),
       currentZoom,
       zoomBase,
     );
 
     return block([
       cond(pinchJustEnded, set(zoomBase, currentZoom)),
       cond(
         or(
           pinchJustEnded,
           greaterThan(
             abs(sub(divide(resolvedZoom, zoomReported), 1)),
             zoomUpdateFactor,
           ),
         ),
         [
           set(zoomReported, resolvedZoom),
           call([cameraZoomFactor], this.updateZoom),
         ],
       ),
     ]);
   }
 
   focusAnimationCode(tapState: Node, tapX: Node, tapY: Node): Node {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(tapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const indicatorSpringClock = new Clock();
     const indicatorDelayClock = new Clock();
     const indicatorTimingClock = new Clock();
     const indicatorAnimationRunning = or(
       clockRunning(indicatorSpringClock),
       clockRunning(indicatorDelayClock),
       clockRunning(indicatorTimingClock),
     );
 
     return block([
       cond(fingerJustReleased, [
         call([tapX, tapY], this.focusOnPoint),
         set(this.focusIndicatorX, tapX),
         set(this.focusIndicatorY, tapY),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
       ]),
       cond(this.cancelIndicatorAnimation, [
         set(this.cancelIndicatorAnimation, 0),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
         set(this.focusIndicatorOpacity, 0),
       ]),
       cond(
         or(fingerJustReleased, indicatorAnimationRunning),
         runIndicatorAnimation(
           indicatorSpringClock,
           indicatorDelayClock,
           indicatorTimingClock,
           indicatorAnimationRunning,
           this.focusIndicatorScale,
           this.focusIndicatorOpacity,
         ),
       ),
       set(lastTapX, tapX),
       set(lastTapY, tapY),
     ]);
   }
 
   outsideButtons(x: Node, y: Node): Node {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       photoButtonX,
       photoButtonY,
       photoButtonWidth,
       photoButtonHeight,
       switchCameraButtonX,
       switchCameraButtonY,
       switchCameraButtonWidth,
       switchCameraButtonHeight,
       flashButtonX,
       flashButtonY,
       flashButtonWidth,
       flashButtonHeight,
     } = this;
     return and(
       or(
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         lessThan(x, photoButtonX),
         greaterThan(x, add(photoButtonX, photoButtonWidth)),
         lessThan(y, photoButtonY),
         greaterThan(y, add(photoButtonY, photoButtonHeight)),
       ),
       or(
         lessThan(x, switchCameraButtonX),
         greaterThan(x, add(switchCameraButtonX, switchCameraButtonWidth)),
         lessThan(y, switchCameraButtonY),
         greaterThan(y, add(switchCameraButtonY, switchCameraButtonHeight)),
       ),
       or(
         lessThan(x, flashButtonX),
         greaterThan(x, add(flashButtonX, flashButtonWidth)),
         lessThan(y, flashButtonY),
         greaterThan(y, add(flashButtonY, flashButtonHeight)),
       ),
     );
   }
 
   static isActive(props) {
     const { overlayContext } = props;
     invariant(overlayContext, 'CameraModal should have OverlayContext');
     return !overlayContext.isDismissing;
   }
 
   componentDidMount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const isActive = CameraModal.isActive(this.props);
     const wasActive = CameraModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
 
     if (!this.state.hasCamerasOnBothSides && prevState.hasCamerasOnBothSides) {
       this.switchCameraButtonX.setValue(-1);
       this.switchCameraButtonY.setValue(-1);
       this.switchCameraButtonWidth.setValue(0);
       this.switchCameraButtonHeight.setValue(0);
     }
 
     if (this.props.deviceOrientation !== prevProps.deviceOrientation) {
       this.setState({ autoFocusPointOfInterest: null });
       this.cancelIndicatorAnimation.setValue(1);
     }
 
     if (this.props.foreground && !prevProps.foreground && this.camera) {
       this.camera.refreshAuthorizationStatus();
     }
 
     if (this.state.stagingMode && !prevState.stagingMode) {
       this.cancelIndicatorAnimation.setValue(1);
       this.focusIndicatorOpacity.setValue(0);
       timing(this.stagingModeProgress, {
         ...stagingModeAnimationConfig,
         toValue: 1,
       }).start();
     } else if (!this.state.stagingMode && prevState.stagingMode) {
       this.stagingModeProgress.setValue(0);
     }
 
     if (this.state.pendingPhotoCapture && !prevState.pendingPhotoCapture) {
       Animated.timing(this.sendButtonProgress, {
         ...sendButtonAnimationConfig,
         toValue: 1,
       }).start();
     } else if (
       !this.state.pendingPhotoCapture &&
       prevState.pendingPhotoCapture
     ) {
       CameraModal.cleanUpPendingPhotoCapture(prevState.pendingPhotoCapture);
       this.sendButtonProgress.setValue(0);
     }
   }
 
   static async cleanUpPendingPhotoCapture(pendingPhotoCapture: PhotoCapture) {
     const path = pathFromURI(pendingPhotoCapture.uri);
     if (!path) {
       return;
     }
     try {
       await filesystem.unlink(path);
     } catch (e) {}
   }
 
   get containerStyle() {
     const { overlayContext } = this.props;
     invariant(overlayContext, 'CameraModal should have OverlayContext');
     return {
       ...styles.container,
       opacity: overlayContext.position,
     };
   }
 
   get focusIndicatorStyle() {
     return {
       ...styles.focusIndicator,
       opacity: this.focusIndicatorOpacity,
       transform: [
         { translateX: this.focusIndicatorX },
         { translateY: this.focusIndicatorY },
         { scale: this.focusIndicatorScale },
       ],
     };
   }
 
   renderCamera = ({ camera, status }) => {
     if (camera && camera._cameraHandle) {
       this.fetchCameraIDs(camera);
     }
     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>
     );
   };
 
   renderStagingView() {
     let image = null;
     const { pendingPhotoCapture } = this.state;
     if (pendingPhotoCapture) {
       const imageSource = { uri: pendingPhotoCapture.uri };
       image = <Image source={imageSource} style={styles.stagingImage} />;
     } else {
       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>
       </>
     );
   }
 
   renderCameraContent(status) {
     if (status === 'PENDING_AUTHORIZATION') {
       return <ContentLoading fillType="flex" colors={colors.dark} />;
     } else if (status === 'NOT_AUTHORIZED') {
       return (
         <View style={styles.authorizationDeniedContainer}>
           <Text style={styles.authorizationDeniedText}>
             {'don’t have permission :('}
           </Text>
         </View>
       );
     }
 
     let switchCameraButton = null;
     if (this.state.hasCamerasOnBothSides) {
       switchCameraButton = (
         <TouchableOpacity
           onPress={this.switchCamera}
           onLayout={this.onSwitchCameraButtonLayout}
           style={styles.switchCameraButton}
           ref={this.switchCameraButtonRef}
         >
           <Icon name="ios-camera-reverse" style={styles.switchCameraIcon} />
         </TouchableOpacity>
       );
     }
 
     let flashIcon;
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       flashIcon = <Icon name="ios-flash" style={styles.flashIcon} />;
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       flashIcon = <Icon name="ios-flash-off" style={styles.flashIcon} />;
     } else {
       flashIcon = (
         <>
           <Icon name="ios-flash" style={styles.flashIcon} />
           <Text style={styles.flashIconAutoText}>A</Text>
         </>
       );
     }
 
-    const topButtonStyle = {
-      top: Math.max(this.props.dimensions.topInset - 3, 3),
-    };
-    const bottomButtonsContainerStyle = {
-      bottom: this.props.dimensions.bottomInset + 20,
-    };
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.tapHandler}
         ref={this.pinchHandler}
       >
         <Reanimated.View style={styles.fill}>
           <TapGestureHandler
             onHandlerStateChange={this.tapEvent}
             simultaneousHandlers={this.pinchHandler}
             waitFor={this.pinchHandler}
             ref={this.tapHandler}
           >
             <Reanimated.View style={styles.fill}>
               <Reanimated.View style={this.focusIndicatorStyle} />
               <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}
                   style={styles.saveButton}
                   ref={this.photoButtonRef}
                 >
                   <View style={styles.saveButtonInner} />
                 </TouchableOpacity>
                 {switchCameraButton}
               </View>
             </Reanimated.View>
           </TapGestureHandler>
         </Reanimated.View>
       </PinchGestureHandler>
     );
   }
 
   render() {
     const statusBar = CameraModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     const type = this.state.useFrontCamera
       ? RNCamera.Constants.Type.front
       : RNCamera.Constants.Type.back;
     return (
       <Reanimated.View style={this.containerStyle}>
         {statusBar}
         <Reanimated.Code exec={this.animationCode} />
         <RNCamera
           type={type}
           captureAudio={false}
           maxZoom={maxZoom}
           zoom={this.state.zoom}
           flashMode={this.state.flashMode}
           autoFocusPointOfInterest={this.state.autoFocusPointOfInterest}
           style={styles.fill}
           androidCameraPermissionOptions={null}
           ref={this.cameraRef}
         >
           {this.renderCamera}
         </RNCamera>
         <AnimatedView style={this.overlayStyle} pointerEvents="none" />
       </Reanimated.View>
     );
   }
 
   cameraRef = (camera: ?RNCamera) => {
     this.camera = camera;
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   photoButtonRef = (
     photoButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.photoButton = (photoButton: any);
   };
 
   onPhotoButtonLayout = () => {
     const { photoButton } = this;
     if (!photoButton) {
       return;
     }
     photoButton.measure((x, y, width, height, pageX, pageY) => {
       this.photoButtonX.setValue(pageX);
       this.photoButtonY.setValue(pageY);
       this.photoButtonWidth.setValue(width);
       this.photoButtonHeight.setValue(height);
     });
   };
 
   switchCameraButtonRef = (
     switchCameraButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.switchCameraButton = (switchCameraButton: any);
   };
 
   onSwitchCameraButtonLayout = () => {
     const { switchCameraButton } = this;
     if (!switchCameraButton) {
       return;
     }
     switchCameraButton.measure((x, y, width, height, pageX, pageY) => {
       this.switchCameraButtonX.setValue(pageX);
       this.switchCameraButtonY.setValue(pageY);
       this.switchCameraButtonWidth.setValue(width);
       this.switchCameraButtonHeight.setValue(height);
     });
   };
 
   flashButtonRef = (
     flashButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.flashButton = (flashButton: any);
   };
 
   onFlashButtonLayout = () => {
     const { flashButton } = this;
     if (!flashButton) {
       return;
     }
     flashButton.measure((x, y, width, height, pageX, pageY) => {
       this.flashButtonX.setValue(pageX);
       this.flashButtonY.setValue(pageY);
       this.flashButtonWidth.setValue(width);
       this.flashButtonHeight.setValue(height);
     });
   };
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   takePhoto = async () => {
     const { camera } = this;
     invariant(camera, 'camera ref should be set');
     this.setState({ stagingMode: true });
 
     // We avoid flipping this.state.useFrontCamera if we discover we don't
     // actually have a back camera since it causes a bit of lag, but this
     // means there are cases where it is false but we are actually using the
     // front camera
     const {
       hasCamerasOnBothSides,
       defaultUseFrontCamera,
     } = this.props.deviceCameraInfo;
     const usingFrontCamera =
       this.state.useFrontCamera ||
       (!hasCamerasOnBothSides && defaultUseFrontCamera);
 
     const startTime = Date.now();
     const photoPromise = camera.takePictureAsync({
       pauseAfterCapture: Platform.OS === 'android',
       mirrorImage: usingFrontCamera,
       fixOrientation: true,
     });
 
     if (Platform.OS === 'ios') {
       camera.pausePreview();
     }
     const { uri, width, height } = await photoPromise;
     const filename = filenameFromPathOrURI(uri);
     invariant(
       filename,
       `unable to parse filename out of react-native-camera URI ${uri}`,
     );
 
     const now = Date.now();
     const pendingPhotoCapture = {
       step: 'photo_capture',
       uri,
       dimensions: { width, height },
       filename,
       time: now - startTime,
       captureTime: now,
       selectTime: 0,
       sendTime: 0,
       retries: 0,
     };
 
     this.setState({
       pendingPhotoCapture,
       zoom: 0,
       autoFocusPointOfInterest: undefined,
     });
   };
 
   sendPhoto = async () => {
     const { pendingPhotoCapture } = this.state;
     if (!pendingPhotoCapture) {
       return;
     }
 
     const now = Date.now();
     const capture = {
       ...pendingPhotoCapture,
       selectTime: now,
       sendTime: now,
     };
 
     this.close();
 
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set');
     inputState.sendMultimediaMessage([capture], this.props.route.params.thread);
   };
 
   clearPendingImage = () => {
     invariant(this.camera, 'camera ref should be set');
     this.camera.resumePreview();
     this.setState({
       stagingMode: false,
       pendingPhotoCapture: undefined,
     });
   };
 
   switchCamera = () => {
     this.setState((prevState: State) => ({
       useFrontCamera: !prevState.useFrontCamera,
     }));
   };
 
   updateZoom = ([zoom]: [number]) => {
     this.setState({ zoom });
   };
 
   changeFlashMode = () => {
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.off });
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.auto });
     } else {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.on });
     }
   };
 
   focusOnPoint = ([inputX, inputY]: [number, number]) => {
     const { width: screenWidth, height: screenHeight } = this.props.dimensions;
     const relativeX = inputX / screenWidth;
     const relativeY = inputY / screenHeight;
 
     // react-native-camera's autoFocusPointOfInterest prop is based on a
     // LANDSCAPE-LEFT orientation, so we need to map to that
     let x, y;
     if (this.props.deviceOrientation === 'LANDSCAPE-LEFT') {
       x = relativeX;
       y = relativeY;
     } else if (this.props.deviceOrientation === 'LANDSCAPE-RIGHT') {
       x = 1 - relativeX;
       y = 1 - relativeY;
     } else if (this.props.deviceOrientation === 'PORTRAIT-UPSIDEDOWN') {
       x = 1 - relativeY;
       y = relativeX;
     } else {
       x = relativeY;
       y = 1 - relativeX;
     }
 
     const autoFocusPointOfInterest =
       Platform.OS === 'ios' ? { x, y, autoExposure: true } : { x, y };
     this.setState({ autoFocusPointOfInterest });
   };
 
   fetchCameraIDs = async (camera: RNCamera) => {
     if (this.cameraIDsFetched) {
       return;
     }
     this.cameraIDsFetched = true;
 
     const deviceCameras = await camera.getCameraIdsAsync();
 
     let hasFront = false,
       hasBack = false,
       i = 0;
     while ((!hasFront || !hasBack) && i < deviceCameras.length) {
       const deviceCamera = deviceCameras[i];
       if (deviceCamera.type === RNCamera.Constants.Type.front) {
         hasFront = true;
       } else if (deviceCamera.type === RNCamera.Constants.Type.back) {
         hasBack = true;
       }
       i++;
     }
 
     const hasCamerasOnBothSides = hasFront && hasBack;
     const defaultUseFrontCamera = !hasBack && hasFront;
     if (hasCamerasOnBothSides !== this.state.hasCamerasOnBothSides) {
       this.setState({ hasCamerasOnBothSides });
     }
     const {
       hasCamerasOnBothSides: oldHasCamerasOnBothSides,
       defaultUseFrontCamera: oldDefaultUseFrontCamera,
     } = this.props.deviceCameraInfo;
     if (
       hasCamerasOnBothSides !== oldHasCamerasOnBothSides ||
       defaultUseFrontCamera !== oldDefaultUseFrontCamera
     ) {
       this.props.dispatch({
         type: updateDeviceCameraInfoActionType,
         payload: { hasCamerasOnBothSides, defaultUseFrontCamera },
       });
     }
   };
 }
 
 const styles = StyleSheet.create({
   authorizationDeniedContainer: {
     alignItems: 'center',
     flex: 1,
     justifyContent: 'center',
   },
   authorizationDeniedText: {
     color: colors.dark.listSeparatorLabel,
     fontSize: 28,
     textAlign: 'center',
   },
   bottomButtonsContainer: {
     alignItems: 'center',
+    bottom: 20,
     flexDirection: 'row',
+    flex: 1,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
   },
   closeButton: {
     left: 16,
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
+    top: 6,
   },
   closeIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   container: {
     backgroundColor: 'black',
     flex: 1,
   },
   fill: {
     flex: 1,
   },
   flashButton: {
     marginTop: Platform.select({ android: 15, default: 13 }),
     paddingHorizontal: 10,
     paddingVertical: 3,
     position: 'absolute',
     right: 15,
+    top: 3,
   },
   flashIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   flashIconAutoText: {
     color: 'white',
     fontSize: 10,
     fontWeight: 'bold',
     position: 'absolute',
     right: 5,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
     top: 0,
   },
   focusIndicator: {
     borderColor: 'white',
     borderRadius: 24,
     borderWidth: 1,
     height: 24,
     left: -12,
     position: 'absolute',
     top: -12,
     width: 24,
   },
   overlay: {
     backgroundColor: 'white',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   retakeButton: {
     left: 20,
     marginTop: Platform.select({ android: 15, default: 15 }),
     paddingBottom: 3,
     paddingHorizontal: 10,
     position: 'absolute',
+    top: 6,
   },
   retakeIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   saveButton: {
     alignItems: 'center',
     borderColor: 'white',
     borderRadius: 75,
     borderWidth: 4,
     height: 75,
     justifyContent: 'center',
     width: 75,
   },
   saveButtonInner: {
     backgroundColor: '#FFFFFF88',
     borderRadius: 60,
     height: 60,
     width: 60,
   },
   sendButtonContainer: {
+    bottom: 22,
     position: 'absolute',
     right: 32,
   },
   stagingImage: {
     backgroundColor: 'black',
     flex: 1,
     resizeMode: 'contain',
   },
+  stagingViewOverlay: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
   switchCameraButton: {
     justifyContent: 'center',
     paddingHorizontal: 8,
     paddingVertical: 2,
     position: 'absolute',
     right: 18,
   },
   switchCameraIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
 });
 
 const ConnectedCameraModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCameraModal(props: BaseProps) {
     const dimensions = useSelector(state => state.dimensions);
     const deviceCameraInfo = useSelector(state => state.deviceCameraInfo);
     const deviceOrientation = useSelector(state => state.deviceOrientation);
     const foreground = useIsAppForegrounded();
     const overlayContext = React.useContext(OverlayContext);
     const inputState = React.useContext(InputStateContext);
     const dispatch = useDispatch();
 
     return (
       <CameraModal
         {...props}
         dimensions={dimensions}
         deviceCameraInfo={deviceCameraInfo}
         deviceOrientation={deviceOrientation}
         foreground={foreground}
         dispatch={dispatch}
         overlayContext={overlayContext}
         inputState={inputState}
       />
     );
   },
 );
 
 export default ConnectedCameraModal;
diff --git a/native/media/image-modal.react.js b/native/media/image-modal.react.js
index e20197a3e..4a628a1c5 100644
--- a/native/media/image-modal.react.js
+++ b/native/media/image-modal.react.js
@@ -1,1280 +1,1297 @@
 // @flow
 
 import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
 } from 'react-native';
 import {
   PinchGestureHandler,
   PanGestureHandler,
   TapGestureHandler,
   State as GestureState,
 } 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';
 
 import Multimedia from './multimedia.react.js';
 import {
   useIntentionalSaveMedia,
   type IntentionalSaveMedia,
 } from './save-media.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import {
   type VerticalBounds,
   type LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { NativeMethods } from '../types/react-native.js';
 import {
   clamp,
   gestureJustStarted,
   gestureJustEnded,
   runTiming,
 } from '../utils/animation-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   neq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   pow,
   max,
   min,
   round,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   decay,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 function scaleDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(1);
   const prevValue = new Value(1);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, divide(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 1),
   );
 }
 
 function panDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(0);
   const prevValue = new Value(0);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, sub(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 0),
   );
 }
 
 function runDecay(
   clock: Clock,
   velocity: Node,
   initialPosition: Node,
   startStopClock: boolean = true,
 ): Node {
   const state = {
     finished: new Value(0),
     velocity: new Value(0),
     position: new Value(0),
     time: new Value(0),
   };
   const config = { deceleration: 0.99 };
   return block([
     cond(not(clockRunning(clock)), [
       set(state.finished, 0),
       set(state.velocity, velocity),
       set(state.position, initialPosition),
       set(state.time, 0),
       startStopClock ? startClock(clock) : undefined,
     ]),
     decay(clock, state, config),
     cond(state.finished, startStopClock ? stopClock(clock) : undefined),
     state.position,
   ]);
 }
 
 export type ImageModalParams = {
   +presentedFrom: string,
   +mediaInfo: MediaInfo,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +item: ChatMultimediaMessageInfoItem,
 };
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +navigation: AppNavigationProp<'ImageModal'>,
   +route: NavigationRoute<'ImageModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DerivedDimensionsInfo,
   +intentionalSaveMedia: IntentionalSaveMedia,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +closeButtonEnabled: boolean,
   +actionLinksEnabled: boolean,
 };
 class ImageModal extends React.PureComponent<Props, State> {
   state: State = {
     closeButtonEnabled: true,
     actionLinksEnabled: true,
   };
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   mediaIconsContainer: ?React.ElementRef<typeof View>;
   closeButtonX = new Value(-1);
   closeButtonY = new Value(-1);
   closeButtonWidth = new Value(0);
   closeButtonHeight = new Value(0);
   closeButtonLastState = new Value(1);
   mediaIconsX = new Value(-1);
   mediaIconsY = new Value(-1);
   mediaIconsWidth = new Value(0);
   mediaIconsHeight = new Value(0);
   actionLinksLastState = new Value(1);
 
   centerX: Value;
   centerY: Value;
   frameWidth: Value;
   frameHeight: Value;
   imageWidth: Value;
   imageHeight: Value;
 
   pinchHandler = React.createRef();
   panHandler = React.createRef();
   singleTapHandler = React.createRef();
   doubleTapHandler = React.createRef();
   handlerRefs = [
     this.pinchHandler,
     this.panHandler,
     this.singleTapHandler,
     this.doubleTapHandler,
   ];
   beforeDoubleTapRefs;
   beforeSingleTapRefs;
 
   pinchEvent;
   panEvent;
   singleTapEvent;
   doubleTapEvent;
 
   scale: Node;
   x: Node;
   y: Node;
   backdropOpacity: Node;
   imageContainerOpacity: Node;
   actionLinksOpacity: Node;
   closeButtonOpacity: Node;
 
   constructor(props: Props) {
     super(props);
     this.updateDimensions();
 
     const { imageWidth, imageHeight } = this;
     const left = sub(this.centerX, divide(imageWidth, 2));
     const top = sub(this.centerY, divide(imageHeight, 2));
 
     const { initialCoordinates } = props.route.params;
     const initialScale = divide(initialCoordinates.width, imageWidth);
     const initialTranslateX = sub(
       initialCoordinates.x + initialCoordinates.width / 2,
       add(left, divide(imageWidth, 2)),
     );
     const initialTranslateY = sub(
       initialCoordinates.y + initialCoordinates.height / 2,
       add(top, divide(imageHeight, 2)),
     );
 
     const { overlayContext } = props;
     invariant(overlayContext, 'ImageModal should have OverlayContext');
     const navigationProgress = overlayContext.position;
 
     // The inputs we receive from PanGestureHandler
     const panState = new Value(-1);
     const panTranslationX = new Value(0);
     const panTranslationY = new Value(0);
     const panVelocityX = new Value(0);
     const panVelocityY = new Value(0);
     const panAbsoluteX = new Value(0);
     const panAbsoluteY = new Value(0);
     this.panEvent = event([
       {
         nativeEvent: {
           state: panState,
           translationX: panTranslationX,
           translationY: panTranslationY,
           velocityX: panVelocityX,
           velocityY: panVelocityY,
           absoluteX: panAbsoluteX,
           absoluteY: panAbsoluteY,
         },
       },
     ]);
     const curPanActive = new Value(0);
     const panActive = block([
       cond(
         and(
           gestureJustStarted(panState),
           this.outsideButtons(
             sub(panAbsoluteX, panTranslationX),
             sub(panAbsoluteY, panTranslationY),
           ),
         ),
         set(curPanActive, 1),
       ),
       cond(gestureJustEnded(panState), set(curPanActive, 0)),
       curPanActive,
     ]);
     const lastPanActive = new Value(0);
     const panJustEnded = cond(eq(lastPanActive, panActive), 0, [
       set(lastPanActive, panActive),
       eq(panActive, 0),
     ]);
 
     // The inputs we receive from PinchGestureHandler
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     const pinchFocalX = new Value(0);
     const pinchFocalY = new Value(0);
     this.pinchEvent = event([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
           focalX: pinchFocalX,
           focalY: pinchFocalY,
         },
       },
     ]);
     const pinchActive = eq(pinchState, GestureState.ACTIVE);
 
     // The inputs we receive from single TapGestureHandler
     const singleTapState = new Value(-1);
     const singleTapX = new Value(0);
     const singleTapY = new Value(0);
     this.singleTapEvent = event([
       {
         nativeEvent: {
           state: singleTapState,
           x: singleTapX,
           y: singleTapY,
         },
       },
     ]);
 
     // The inputs we receive from double TapGestureHandler
     const doubleTapState = new Value(-1);
     const doubleTapX = new Value(0);
     const doubleTapY = new Value(0);
     this.doubleTapEvent = event([
       {
         nativeEvent: {
           state: doubleTapState,
           x: doubleTapX,
           y: doubleTapY,
         },
       },
     ]);
 
     // The all-important outputs
     const curScale = new Value(1);
     const curX = new Value(0);
     const curY = new Value(0);
     const curBackdropOpacity = new Value(1);
     const curCloseButtonOpacity = new Value(1);
     const curActionLinksOpacity = new Value(1);
 
     // The centered variables help us know if we need to be recentered
     const recenteredScale = max(curScale, 1);
     const horizontalPanSpace = this.horizontalPanSpace(recenteredScale);
     const verticalPanSpace = this.verticalPanSpace(recenteredScale);
 
     const resetXClock = new Clock();
     const resetYClock = new Clock();
     const zoomClock = new Clock();
 
     const dismissingFromPan = new Value(0);
 
     const roundedCurScale = divide(round(multiply(curScale, 1000)), 1000);
     const gestureActive = or(pinchActive, panActive);
     const activeInteraction = or(
       gestureActive,
       clockRunning(zoomClock),
       dismissingFromPan,
     );
 
     const updates = [
       this.pinchUpdate(
         pinchActive,
         pinchScale,
         pinchFocalX,
         pinchFocalY,
         curScale,
         curX,
         curY,
       ),
       this.panUpdate(panActive, panTranslationX, panTranslationY, curX, curY),
       this.singleTapUpdate(
         singleTapState,
         singleTapX,
         singleTapY,
         roundedCurScale,
         curCloseButtonOpacity,
         curActionLinksOpacity,
       ),
       this.doubleTapUpdate(
         doubleTapState,
         doubleTapX,
         doubleTapY,
         roundedCurScale,
         zoomClock,
         gestureActive,
         curScale,
         curX,
         curY,
       ),
       this.backdropOpacityUpdate(
         panJustEnded,
         pinchActive,
         panVelocityX,
         panVelocityY,
         roundedCurScale,
         curX,
         curY,
         curBackdropOpacity,
         dismissingFromPan,
       ),
       this.recenter(
         resetXClock,
         resetYClock,
         activeInteraction,
         recenteredScale,
         horizontalPanSpace,
         verticalPanSpace,
         curScale,
         curX,
         curY,
       ),
       this.flingUpdate(
         resetXClock,
         resetYClock,
         activeInteraction,
         panJustEnded,
         panVelocityX,
         panVelocityY,
         horizontalPanSpace,
         verticalPanSpace,
         curX,
         curY,
       ),
     ];
     const updatedScale = [updates, curScale];
     const updatedCurX = [updates, curX];
     const updatedCurY = [updates, curY];
     const updatedBackdropOpacity = [updates, curBackdropOpacity];
     const updatedCloseButtonOpacity = [updates, curCloseButtonOpacity];
     const updatedActionLinksOpacity = [updates, curActionLinksOpacity];
 
     const reverseNavigationProgress = sub(1, navigationProgress);
     this.scale = add(
       multiply(reverseNavigationProgress, initialScale),
       multiply(navigationProgress, updatedScale),
     );
     this.x = add(
       multiply(reverseNavigationProgress, initialTranslateX),
       multiply(navigationProgress, updatedCurX),
     );
     this.y = add(
       multiply(reverseNavigationProgress, initialTranslateY),
       multiply(navigationProgress, updatedCurY),
     );
     this.backdropOpacity = multiply(navigationProgress, updatedBackdropOpacity);
     this.imageContainerOpacity = interpolateNode(navigationProgress, {
       inputRange: [0, 0.1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const buttonOpacity = interpolateNode(updatedBackdropOpacity, {
       inputRange: [0.95, 1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     this.closeButtonOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedCloseButtonOpacity,
     );
     this.actionLinksOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedActionLinksOpacity,
     );
 
     this.beforeDoubleTapRefs = Platform.select({
       android: [],
       default: [this.pinchHandler, this.panHandler],
     });
     this.beforeSingleTapRefs = [
       ...this.beforeDoubleTapRefs,
       this.doubleTapHandler,
     ];
   }
 
   // How much space do we have to pan the image horizontally?
   horizontalPanSpace(scale: Node): Node {
     const apparentWidth = multiply(this.imageWidth, scale);
     const horizPop = divide(sub(apparentWidth, this.frameWidth), 2);
     return max(horizPop, 0);
   }
 
   // How much space do we have to pan the image vertically?
   verticalPanSpace(scale: Node): Node {
     const apparentHeight = multiply(this.imageHeight, scale);
     const vertPop = divide(sub(apparentHeight, this.frameHeight), 2);
     return max(vertPop, 0);
   }
 
   pinchUpdate(
     // Inputs
     pinchActive: Node,
     pinchScale: Node,
     pinchFocalX: Node,
     pinchFocalY: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const deltaScale = scaleDelta(pinchScale, pinchActive);
     const deltaPinchX = multiply(
       sub(1, deltaScale),
       sub(pinchFocalX, curX, this.centerX),
     );
     const deltaPinchY = multiply(
       sub(1, deltaScale),
       sub(pinchFocalY, curY, this.centerY),
     );
 
     return cond(
       [deltaScale, pinchActive],
       [
         set(curX, add(curX, deltaPinchX)),
         set(curY, add(curY, deltaPinchY)),
         set(curScale, multiply(curScale, deltaScale)),
       ],
     );
   }
 
   outsideButtons(x: Node, y: Node): Node {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       closeButtonLastState,
       mediaIconsX,
       mediaIconsY,
       mediaIconsWidth,
       mediaIconsHeight,
       actionLinksLastState,
     } = this;
     return and(
       or(
         eq(closeButtonLastState, 0),
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         eq(actionLinksLastState, 0),
         lessThan(x, mediaIconsX),
         greaterThan(x, add(mediaIconsX, mediaIconsWidth)),
         lessThan(y, mediaIconsY),
         greaterThan(y, add(mediaIconsY, mediaIconsHeight)),
       ),
     );
   }
 
   panUpdate(
     // Inputs
     panActive: Node,
     panTranslationX: Node,
     panTranslationY: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const deltaX = panDelta(panTranslationX, panActive);
     const deltaY = panDelta(panTranslationY, panActive);
     return cond(
       [deltaX, deltaY, panActive],
       [set(curX, add(curX, deltaX)), set(curY, add(curY, deltaY))],
     );
   }
 
   singleTapUpdate(
     // Inputs
     singleTapState: Node,
     singleTapX: Node,
     singleTapY: Node,
     roundedCurScale: Node,
     // Outputs
     curCloseButtonOpacity: Value,
     curActionLinksOpacity: Value,
   ): Node {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(singleTapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const wasZoomed = new Value(0);
     const isZoomed = greaterThan(roundedCurScale, 1);
     const becameUnzoomed = and(wasZoomed, not(isZoomed));
 
     const closeButtonState = cond(
       or(
         fingerJustReleased,
         and(becameUnzoomed, eq(this.closeButtonLastState, 0)),
       ),
       sub(1, this.closeButtonLastState),
       this.closeButtonLastState,
     );
 
     const actionLinksState = cond(
       isZoomed,
       0,
       cond(
         or(fingerJustReleased, becameUnzoomed),
         sub(1, this.actionLinksLastState),
         this.actionLinksLastState,
       ),
     );
 
     const closeButtonAppearClock = new Clock();
     const closeButtonDisappearClock = new Clock();
     const actionLinksAppearClock = new Clock();
     const actionLinksDisappearClock = new Clock();
     return block([
       fingerJustReleased,
       set(
         curCloseButtonOpacity,
         cond(
           eq(closeButtonState, 1),
           [
             stopClock(closeButtonDisappearClock),
             runTiming(closeButtonAppearClock, curCloseButtonOpacity, 1),
           ],
           [
             stopClock(closeButtonAppearClock),
             runTiming(closeButtonDisappearClock, curCloseButtonOpacity, 0),
           ],
         ),
       ),
       set(
         curActionLinksOpacity,
         cond(
           eq(actionLinksState, 1),
           [
             stopClock(actionLinksDisappearClock),
             runTiming(actionLinksAppearClock, curActionLinksOpacity, 1),
           ],
           [
             stopClock(actionLinksAppearClock),
             runTiming(actionLinksDisappearClock, curActionLinksOpacity, 0),
           ],
         ),
       ),
       set(this.actionLinksLastState, actionLinksState),
       set(this.closeButtonLastState, closeButtonState),
       set(wasZoomed, isZoomed),
       set(lastTapX, singleTapX),
       set(lastTapY, singleTapY),
       call([eq(curCloseButtonOpacity, 1)], this.setCloseButtonEnabled),
       call([eq(curActionLinksOpacity, 1)], this.setActionLinksEnabled),
     ]);
   }
 
   doubleTapUpdate(
     // Inputs
     doubleTapState: Node,
     doubleTapX: Node,
     doubleTapY: Node,
     roundedCurScale: Node,
     zoomClock: Clock,
     gestureActive: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const zoomClockRunning = clockRunning(zoomClock);
     const zoomActive = and(not(gestureActive), zoomClockRunning);
     const targetScale = cond(greaterThan(roundedCurScale, 1), 1, 3);
 
     const tapXDiff = sub(doubleTapX, this.centerX, curX);
     const tapYDiff = sub(doubleTapY, this.centerY, curY);
     const tapXPercent = divide(tapXDiff, this.imageWidth, curScale);
     const tapYPercent = divide(tapYDiff, this.imageHeight, curScale);
 
     const horizPanSpace = this.horizontalPanSpace(targetScale);
     const vertPanSpace = this.verticalPanSpace(targetScale);
     const horizPanPercent = divide(horizPanSpace, this.imageWidth, targetScale);
     const vertPanPercent = divide(vertPanSpace, this.imageHeight, targetScale);
 
     const tapXPercentClamped = clamp(
       tapXPercent,
       multiply(-1, horizPanPercent),
       horizPanPercent,
     );
     const tapYPercentClamped = clamp(
       tapYPercent,
       multiply(-1, vertPanPercent),
       vertPanPercent,
     );
     const targetX = multiply(tapXPercentClamped, this.imageWidth, targetScale);
     const targetY = multiply(tapYPercentClamped, this.imageHeight, targetScale);
 
     const targetRelativeScale = divide(targetScale, curScale);
     const targetRelativeX = multiply(-1, add(targetX, curX));
     const targetRelativeY = multiply(-1, add(targetY, curY));
 
     const zoomScale = runTiming(zoomClock, 1, targetRelativeScale);
     const zoomX = runTiming(zoomClock, 0, targetRelativeX, false);
     const zoomY = runTiming(zoomClock, 0, targetRelativeY, false);
 
     const deltaScale = scaleDelta(zoomScale, zoomActive);
     const deltaX = panDelta(zoomX, zoomActive);
     const deltaY = panDelta(zoomY, zoomActive);
 
     const fingerJustReleased = and(
       gestureJustEnded(doubleTapState),
       this.outsideButtons(doubleTapX, doubleTapY),
     );
 
     return cond(
       [fingerJustReleased, deltaX, deltaY, deltaScale, gestureActive],
       stopClock(zoomClock),
       cond(or(zoomClockRunning, fingerJustReleased), [
         zoomX,
         zoomY,
         zoomScale,
         set(curX, add(curX, deltaX)),
         set(curY, add(curY, deltaY)),
         set(curScale, multiply(curScale, deltaScale)),
       ]),
     );
   }
 
   backdropOpacityUpdate(
     // Inputs
     panJustEnded: Node,
     pinchActive: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     roundedCurScale: Node,
     // Outputs
     curX: Value,
     curY: Value,
     curBackdropOpacity: Value,
     dismissingFromPan: Value,
   ): Node {
     const progressiveOpacity = max(
       min(
         sub(1, abs(divide(curX, this.frameWidth))),
         sub(1, abs(divide(curY, this.frameHeight))),
       ),
       0,
     );
 
     const resetClock = new Clock();
 
     const velocity = pow(add(pow(panVelocityX, 2), pow(panVelocityY, 2)), 0.5);
     const shouldGoBack = and(
       panJustEnded,
       or(greaterThan(velocity, 50), greaterThan(0.7, progressiveOpacity)),
     );
 
     const decayClock = new Clock();
     const decayItems = [
       set(curX, runDecay(decayClock, panVelocityX, curX, false)),
       set(curY, runDecay(decayClock, panVelocityY, curY)),
     ];
 
     return cond(
       [panJustEnded, dismissingFromPan],
       decayItems,
       cond(
         or(pinchActive, greaterThan(roundedCurScale, 1)),
         set(curBackdropOpacity, runTiming(resetClock, curBackdropOpacity, 1)),
         [
           stopClock(resetClock),
           set(curBackdropOpacity, progressiveOpacity),
           set(dismissingFromPan, shouldGoBack),
           cond(shouldGoBack, [decayItems, call([], this.close)]),
         ],
       ),
     );
   }
 
   recenter(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     recenteredScale: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const resetScaleClock = new Clock();
 
     const recenteredX = clamp(
       curX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const recenteredY = clamp(
       curY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [
         stopClock(resetScaleClock),
         stopClock(resetXClock),
         stopClock(resetYClock),
       ],
       [
         cond(
           or(clockRunning(resetScaleClock), neq(recenteredScale, curScale)),
           set(curScale, runTiming(resetScaleClock, curScale, recenteredScale)),
         ),
         cond(
           or(clockRunning(resetXClock), neq(recenteredX, curX)),
           set(curX, runTiming(resetXClock, curX, recenteredX)),
         ),
         cond(
           or(clockRunning(resetYClock), neq(recenteredY, curY)),
           set(curY, runTiming(resetYClock, curY, recenteredY)),
         ),
       ],
     );
   }
 
   flingUpdate(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     panJustEnded: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const flingXClock = new Clock();
     const flingYClock = new Clock();
 
     const decayX = runDecay(flingXClock, panVelocityX, curX);
     const recenteredX = clamp(
       decayX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const decayY = runDecay(flingYClock, panVelocityY, curY);
     const recenteredY = clamp(
       decayY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [stopClock(flingXClock), stopClock(flingYClock)],
       [
         cond(
           clockRunning(resetXClock),
           stopClock(flingXClock),
           cond(or(panJustEnded, clockRunning(flingXClock)), [
             set(curX, recenteredX),
             cond(neq(decayX, recenteredX), stopClock(flingXClock)),
           ]),
         ),
         cond(
           clockRunning(resetYClock),
           stopClock(flingYClock),
           cond(or(panJustEnded, clockRunning(flingYClock)), [
             set(curY, recenteredY),
             cond(neq(decayY, recenteredY), stopClock(flingYClock)),
           ]),
         ),
       ],
     );
   }
 
   updateDimensions() {
     const { width: frameWidth, height: frameHeight } = this.frame;
     const { topInset } = this.props.dimensions;
     if (this.frameWidth) {
       this.frameWidth.setValue(frameWidth);
     } else {
       this.frameWidth = new Value(frameWidth);
     }
     if (this.frameHeight) {
       this.frameHeight.setValue(frameHeight);
     } else {
       this.frameHeight = new Value(frameHeight);
     }
 
     const centerX = frameWidth / 2;
     const centerY = frameHeight / 2 + topInset;
     if (this.centerX) {
       this.centerX.setValue(centerX);
     } else {
       this.centerX = new Value(centerX);
     }
     if (this.centerY) {
       this.centerY.setValue(centerY);
     } else {
       this.centerY = new Value(centerY);
     }
 
     const { width, height } = this.imageDimensions;
     if (this.imageWidth) {
       this.imageWidth.setValue(width);
     } else {
       this.imageWidth = new Value(width);
     }
     if (this.imageHeight) {
       this.imageHeight.setValue(height);
     } else {
       this.imageHeight = new Value(height);
     }
   }
 
   componentDidMount() {
     if (ImageModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (ImageModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.dimensions !== prevProps.dimensions) {
       this.updateDimensions();
     }
 
     const isActive = ImageModal.isActive(this.props);
     const wasActive = ImageModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
   }
 
   get frame(): Dimensions {
     const { width, safeAreaHeight } = this.props.dimensions;
     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;
     const { height: frameHeight, width: frameWidth } = this.frame;
     const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
     const left = (frameWidth - width) / 2;
     const { verticalBounds } = this.props.route.params;
     return {
       height,
       width,
       marginTop: top - verticalBounds.y,
       marginLeft: left,
       opacity: this.imageContainerOpacity,
       transform: [
         { translateX: this.x },
         { translateY: this.y },
         { scale: this.scale },
       ],
     };
   }
 
   static isActive(props) {
     const { overlayContext } = props;
     invariant(overlayContext, 'ImageModal should have OverlayContext');
     return !overlayContext.isDismissing;
   }
 
   get contentContainerStyle() {
     const { verticalBounds } = this.props.route.params;
     const fullScreenHeight = this.props.dimensions.height;
     const top = verticalBounds.y;
     const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height;
 
     // margin will clip, but padding won't
     const verticalStyle = ImageModal.isActive(this.props)
       ? { paddingTop: top, paddingBottom: bottom }
       : { marginTop: top, marginBottom: bottom };
     return [styles.contentContainer, verticalStyle];
   }
 
   render() {
     const { mediaInfo } = this.props.route.params;
     const statusBar = ImageModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     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;
     if (Platform.OS === 'ios') {
       copyButton = (
         <TouchableOpacity
           onPress={this.copy}
           disabled={!this.state.actionLinksEnabled}
           style={styles.mediaIconButtons}
         >
           <SWMansionIcon name="copy" style={styles.mediaIcon} />
           <Text style={styles.mediaIconText}>Copy</Text>
         </TouchableOpacity>
       );
     }
 
     const view = (
       <Animated.View style={styles.container}>
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={this.contentContainerStyle}>
           <Animated.View style={this.imageContainerStyle}>
             <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 (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.handlerRefs}
         ref={this.pinchHandler}
       >
         <Animated.View style={styles.container}>
           <PanGestureHandler
             onGestureEvent={this.panEvent}
             onHandlerStateChange={this.panEvent}
             simultaneousHandlers={this.handlerRefs}
             ref={this.panHandler}
             avgTouches
           >
             <Animated.View style={styles.container}>
               <TapGestureHandler
                 onHandlerStateChange={this.doubleTapEvent}
                 simultaneousHandlers={this.handlerRefs}
                 ref={this.doubleTapHandler}
                 waitFor={this.beforeDoubleTapRefs}
                 numberOfTaps={2}
               >
                 <Animated.View style={styles.container}>
                   <TapGestureHandler
                     onHandlerStateChange={this.singleTapEvent}
                     simultaneousHandlers={this.handlerRefs}
                     ref={this.singleTapHandler}
                     waitFor={this.beforeSingleTapRefs}
                     numberOfTaps={1}
                   >
                     {view}
                   </TapGestureHandler>
                 </Animated.View>
               </TapGestureHandler>
             </Animated.View>
           </PanGestureHandler>
         </Animated.View>
       </PinchGestureHandler>
     );
   }
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   save = () => {
     const { mediaInfo, item } = this.props.route.params;
     const { id: uploadID, uri } = mediaInfo;
     const { id: messageServerID, localID: messageLocalID } = item.messageInfo;
     const ids = { uploadID, messageServerID, messageLocalID };
     return this.props.intentionalSaveMedia(uri, ids);
   };
 
   copy = () => {
     const { uri } = this.props.route.params.mediaInfo;
     Clipboard.setImageFromURL(uri, success => {
       displayActionResultModal(success ? 'copied!' : 'failed to copy :(');
     });
   };
 
   setCloseButtonEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.closeButtonEnabled !== enabled) {
       this.setState({ closeButtonEnabled: enabled });
     }
   };
 
   setActionLinksEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.actionLinksEnabled !== enabled) {
       this.setState({ actionLinksEnabled: enabled });
     }
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   mediaIconsRef = (mediaIconsContainer: ?React.ElementRef<typeof View>) => {
     this.mediaIconsContainer = mediaIconsContainer;
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   onMediaIconsLayout = () => {
     const { mediaIconsContainer } = this;
     if (!mediaIconsContainer) {
       return;
     }
 
     mediaIconsContainer.measure((x, y, width, height, pageX, pageY) => {
       this.mediaIconsX.setValue(pageX);
       this.mediaIconsY.setValue(pageY);
       this.mediaIconsWidth.setValue(width);
       this.mediaIconsHeight.setValue(height);
     });
   };
 }
 
 const styles = StyleSheet.create({
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
+  buttonsOverlay: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
   closeButton: {
     color: 'white',
     fontSize: 36,
     paddingHorizontal: 8,
     paddingVertical: 2,
     textShadowColor: '#000',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   closeButtonContainer: {
     position: 'absolute',
     right: 4,
+    top: 4,
   },
   container: {
     flex: 1,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
+  fill: {
+    flex: 1,
+  },
   mediaIcon: {
     color: '#D7D7DC',
     fontSize: 36,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconButtons: {
     alignItems: 'center',
     paddingBottom: 2,
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 2,
   },
   mediaIconText: {
     color: '#D7D7DC',
     fontSize: 14,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconsContainer: {
+    bottom: 8,
     left: 16,
     position: 'absolute',
   },
   mediaIconsRow: {
     flexDirection: 'row',
   },
 });
 
 const ConnectedImageModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedImageModal(props: BaseProps) {
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const overlayContext = React.useContext(OverlayContext);
     const intentionalSaveMedia = useIntentionalSaveMedia();
     return (
       <ImageModal
         {...props}
         dimensions={dimensions}
         overlayContext={overlayContext}
         intentionalSaveMedia={intentionalSaveMedia}
       />
     );
   },
 );
 
 export default ConnectedImageModal;
diff --git a/native/media/video-playback-modal.react.js b/native/media/video-playback-modal.react.js
index 48c04e15b..3ff385187 100644
--- a/native/media/video-playback-modal.react.js
+++ b/native/media/video-playback-modal.react.js
@@ -1,744 +1,752 @@
 // @flow
 
 import Icon from '@expo/vector-icons/MaterialCommunityIcons.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 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';
 import type { MediaInfo } from 'lib/types/media-types.js';
 
 import { formatDuration } from './video-utils.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import type {
   VerticalBounds,
   LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { NativeMethods } from '../types/react-native.js';
 import { gestureJustEnded, animateTowards } from '../utils/animation-utils.js';
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Extrapolate,
   and,
   or,
   block,
   cond,
   eq,
   ceil,
   call,
   set,
   add,
   sub,
   multiply,
   divide,
   not,
   max,
   min,
   lessThan,
   greaterThan,
   abs,
   interpolateNode,
   useValue,
   event,
 } = Animated;
 
 export type VideoPlaybackModalParams = {
   +presentedFrom: string,
   +mediaInfo: MediaInfo,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +item: ChatMultimediaMessageInfoItem,
 };
 
 type Props = {
   +navigation: AppNavigationProp<'VideoPlaybackModal'>,
   +route: NavigationRoute<'VideoPlaybackModal'>,
 };
 function VideoPlaybackModal(props: Props): React.Node {
   const { mediaInfo } = props.route.params;
 
   const closeButtonX = useValue(-1);
   const closeButtonY = useValue(-1);
   const closeButtonWidth = useValue(-1);
   const closeButtonHeight = useValue(-1);
   const closeButtonRef = React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
   const closeButton = closeButtonRef.current;
   const onCloseButtonLayoutCalledRef = React.useRef(false);
   const onCloseButtonLayout = React.useCallback(() => {
     onCloseButtonLayoutCalledRef.current = true;
   }, []);
   const onCloseButtonLayoutCalled = onCloseButtonLayoutCalledRef.current;
   React.useEffect(() => {
     if (!closeButton || !onCloseButtonLayoutCalled) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       closeButtonX.setValue(pageX);
       closeButtonY.setValue(pageY);
       closeButtonWidth.setValue(width);
       closeButtonHeight.setValue(height);
     });
   }, [
     closeButton,
     onCloseButtonLayoutCalled,
     closeButtonX,
     closeButtonY,
     closeButtonWidth,
     closeButtonHeight,
   ]);
 
   const footerX = useValue(-1);
   const footerY = useValue(-1);
   const footerWidth = useValue(-1);
   const footerHeight = useValue(-1);
   const footerRef = React.useRef();
   const footer = footerRef.current;
   const onFooterLayoutCalledRef = React.useRef(false);
   const onFooterLayout = React.useCallback(() => {
     onFooterLayoutCalledRef.current = true;
   }, []);
   const onFooterLayoutCalled = onFooterLayoutCalledRef.current;
   React.useEffect(() => {
     if (!footer || !onFooterLayoutCalled) {
       return;
     }
     footer.measure((x, y, width, height, pageX, pageY) => {
       footerX.setValue(pageX);
       footerY.setValue(pageY);
       footerWidth.setValue(width);
       footerHeight.setValue(height);
     });
   }, [
     footer,
     onFooterLayoutCalled,
     footerX,
     footerY,
     footerWidth,
     footerHeight,
   ]);
 
   const controlsShowing = useValue(1);
   const outsideButtons = React.useCallback(
     (x, y) =>
       and(
         or(
           eq(controlsShowing, 0),
           lessThan(x, closeButtonX),
           greaterThan(x, add(closeButtonX, closeButtonWidth)),
           lessThan(y, closeButtonY),
           greaterThan(y, add(closeButtonY, closeButtonHeight)),
         ),
         or(
           eq(controlsShowing, 0),
           lessThan(x, footerX),
           greaterThan(x, add(footerX, footerWidth)),
           lessThan(y, footerY),
           greaterThan(y, add(footerY, footerHeight)),
         ),
       ),
     [
       controlsShowing,
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       footerX,
       footerY,
       footerWidth,
       footerHeight,
     ],
   );
 
   /* ===== START FADE CONTROL ANIMATION ===== */
 
   const singleTapState = useValue(-1);
   const singleTapX = useValue(0);
   const singleTapY = useValue(0);
 
   const singleTapEvent = React.useMemo(
     () =>
       event([
         {
           nativeEvent: {
             state: singleTapState,
             x: singleTapX,
             y: singleTapY,
           },
         },
       ]),
     [singleTapState, singleTapX, singleTapY],
   );
 
   const lastTapX = useValue(-1);
   const lastTapY = useValue(-1);
 
   const activeControlsOpacity = React.useMemo(
     () =>
       animateTowards(
         block([
           cond(
             and(
               gestureJustEnded(singleTapState),
               outsideButtons(lastTapX, lastTapY),
             ),
             set(controlsShowing, not(controlsShowing)),
           ),
           set(lastTapX, singleTapX),
           set(lastTapY, singleTapY),
           controlsShowing,
         ]),
         150,
       ),
     [
       singleTapState,
       controlsShowing,
       outsideButtons,
       lastTapX,
       lastTapY,
       singleTapX,
       singleTapY,
     ],
   );
 
   const [controlsEnabled, setControlsEnabled] = React.useState(true);
   const enableControls = React.useCallback(() => setControlsEnabled(true), []);
   const disableControls = React.useCallback(
     () => setControlsEnabled(false),
     [],
   );
 
   const previousOpacityCeiling = useValue(-1);
   const opacityCeiling = React.useMemo(() => ceil(activeControlsOpacity), [
     activeControlsOpacity,
   ]);
 
   const opacityJustChanged = React.useMemo(
     () =>
       cond(eq(previousOpacityCeiling, opacityCeiling), 0, [
         set(previousOpacityCeiling, opacityCeiling),
         1,
       ]),
     [previousOpacityCeiling, opacityCeiling],
   );
 
   const toggleControls = React.useMemo(
     () => [
       cond(
         and(eq(opacityJustChanged, 1), eq(opacityCeiling, 0)),
         call([], disableControls),
       ),
       cond(
         and(eq(opacityJustChanged, 1), eq(opacityCeiling, 1)),
         call([], enableControls),
       ),
     ],
     [opacityJustChanged, opacityCeiling, disableControls, enableControls],
   );
 
   /* ===== END FADE CONTROL ANIMATION ===== */
 
   const mediaDimensions = mediaInfo.dimensions;
   const screenDimensions = useSelector(derivedDimensionsInfoSelector);
 
   const frame = React.useMemo(
     () => ({
       width: screenDimensions.width,
       height: screenDimensions.safeAreaHeight,
     }),
     [screenDimensions],
   );
 
   const mediaDisplayDimensions = React.useMemo(() => {
     let { height: maxHeight, width: maxWidth } = frame;
     if (maxHeight > maxWidth) {
       maxHeight -= 100;
     } else {
       maxWidth -= 100;
     }
 
     if (
       mediaDimensions.height < maxHeight &&
       mediaDimensions.width < maxWidth
     ) {
       return mediaDimensions;
     }
 
     const heightRatio = maxHeight / mediaDimensions.height;
     const widthRatio = maxWidth / mediaDimensions.width;
 
     if (heightRatio < widthRatio) {
       return {
         height: maxHeight,
         width: mediaDimensions.width * heightRatio,
       };
     } else {
       return {
         width: maxWidth,
         height: mediaDimensions.height * widthRatio,
       };
     }
   }, [frame, mediaDimensions]);
 
   const centerX = useValue(frame.width / 2);
   const centerY = useValue(frame.height / 2 + screenDimensions.topInset);
   const frameWidth = useValue(frame.width);
   const frameHeight = useValue(frame.height);
   const imageWidth = useValue(mediaDisplayDimensions.width);
   const imageHeight = useValue(mediaDisplayDimensions.height);
 
   React.useEffect(() => {
     const { width: frameW, height: frameH } = frame;
     const { topInset } = screenDimensions;
     frameWidth.setValue(frameW);
     frameHeight.setValue(frameH);
 
     centerX.setValue(frameW / 2);
     centerY.setValue(frameH / 2 + topInset);
 
     const { width, height } = mediaDisplayDimensions;
     imageWidth.setValue(width);
     imageHeight.setValue(height);
   }, [
     screenDimensions,
     frame,
     mediaDisplayDimensions,
     frameWidth,
     frameHeight,
     centerX,
     centerY,
     imageWidth,
     imageHeight,
   ]);
 
   const left = React.useMemo(() => sub(centerX, divide(imageWidth, 2)), [
     centerX,
     imageWidth,
   ]);
   const top = React.useMemo(() => sub(centerY, divide(imageHeight, 2)), [
     centerY,
     imageHeight,
   ]);
 
   const { initialCoordinates } = props.route.params;
 
   const initialScale = React.useMemo(
     () => divide(initialCoordinates.width, imageWidth),
     [initialCoordinates, imageWidth],
   );
 
   const initialTranslateX = React.useMemo(
     () =>
       sub(
         initialCoordinates.x + initialCoordinates.width / 2,
         add(left, divide(imageWidth, 2)),
       ),
     [initialCoordinates, left, imageWidth],
   );
 
   const initialTranslateY = React.useMemo(
     () =>
       sub(
         initialCoordinates.y + initialCoordinates.height / 2,
         add(top, divide(imageHeight, 2)),
       ),
     [initialCoordinates, top, imageHeight],
   );
 
   // The all-important outputs
   const curScale = useValue(1);
   const curX = useValue(0);
   const curY = useValue(0);
   const curBackdropOpacity = useValue(1);
 
   const progressiveOpacity = React.useMemo(
     () =>
       max(
         min(
           sub(1, abs(divide(curX, frameWidth))),
           sub(1, abs(divide(curY, frameHeight))),
         ),
         0,
       ),
     [curX, curY, frameWidth, frameHeight],
   );
 
   const updates = React.useMemo(
     () => [toggleControls, set(curBackdropOpacity, progressiveOpacity)],
     [curBackdropOpacity, progressiveOpacity, toggleControls],
   );
   const updatedScale = React.useMemo(() => [updates, curScale], [
     updates,
     curScale,
   ]);
   const updatedCurX = React.useMemo(() => [updates, curX], [updates, curX]);
   const updatedCurY = React.useMemo(() => [updates, curY], [updates, curY]);
   const updatedBackdropOpacity = React.useMemo(
     () => [updates, curBackdropOpacity],
     [updates, curBackdropOpacity],
   );
 
   const updatedActiveControlsOpacity = React.useMemo(
     () => block([updates, activeControlsOpacity]),
     [updates, activeControlsOpacity],
   );
 
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'VideoPlaybackModal should have OverlayContext');
   const navigationProgress = overlayContext.position;
 
   const reverseNavigationProgress = React.useMemo(
     () => sub(1, navigationProgress),
     [navigationProgress],
   );
 
   const dismissalButtonOpacity = interpolateNode(updatedBackdropOpacity, {
     inputRange: [0.95, 1],
     outputRange: [0, 1],
     extrapolate: Extrapolate.CLAMP,
   });
   const controlsOpacity = multiply(
     navigationProgress,
     dismissalButtonOpacity,
     updatedActiveControlsOpacity,
   );
 
   const scale = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialScale),
         multiply(navigationProgress, updatedScale),
       ),
     [reverseNavigationProgress, initialScale, navigationProgress, updatedScale],
   );
 
   const x = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialTranslateX),
         multiply(navigationProgress, updatedCurX),
       ),
     [
       reverseNavigationProgress,
       initialTranslateX,
       navigationProgress,
       updatedCurX,
     ],
   );
 
   const y = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialTranslateY),
         multiply(navigationProgress, updatedCurY),
       ),
     [
       reverseNavigationProgress,
       initialTranslateY,
       navigationProgress,
       updatedCurY,
     ],
   );
 
   const backdropOpacity = React.useMemo(
     () => multiply(navigationProgress, updatedBackdropOpacity),
     [navigationProgress, updatedBackdropOpacity],
   );
 
   const imageContainerOpacity = React.useMemo(
     () =>
       interpolateNode(navigationProgress, {
         inputRange: [0, 0.1],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       }),
     [navigationProgress],
   );
 
   const { verticalBounds } = props.route.params;
   const videoContainerStyle = React.useMemo(() => {
     const { height, width } = mediaDisplayDimensions;
     const { height: frameH, width: frameW } = frame;
 
     return {
       height,
       width,
       marginTop:
         (frameH - height) / 2 + screenDimensions.topInset - verticalBounds.y,
       marginLeft: (frameW - width) / 2,
       opacity: imageContainerOpacity,
       transform: [{ translateX: x }, { translateY: y }, { scale: scale }],
     };
   }, [
     mediaDisplayDimensions,
     frame,
     screenDimensions.topInset,
     verticalBounds.y,
     imageContainerOpacity,
     x,
     y,
     scale,
   ]);
 
   const styles = useStyles(unboundStyles);
 
   const [paused, setPaused] = useState(false);
   const [percentElapsed, setPercentElapsed] = useState(0);
   const [spinnerVisible, setSpinnerVisible] = useState(true);
   const [timeElapsed, setTimeElapsed] = useState('0:00');
   const [totalDuration, setTotalDuration] = useState('0:00');
   const videoRef = React.useRef();
 
   const backgroundedOrInactive = useIsAppBackgroundedOrInactive();
   React.useEffect(() => {
     if (backgroundedOrInactive) {
       setPaused(true);
       controlsShowing.setValue(1);
     }
   }, [backgroundedOrInactive, controlsShowing]);
 
   const {
     navigation,
     route: {
       params: {
         mediaInfo: { uri: videoUri },
       },
     },
   } = props;
 
   const togglePlayback = React.useCallback(() => {
     setPaused(!paused);
   }, [paused]);
 
   const resetVideo = React.useCallback(() => {
     invariant(videoRef.current, 'videoRef.current should be set in resetVideo');
     videoRef.current.seek(0);
   }, []);
 
   const progressCallback = React.useCallback(res => {
     setTimeElapsed(formatDuration(res.currentTime));
     setTotalDuration(formatDuration(res.seekableDuration));
     setPercentElapsed(
       Math.ceil((res.currentTime / res.seekableDuration) * 100),
     );
   }, []);
 
   const readyForDisplayCallback = React.useCallback(() => {
     setSpinnerVisible(false);
   }, []);
 
   const statusBar = overlayContext.isDismissing ? null : (
     <ConnectedStatusBar hidden />
   );
 
   const backdropStyle = React.useMemo(() => ({ opacity: backdropOpacity }), [
     backdropOpacity,
   ]);
 
   const contentContainerStyle = React.useMemo(() => {
     const fullScreenHeight = screenDimensions.height;
     const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height;
 
     // margin will clip, but padding won't
     const verticalStyle = overlayContext.isDismissing
       ? { marginTop: verticalBounds.y, marginBottom: bottom }
       : { paddingTop: verticalBounds.y, paddingBottom: bottom };
     return [styles.contentContainer, verticalStyle];
   }, [
     screenDimensions.height,
     verticalBounds.y,
     verticalBounds.height,
     overlayContext.isDismissing,
     styles.contentContainer,
   ]);
 
   const controls = (
     <Animated.View
       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>
   );
 
   let spinner;
   if (spinnerVisible) {
     spinner = (
       <Progress.Circle
         size={80}
         indeterminate={true}
         color="white"
         style={styles.progressCircle}
       />
     );
   }
 
   return (
     <TapGestureHandler onHandlerStateChange={singleTapEvent} minPointers={1}>
       <Animated.View style={styles.expand}>
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={contentContainerStyle}>
           {spinner}
           <Animated.View style={videoContainerStyle}>
             <Video
               source={{ uri: videoUri }}
               ref={videoRef}
               style={styles.backgroundVideo}
               paused={paused}
               onProgress={progressCallback}
               onEnd={resetVideo}
               onReadyForDisplay={readyForDisplayCallback}
             />
           </Animated.View>
         </View>
         {controls}
       </Animated.View>
     </TapGestureHandler>
   );
 }
 
 const unboundStyles = {
   expand: {
     flex: 1,
   },
   backgroundVideo: {
     position: 'absolute',
     top: 0,
     left: 0,
     bottom: 0,
     right: 0,
   },
   footer: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
     backgroundColor: 'rgba(52,52,52,0.6)',
     height: 76,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 8,
   },
   header: {
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
   },
   playPauseButton: {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
   closeButton: {
     paddingTop: 10,
     paddingRight: 20,
     justifyContent: 'flex-end',
     alignItems: 'center',
     flexDirection: 'row',
     height: 100,
   },
   progressBar: {
     flex: 1,
     position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
     color: 'white',
     paddingRight: 10,
     display: 'flex',
     flexDirection: 'row',
   },
   progressCircle: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   iconButton: {
     marginHorizontal: 10,
     color: 'white',
   },
   durationText: {
     color: 'white',
     fontSize: 11,
     width: 70,
   },
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   controls: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
+  fill: {
+    flex: 1,
+  },
 };
 
 export default VideoPlaybackModal;