diff --git a/lib/shared/lifecycle-utils.js b/lib/shared/lifecycle-utils.js
new file mode 100644
index 000000000..30ab7b676
--- /dev/null
+++ b/lib/shared/lifecycle-utils.js
@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+
+function useIsAppForegrounded() {
+  return useSelector((state) => state.foreground);
+}
+
+export { useIsAppForegrounded };
diff --git a/lib/socket/calendar-query-handler.react.js b/lib/socket/calendar-query-handler.react.js
index f23539f37..74c1d143a 100644
--- a/lib/socket/calendar-query-handler.react.js
+++ b/lib/socket/calendar-query-handler.react.js
@@ -1,144 +1,145 @@
 // @flow
 
 import _isEqual from 'lodash/fp/isEqual';
 import * as React from 'react';
 
 import {
   updateCalendarQueryActionTypes,
   updateCalendarQuery,
 } from '../actions/entry-actions';
 import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors';
+import { useIsAppForegrounded } from '../shared/lifecycle-utils';
 import type {
   CalendarQuery,
   CalendarQueryUpdateResult,
   CalendarQueryUpdateStartingPayload,
 } from '../types/entry-types';
 import { type ConnectionInfo } from '../types/socket-types';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from '../utils/action-utils';
 import { useSelector } from '../utils/redux-utils';
 
 type BaseProps = {|
   +currentCalendarQuery: () => CalendarQuery,
   +frozen: boolean,
 |};
 type Props = {|
   ...BaseProps,
   +connection: ConnectionInfo,
   +lastUserInteractionCalendar: number,
   +foreground: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +updateCalendarQuery: (
     calendarQuery: CalendarQuery,
     reduxAlreadyUpdated?: boolean,
   ) => Promise<CalendarQueryUpdateResult>,
 |};
 class CalendarQueryHandler extends React.PureComponent<Props> {
   serverCalendarQuery: CalendarQuery;
   expirationTimeoutID: ?TimeoutID;
 
   constructor(props: Props) {
     super(props);
     this.serverCalendarQuery = this.props.connection.actualizedCalendarQuery;
   }
 
   componentDidMount() {
     if (this.props.connection.status === 'connected') {
       this.possiblyUpdateCalendarQuery();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const { actualizedCalendarQuery } = this.props.connection;
     if (this.props.connection.status !== 'connected') {
       if (!_isEqual(this.serverCalendarQuery)(actualizedCalendarQuery)) {
         this.serverCalendarQuery = actualizedCalendarQuery;
       }
       return;
     }
 
     if (
       !_isEqual(this.serverCalendarQuery)(actualizedCalendarQuery) &&
       _isEqual(this.props.currentCalendarQuery())(actualizedCalendarQuery)
     ) {
       this.serverCalendarQuery = actualizedCalendarQuery;
     }
 
     const shouldUpdate =
       (this.isExpired ||
         prevProps.connection.status !== 'connected' ||
         this.props.currentCalendarQuery !== prevProps.currentCalendarQuery) &&
       this.shouldUpdateCalendarQuery;
 
     if (shouldUpdate) {
       this.updateCalendarQuery();
     }
   }
 
   render() {
     return null;
   }
 
   get isExpired() {
     const timeUntilExpiration = timeUntilCalendarRangeExpiration(
       this.props.lastUserInteractionCalendar,
     );
     return (
       timeUntilExpiration !== null &&
       timeUntilExpiration !== undefined &&
       timeUntilExpiration <= 0
     );
   }
 
   get shouldUpdateCalendarQuery() {
     if (this.props.connection.status !== 'connected' || this.props.frozen) {
       return false;
     }
     const calendarQuery = this.props.currentCalendarQuery();
     return !_isEqual(calendarQuery)(this.serverCalendarQuery);
   }
 
   updateCalendarQuery() {
     const calendarQuery = this.props.currentCalendarQuery();
     this.serverCalendarQuery = calendarQuery;
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(calendarQuery, true),
       undefined,
       ({ calendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   }
 
   possiblyUpdateCalendarQuery = () => {
     if (this.shouldUpdateCalendarQuery) {
       this.updateCalendarQuery();
     }
   };
 }
 
 export default React.memo<BaseProps>(function ConnectedCalendarQueryHandler(
   props: BaseProps,
 ) {
   const connection = useSelector((state) => state.connection);
   const lastUserInteractionCalendar = useSelector(
     (state) => state.entryStore.lastUserInteractionCalendar,
   );
   // We include this so that componentDidUpdate will be called on foreground
-  const foreground = useSelector((state) => state.foreground);
+  const foreground = useIsAppForegrounded();
   const callUpdateCalendarQuery = useServerCall(updateCalendarQuery);
   const dispatchActionPromise = useDispatchActionPromise();
 
   return (
     <CalendarQueryHandler
       {...props}
       connection={connection}
       lastUserInteractionCalendar={lastUserInteractionCalendar}
       foreground={foreground}
       updateCalendarQuery={callUpdateCalendarQuery}
       dispatchActionPromise={dispatchActionPromise}
     />
   );
 });
diff --git a/native/chat/message-store-pruner.react.js b/native/chat/message-store-pruner.react.js
index 347a6bb75..02550a758 100644
--- a/native/chat/message-store-pruner.react.js
+++ b/native/chat/message-store-pruner.react.js
@@ -1,68 +1,69 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { messageStorePruneActionType } from 'lib/actions/message-actions';
+import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 
 import { NavContext } from '../navigation/navigation-context';
 import { useSelector } from '../redux/redux-utils';
 import {
   nextMessagePruneTimeSelector,
   pruneThreadIDsSelector,
 } from '../selectors/message-selectors';
 
 function MessageStorePruner() {
   const nextMessagePruneTime = useSelector(nextMessagePruneTimeSelector);
   const prevNextMessagePruneTimeRef = React.useRef(nextMessagePruneTime);
 
-  const foreground = useSelector((state) => state.foreground);
+  const foreground = useIsAppForegrounded();
   const frozen = useSelector((state) => state.frozen);
 
   const navContext = React.useContext(NavContext);
   const pruneThreadIDs = useSelector((state) =>
     pruneThreadIDsSelector({
       redux: state,
       navContext,
     }),
   );
 
   const prunedRef = React.useRef(false);
 
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     if (
       prunedRef.current &&
       nextMessagePruneTime !== prevNextMessagePruneTimeRef.current
     ) {
       prunedRef.current = false;
     }
     prevNextMessagePruneTimeRef.current = nextMessagePruneTime;
 
     if (frozen || prunedRef.current) {
       return;
     }
     if (nextMessagePruneTime === null || nextMessagePruneTime === undefined) {
       return;
     }
     const timeUntilExpiration = nextMessagePruneTime - Date.now();
     if (timeUntilExpiration > 0) {
       return;
     }
     const threadIDs = pruneThreadIDs();
     if (threadIDs.length === 0) {
       return;
     }
     prunedRef.current = true;
     dispatch({
       type: messageStorePruneActionType,
       payload: { threadIDs },
     });
     // We include foreground so this effect will be called on foreground
   }, [nextMessagePruneTime, frozen, foreground, pruneThreadIDs, dispatch]);
 
   return null;
 }
 
 export default MessageStorePruner;
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index 40a04b804..71ac1b4e3 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1247 +1,1248 @@
 // @flow
 
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
   Image,
   Animated,
   Easing,
   Alert,
 } 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, {
   Easing as ReanimatedEasing,
 } from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { useDispatch } from 'react-redux';
 
 import { pathFromURI, filenameFromPathOrURI } from 'lib/media/file-utils';
+import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 import { useRealThreadCreator } from 'lib/shared/thread-utils';
 import type { PhotoCapture } from 'lib/types/media-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import type { OptimisticThreadInfo } from 'lib/types/thread-types';
 import { optimisticThreadInfoPropType } from 'lib/types/thread-types';
 
 import ContentLoading from '../components/content-loading.react';
 import ConnectedStatusBar from '../connected-status-bar.react';
 import {
   type InputState,
   inputStatePropType,
   InputStateContext,
 } from '../input/input-state';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import {
   OverlayContext,
   type OverlayContextType,
   overlayContextPropType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types';
 import {
   type DimensionsInfo,
   dimensionsInfoPropType,
 } from '../redux/dimensions-updater.react';
 import { useSelector } from '../redux/redux-utils';
 import { colors } from '../themes/colors';
 import {
   type DeviceCameraInfo,
   deviceCameraInfoPropType,
 } from '../types/camera';
 import type { NativeMethods } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import { clamp, gestureJustEnded } from '../utils/animation-utils';
 import SendMediaButton from './send-media-button.react';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   abs,
   interpolate,
   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: Value,
   // Outputs
   scale: Value,
   opacity: Value,
 ): Value {
   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: OptimisticThreadInfo,
 |};
 
 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,
   +getServerThreadID: () => Promise<?string>,
   // 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> {
   static propTypes = {
     navigation: PropTypes.shape({
       goBackOnce: PropTypes.func.isRequired,
     }).isRequired,
     route: PropTypes.shape({
       params: PropTypes.shape({
         thread: optimisticThreadInfoPropType.isRequired,
       }).isRequired,
     }).isRequired,
     dimensions: dimensionsInfoPropType.isRequired,
     deviceCameraInfo: deviceCameraInfoPropType.isRequired,
     deviceOrientation: PropTypes.string.isRequired,
     foreground: PropTypes.bool.isRequired,
     dispatch: PropTypes.func.isRequired,
     getServerThreadID: PropTypes.func.isRequired,
     inputState: inputStatePropType,
     overlayContext: overlayContextPropType,
   };
   camera: ?RNCamera;
 
   pinchEvent;
   pinchHandler = React.createRef();
   tapEvent;
   tapHandler = React.createRef();
   animationCode: Value;
 
   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: ViewStyle;
 
   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 = interpolate(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: Value, pinchScale: Value): Value {
     const pinchJustEnded = gestureJustEnded(pinchState);
 
     const zoomBase = new Value(1);
     const zoomReported = new Value(1);
 
     const currentZoom = interpolate(multiply(zoomBase, pinchScale), {
       inputRange: [1, 8],
       outputRange: [1, 8],
       extrapolate: Extrapolate.CLAMP,
     });
     const cameraZoomFactor = interpolate(zoomReported, {
       inputRange: [1, 8],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const resolvedZoom = cond(
       eq(pinchState, GestureState.ACTIVE),
       currentZoom,
       zoomBase,
     );
 
     return [
       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: Value, tapX: Value, tapY: Value): Value {
     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 [
       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: Value, y: Value) {
     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>
       </>
     );
   };
 
   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}
         />
       </>
     );
   }
 
   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-reverse-camera" 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]}
                 ref={this.flashButtonRef}
               >
                 {flashIcon}
               </TouchableOpacity>
               <View
                 style={[
                   styles.bottomButtonsContainer,
                   bottomButtonsContainerStyle,
                 ]}
               >
                 <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>
         <Reanimated.View 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;
     const threadID = await this.props.getServerThreadID();
     if (!pendingPhotoCapture || !threadID) {
       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(threadID, [capture]);
   };
 
   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',
     flexDirection: 'row',
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
   },
   closeButton: {
     left: 16,
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
   },
   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,
   },
   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',
   },
   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: {
     position: 'absolute',
     right: 32,
   },
   stagingImage: {
     backgroundColor: 'black',
     flex: 1,
     resizeMode: 'contain',
   },
   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 showErrorAlert = () =>
   Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
     cancelable: false,
   });
 
 export default 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 = useSelector((state) => state.foreground);
+  const foreground = useIsAppForegrounded();
   const overlayContext = React.useContext(OverlayContext);
   const inputState = React.useContext(InputStateContext);
   const dispatch = useDispatch();
   const getServerThreadID = useRealThreadCreator(
     props.route.params.thread,
     showErrorAlert,
   );
   return (
     <CameraModal
       {...props}
       dimensions={dimensions}
       deviceCameraInfo={deviceCameraInfo}
       deviceOrientation={deviceOrientation}
       foreground={foreground}
       dispatch={dispatch}
       overlayContext={overlayContext}
       inputState={inputState}
       getServerThreadID={getServerThreadID}
     />
   );
 });
diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index 2028908d3..bff25ab7a 100644
--- a/native/media/media-gallery-keyboard.react.js
+++ b/native/media/media-gallery-keyboard.react.js
@@ -1,555 +1,556 @@
 // @flow
 
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   ActivityIndicator,
   Animated,
   Easing,
   Platform,
 } from 'react-native';
 import { KeyboardRegistry } from 'react-native-keyboard-input';
 import { Provider } from 'react-redux';
 
 import { extensionFromFilename } from 'lib/media/file-utils';
+import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 import type { MediaLibrarySelection } from 'lib/types/media-types';
 
 import type { DimensionsInfo } from '../redux/dimensions-updater.react';
 import { store } from '../redux/redux-setup';
 import { useSelector } from '../redux/redux-utils';
 import { type Colors, useColors, useStyles } from '../themes/colors';
 import type { ViewToken, LayoutEvent } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import { getCompatibleMediaURI } from './identifier-utils';
 import MediaGalleryMedia from './media-gallery-media.react';
 import SendMediaButton from './send-media-button.react';
 
 const animationSpec = {
   duration: 400,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 type Props = {|
   // Redux state
   +dimensions: DimensionsInfo,
   +foreground: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
 |};
 type State = {|
   +selections: ?$ReadOnlyArray<MediaLibrarySelection>,
   +error: ?string,
   +containerHeight: ?number,
   // null means end reached; undefined means no fetch yet
   +cursor: ?string,
   +queuedMediaURIs: ?Set<string>,
   +focusedMediaURI: ?string,
   +dimensions: DimensionsInfo,
 |};
 class MediaGalleryKeyboard extends React.PureComponent<Props, State> {
   mounted = false;
   fetchingPhotos = false;
   flatList: ?FlatList<MediaLibrarySelection>;
   viewableIndices: number[] = [];
   queueModeProgress = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   mediaSelected = false;
 
   constructor(props: Props) {
     super(props);
     const sendButtonScale = this.queueModeProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.3, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.queueModeProgress,
       transform: [{ scale: sendButtonScale }],
     };
     this.state = {
       selections: null,
       error: null,
       containerHeight: null,
       cursor: undefined,
       queuedMediaURIs: null,
       focusedMediaURI: null,
       dimensions: props.dimensions,
     };
   }
 
   static getDerivedStateFromProps(props: Props) {
     // We keep this in state since we pass this.state as
     // FlatList's extraData prop
     return { dimensions: props.dimensions };
   }
 
   componentDidMount() {
     this.mounted = true;
     return this.fetchPhotos();
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { queuedMediaURIs } = this.state;
     const prevQueuedMediaURIs = prevState.queuedMediaURIs;
     if (queuedMediaURIs && !prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 1,
       }).start();
     } else if (!queuedMediaURIs && prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 0,
       }).start();
     }
 
     const { flatList, viewableIndices } = this;
     const { selections, focusedMediaURI } = this.state;
     let scrollingSomewhere = false;
     if (flatList && selections) {
       let newURI;
       if (focusedMediaURI && focusedMediaURI !== prevState.focusedMediaURI) {
         newURI = focusedMediaURI;
       } else if (
         queuedMediaURIs &&
         (!prevQueuedMediaURIs ||
           queuedMediaURIs.size > prevQueuedMediaURIs.size)
       ) {
         const flowMadeMeDoThis = queuedMediaURIs;
         for (let queuedMediaURI of flowMadeMeDoThis) {
           if (prevQueuedMediaURIs && prevQueuedMediaURIs.has(queuedMediaURI)) {
             continue;
           }
           newURI = queuedMediaURI;
           break;
         }
       }
       let index;
       if (newURI !== null && newURI !== undefined) {
         index = selections.findIndex(({ uri }) => uri === newURI);
       }
       if (index !== null && index !== undefined) {
         if (index === viewableIndices[0]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index });
         } else if (index === viewableIndices[viewableIndices.length - 1]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index, viewPosition: 1 });
         }
       }
     }
 
     if (this.props.foreground && !prevProps.foreground) {
       this.fetchPhotos();
     }
 
     if (
       !scrollingSomewhere &&
       this.flatList &&
       this.state.selections &&
       prevState.selections &&
       this.state.selections.length > 0 &&
       prevState.selections.length > 0 &&
       this.state.selections[0].uri !== prevState.selections[0].uri
     ) {
       this.flatList.scrollToIndex({ index: 0 });
     }
   }
 
   guardedSetState(change) {
     if (this.mounted) {
       this.setState(change);
     }
   }
 
   async fetchPhotos(after?: ?string) {
     if (this.fetchingPhotos) {
       return;
     }
     this.fetchingPhotos = true;
     try {
       const hasPermission = await this.getPermissions();
       if (!hasPermission) {
         return;
       }
       const {
         assets,
         endCursor,
         hasNextPage,
       } = await MediaLibrary.getAssetsAsync({
         first: 20,
         after,
         mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
         sortBy: [MediaLibrary.SortBy.modificationTime],
       });
 
       let firstRemoved = false,
         lastRemoved = false;
 
       const mediaURIs = this.state.selections
         ? this.state.selections.map(({ uri }) => uri)
         : [];
       const existingURIs = new Set(mediaURIs);
       let first = true;
       const selections = assets
         .map((asset) => {
           const { id, height, width, filename, mediaType, duration } = asset;
           const isVideo = mediaType === MediaLibrary.MediaType.video;
           const uri = getCompatibleMediaURI(
             asset.uri,
             extensionFromFilename(filename),
           );
 
           if (existingURIs.has(uri)) {
             if (first) {
               firstRemoved = true;
             }
             lastRemoved = true;
             first = false;
             return null;
           }
           first = false;
           lastRemoved = false;
           existingURIs.add(uri);
 
           if (isVideo) {
             return {
               step: 'video_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               duration,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           } else {
             return {
               step: 'photo_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           }
         })
         .filter(Boolean);
 
       let appendOrPrepend = after ? 'append' : 'prepend';
       if (firstRemoved && !lastRemoved) {
         appendOrPrepend = 'append';
       } else if (!firstRemoved && lastRemoved) {
         appendOrPrepend = 'prepend';
       }
 
       let newSelections = selections;
       if (this.state.selections) {
         if (appendOrPrepend === 'prepend') {
           newSelections = [...newSelections, ...this.state.selections];
         } else {
           newSelections = [...this.state.selections, ...newSelections];
         }
       }
 
       this.guardedSetState({
         selections: newSelections,
         error: null,
         cursor: hasNextPage ? endCursor : null,
       });
     } catch (e) {
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
     this.fetchingPhotos = false;
   }
 
   async getPermissions(): Promise<boolean> {
     const { granted } = await MediaLibrary.requestPermissionsAsync();
     if (!granted) {
       this.guardedSetState({ error: "don't have permission :(" });
     }
     return granted;
   }
 
   get queueModeActive() {
     return !!this.state.queuedMediaURIs;
   }
 
   renderItem = (row: { item: MediaLibrarySelection }) => {
     const { containerHeight, queuedMediaURIs } = this.state;
     invariant(containerHeight, 'should be set');
     const { uri } = row.item;
     const isQueued = !!(queuedMediaURIs && queuedMediaURIs.has(uri));
     const { queueModeActive } = this;
     return (
       <MediaGalleryMedia
         selection={row.item}
         containerHeight={containerHeight}
         queueModeActive={queueModeActive}
         isQueued={isQueued}
         setMediaQueued={this.setMediaQueued}
         sendMedia={this.sendSingleMedia}
         isFocused={this.state.focusedMediaURI === uri}
         setFocus={this.setFocus}
         dimensions={this.state.dimensions}
       />
     );
   };
 
   ItemSeparator = () => {
     return <View style={this.props.styles.separator} />;
   };
 
   static keyExtractor(item: MediaLibrarySelection) {
     return item.uri;
   }
 
   render() {
     let content;
     const { selections, error, containerHeight } = this.state;
     const bottomOffsetStyle: ViewStyle = {
       marginBottom: this.props.dimensions.bottomInset,
     };
     if (selections && selections.length > 0 && containerHeight) {
       content = (
         <FlatList
           horizontal={true}
           data={selections}
           renderItem={this.renderItem}
           ItemSeparatorComponent={this.ItemSeparator}
           keyExtractor={MediaGalleryKeyboard.keyExtractor}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={5}
           onViewableItemsChanged={this.onViewableItemsChanged}
           extraData={this.state}
           ref={this.flatListRef}
         />
       );
     } else if (selections && containerHeight) {
       content = (
         <Text style={this.props.styles.error}>no media was found!</Text>
       );
     } else if (error) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           {error}
         </Text>
       );
     } else {
       content = (
         <ActivityIndicator
           color={this.props.colors.listSeparatorLabel}
           size="large"
           style={[this.props.styles.loadingIndicator, bottomOffsetStyle]}
         />
       );
     }
 
     const { queuedMediaURIs } = this.state;
     const queueCount = queuedMediaURIs ? queuedMediaURIs.size : 0;
     const bottomInset = Platform.select({
       ios: -1 * this.props.dimensions.bottomInset,
       default: 0,
     });
     const containerStyle = { bottom: bottomInset };
     return (
       <View
         style={[this.props.styles.container, containerStyle]}
         onLayout={this.onContainerLayout}
       >
         {content}
         <SendMediaButton
           onPress={this.sendQueuedMedia}
           queueCount={queueCount}
           pointerEvents={queuedMediaURIs ? 'auto' : 'none'}
           containerStyle={[
             this.props.styles.sendButtonContainer,
             bottomOffsetStyle,
           ]}
           style={this.sendButtonStyle}
         />
       </View>
     );
   }
 
   flatListRef = (flatList: ?FlatList<MediaLibrarySelection>) => {
     this.flatList = flatList;
   };
 
   onContainerLayout = (event: LayoutEvent) => {
     this.guardedSetState({ containerHeight: event.nativeEvent.layout.height });
   };
 
   onEndReached = () => {
     const { cursor } = this.state;
     if (cursor !== null) {
       this.fetchPhotos(cursor);
     }
   };
 
   onViewableItemsChanged = (info: {
     viewableItems: ViewToken[],
     changed: ViewToken[],
   }) => {
     const viewableIndices = [];
     for (let { index } of info.viewableItems) {
       if (index !== null && index !== undefined) {
         viewableIndices.push(index);
       }
     }
     this.viewableIndices = viewableIndices;
   };
 
   setMediaQueued = (selection: MediaLibrarySelection, isQueued: boolean) => {
     this.setState((prevState: State) => {
       const prevQueuedMediaURIs = prevState.queuedMediaURIs
         ? [...prevState.queuedMediaURIs]
         : [];
       if (isQueued) {
         return {
           queuedMediaURIs: new Set([...prevQueuedMediaURIs, selection.uri]),
           focusedMediaURI: null,
         };
       }
       const queuedMediaURIs = prevQueuedMediaURIs.filter(
         (uri) => uri !== selection.uri,
       );
       if (queuedMediaURIs.length < prevQueuedMediaURIs.length) {
         return {
           queuedMediaURIs: new Set(queuedMediaURIs),
           focusedMediaURI: null,
         };
       }
       return null;
     });
   };
 
   setFocus = (selection: MediaLibrarySelection, isFocused: boolean) => {
     const { uri } = selection;
     if (isFocused) {
       this.setState({ focusedMediaURI: uri });
     } else if (this.state.focusedMediaURI === uri) {
       this.setState({ focusedMediaURI: null });
     }
   };
 
   sendSingleMedia = (selection: MediaLibrarySelection) => {
     this.sendMedia([selection]);
   };
 
   sendQueuedMedia = () => {
     const { selections, queuedMediaURIs } = this.state;
     if (!selections || !queuedMediaURIs) {
       return;
     }
     const queuedSelections = [];
     for (let uri of queuedMediaURIs) {
       for (let selection of selections) {
         if (selection.uri === uri) {
           queuedSelections.push(selection);
           break;
         }
       }
     }
     this.sendMedia(queuedSelections);
   };
 
   sendMedia(selections: $ReadOnlyArray<MediaLibrarySelection>) {
     if (this.mediaSelected) {
       return;
     }
     this.mediaSelected = true;
 
     const now = Date.now();
     const timeProps = {
       selectTime: now,
       sendTime: now,
     };
     const selectionsWithTime = selections.map((selection) => ({
       ...selection,
       ...timeProps,
     }));
 
     KeyboardRegistry.onItemSelected(
       mediaGalleryKeyboardName,
       selectionsWithTime,
     );
   }
 }
 
 const mediaGalleryKeyboardName = 'MediaGalleryKeyboard';
 
 const unboundStyles = {
   container: {
     alignItems: 'center',
     backgroundColor: 'listBackground',
     flexDirection: 'row',
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   error: {
     color: 'listBackgroundLabel',
     flex: 1,
     fontSize: 28,
     textAlign: 'center',
   },
   loadingIndicator: {
     flex: 1,
   },
   sendButtonContainer: {
     bottom: 20,
     position: 'absolute',
     right: 30,
   },
   separator: {
     width: 2,
   },
 };
 
 function ConnectedMediaGalleryKeyboard() {
   const dimensions = useSelector((state) => state.dimensions);
-  const foreground = useSelector((state) => state.foreground);
+  const foreground = useIsAppForegrounded();
   const colors = useColors();
   const styles = useStyles(unboundStyles);
   return (
     <MediaGalleryKeyboard
       dimensions={dimensions}
       foreground={foreground}
       colors={colors}
       styles={styles}
     />
   );
 }
 
 function ReduxMediaGalleryKeyboard() {
   return (
     <Provider store={store}>
       <ConnectedMediaGalleryKeyboard />
     </Provider>
   );
 }
 
 KeyboardRegistry.registerKeyboard(
   mediaGalleryKeyboardName,
   () => ReduxMediaGalleryKeyboard,
 );
 
 export { mediaGalleryKeyboardName };
diff --git a/web/redux/visibility-handler.react.js b/web/redux/visibility-handler.react.js
index 05435f335..eae5377a6 100644
--- a/web/redux/visibility-handler.react.js
+++ b/web/redux/visibility-handler.react.js
@@ -1,57 +1,57 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   backgroundActionType,
   foregroundActionType,
 } from 'lib/reducers/foreground-reducer';
+import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 
-import { useSelector } from './redux-utils';
 import { useVisibility } from './visibility';
 
 function VisibilityHandler() {
   const visibility = useVisibility();
   const [visible, setVisible] = React.useState(!visibility.hidden());
   const onVisibilityChange = React.useCallback((event, state: string) => {
     setVisible(state === 'visible');
   }, []);
   React.useEffect(() => {
     const listener = visibility.change(onVisibilityChange);
     return () => {
       visibility.unbind(listener);
     };
   }, [visibility, onVisibilityChange]);
 
   const dispatch = useDispatch();
-  const curForeground = useSelector((state) => state.foreground);
+  const curForeground = useIsAppForegrounded();
   const updateRedux = React.useCallback(
     (foreground) => {
       if (foreground === curForeground) {
         return;
       }
       if (foreground) {
         dispatch({ type: foregroundActionType, payload: null });
       } else {
         dispatch({ type: backgroundActionType, payload: null });
       }
     },
     [dispatch, curForeground],
   );
 
   const prevVisibleRef = React.useRef(curForeground);
   React.useEffect(() => {
     const prevVisible = prevVisibleRef.current;
     if (visible && !prevVisible) {
       updateRedux(true);
     } else if (!visible && prevVisible) {
       updateRedux(false);
     }
     prevVisibleRef.current = visible;
   }, [visible, updateRedux]);
 
   return null;
 }
 
 export default VisibilityHandler;