diff --git a/native/chat/chat-list.react.js b/native/chat/chat-list.react.js
index ef3e6c3f6..36da3a28c 100644
--- a/native/chat/chat-list.react.js
+++ b/native/chat/chat-list.react.js
@@ -1,305 +1,306 @@
 // @flow
 
 import invariant from 'invariant';
 import _sum from 'lodash/fp/sum';
 import * as React from 'react';
 import {
   FlatList,
   Animated,
   Easing,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 
 import type { ChatMessageItem } from 'lib/selectors/chat-selectors';
 import { localIDPrefix, messageKey } from 'lib/shared/message-utils';
 
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state';
 import type { TabNavigationProp } from '../navigation/app-navigator.react';
 import { useSelector } from '../redux/redux-utils';
 import type { ChatMessageItemWithHeight } from '../types/chat-types';
 import type { ScrollEvent } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import type { ChatNavigationProp } from './chat.react';
 import NewMessagesPill from './new-messages-pill.react';
 import { chatMessageItemHeight } from './utils';
 
 function chatMessageItemKey(
   item: ChatMessageItemWithHeight | ChatMessageItem,
 ): string {
   if (item.itemType === 'loader') {
     return 'loader';
   }
   return messageKey(item.messageInfo);
 }
 
 const animationSpec = {
   duration: 150,
   useNativeDriver: true,
 };
 
 type BaseProps = {
   ...React.ElementConfig<typeof FlatList>,
   +navigation: ChatNavigationProp<'MessageList'>,
   +data: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ...
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   ...
 };
 type State = {
   +newMessageCount: number,
 };
 class ChatList extends React.PureComponent<Props, State> {
   state: State = {
     newMessageCount: 0,
   };
 
   flatList: ?React.ElementRef<typeof FlatList>;
   scrollPos = 0;
 
   newMessagesPillProgress = new Animated.Value(0);
   newMessagesPillStyle: ViewStyle;
 
   constructor(props: Props) {
     super(props);
     const sendButtonTranslateY = this.newMessagesPillProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([10, 0]: number[]), // Flow...
     });
     this.newMessagesPillStyle = {
       opacity: this.newMessagesPillProgress,
       transform: [{ translateY: sendButtonTranslateY }],
     };
   }
 
   componentDidMount() {
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.removeListener('tabPress', this.onTabPress);
   }
 
   onTabPress = () => {
     const { flatList } = this;
     if (!this.props.navigation.isFocused() || !flatList) {
       return;
     }
     if (this.scrollPos > 0) {
       flatList.scrollToOffset({ offset: 0 });
     } else {
       this.props.navigation.popToTop();
     }
   };
 
   get scrolledToBottom() {
     return this.scrollPos <= 0;
   }
 
   componentDidUpdate(prevProps: Props) {
     const { flatList } = this;
     if (!flatList || this.props.data === prevProps.data) {
       return;
     }
 
     if (this.props.data.length < prevProps.data.length) {
       // This should only happen due to MessageStorePruner,
       // which will only prune a thread when it is off-screen
       flatList.scrollToOffset({ offset: 0, animated: false });
       return;
     }
 
     const { scrollPos } = this;
 
     let curDataIndex = 0,
       prevDataIndex = 0,
       heightSoFar = 0;
     let adjustScrollPos = 0,
       newLocalMessage = false,
       newRemoteMessageCount = 0;
     while (prevDataIndex < prevProps.data.length && heightSoFar <= scrollPos) {
       const prevItem = prevProps.data[prevDataIndex];
       invariant(prevItem, 'prevItem should exist');
       const prevItemKey = chatMessageItemKey(prevItem);
       const prevItemHeight = chatMessageItemHeight(prevItem);
 
       let curItem = this.props.data[curDataIndex];
       while (curItem) {
         const curItemKey = chatMessageItemKey(curItem);
         if (curItemKey === prevItemKey) {
           break;
         }
 
         if (curItemKey.startsWith(localIDPrefix)) {
           newLocalMessage = true;
         } else if (
           curItem.itemType === 'message' &&
           curItem.messageInfo.creator.id !== this.props.viewerID
         ) {
           newRemoteMessageCount++;
         }
         adjustScrollPos += chatMessageItemHeight(curItem);
 
         curDataIndex++;
         curItem = this.props.data[curDataIndex];
       }
       if (!curItem) {
         // Should never happen...
         console.log(
           `items not removed from ChatList, but ${prevItemKey} now missing`,
         );
         return;
       }
 
       const curItemHeight = chatMessageItemHeight(curItem);
       adjustScrollPos += curItemHeight - prevItemHeight;
 
       heightSoFar += prevItemHeight;
       prevDataIndex++;
       curDataIndex++;
     }
 
     if (adjustScrollPos === 0) {
       return;
     }
 
     flatList.scrollToOffset({
       offset: scrollPos + adjustScrollPos,
       animated: false,
     });
 
     if (newLocalMessage || scrollPos <= 0) {
       flatList.scrollToOffset({ offset: 0 });
     } else if (newRemoteMessageCount > 0) {
       this.setState(prevState => ({
         newMessageCount: prevState.newMessageCount + newRemoteMessageCount,
       }));
       this.toggleNewMessagesPill(true);
     }
   }
 
   render() {
     const { navigation, viewerID, ...rest } = this.props;
     const { newMessageCount } = this.state;
     return (
       <TouchableWithoutFeedback onPress={this.onPressBackground}>
         <View style={styles.container}>
           <FlatList
             {...rest}
             keyExtractor={chatMessageItemKey}
             getItemLayout={ChatList.getItemLayout}
             onScroll={this.onScroll}
             ref={this.flatListRef}
           />
           <NewMessagesPill
             onPress={this.onPressNewMessagesPill}
             newMessageCount={newMessageCount}
             pointerEvents={newMessageCount > 0 ? 'auto' : 'none'}
             containerStyle={styles.newMessagesPillContainer}
             style={this.newMessagesPillStyle}
           />
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   flatListRef = (flatList: ?React.ElementRef<typeof FlatList>) => {
     this.flatList = flatList;
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<ChatMessageItemWithHeight>,
     index: number,
   ) => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = ChatList.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? chatMessageItemHeight(item) : 0;
     return { length, offset, index };
   };
 
   static heightOfItems(
     data: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ): number {
     return _sum(data.map(chatMessageItemHeight));
   }
 
   toggleNewMessagesPill(show: boolean) {
     Animated.timing(this.newMessagesPillProgress, {
       ...animationSpec,
+      // $FlowFixMe[method-unbinding]
       easing: show ? Easing.ease : Easing.out(Easing.ease),
       toValue: show ? 1 : 0,
     }).start(({ finished }) => {
       if (finished && !show) {
         this.setState({ newMessageCount: 0 });
       }
     });
   }
 
   onScroll = (event: ScrollEvent) => {
     this.scrollPos = event.nativeEvent.contentOffset.y;
     if (this.scrollPos <= 0) {
       this.toggleNewMessagesPill(false);
     }
     this.props.onScroll && this.props.onScroll(event);
   };
 
   onPressNewMessagesPill = () => {
     const { flatList } = this;
     if (!flatList) {
       return;
     }
     flatList.scrollToOffset({ offset: 0 });
     this.toggleNewMessagesPill(false);
   };
 
   onPressBackground = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   newMessagesPillContainer: {
     bottom: 30,
     position: 'absolute',
     right: 30,
   },
 });
 
 const ConnectedChatList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedChatList(props: BaseProps) {
     const keyboardState = React.useContext(KeyboardContext);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     return (
       <ChatList {...props} keyboardState={keyboardState} viewerID={viewerID} />
     );
   },
 );
 
 export { ConnectedChatList as ChatList, chatMessageItemKey };
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index 0b485f494..6fe6e9c8e 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1211 +1,1212 @@
 // @flow
 
 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 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 type { PhotoCapture } from 'lib/types/media-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import ContentLoading from '../components/content-loading.react';
 import ConnectedStatusBar from '../connected-status-bar.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react';
 import { useSelector } from '../redux/redux-utils';
 import { colors } from '../themes/colors';
 import { type DeviceCameraInfo } from '../types/camera';
 import type { NativeMethods } from '../types/react-native';
 import {
   AnimatedView,
   type ViewStyle,
   type AnimatedViewStyle,
 } 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,
   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,
+  // $FlowFixMe[method-unbinding]
   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>
       </>
     );
   };
 
   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>
         <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',
     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 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/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index d8552965f..048ab029e 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 { LayoutEvent, ViewableItemsChange } 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,
+  // $FlowFixMe[method-unbinding]
   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 (const 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, bottomOffsetStyle]}>
           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: ViewableItemsChange) => {
     const viewableIndices = [];
     for (const { 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 (const uri of queuedMediaURIs) {
       for (const 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 = 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/native/media/media-gallery-media.react.js b/native/media/media-gallery-media.react.js
index c26778547..d12be9199 100644
--- a/native/media/media-gallery-media.react.js
+++ b/native/media/media-gallery-media.react.js
@@ -1,294 +1,295 @@
 // @flow
 
 import LottieView from 'lottie-react-native';
 import * as React from 'react';
 import {
   TouchableOpacity,
   StyleSheet,
   View,
   Text,
   Platform,
   Animated,
   Easing,
 } from 'react-native';
 import Reanimated, {
   EasingNode as ReanimatedEasing,
 } from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import Video from 'react-native-video';
 
 import { type MediaLibrarySelection } from 'lib/types/media-types';
 
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react';
 import type { AnimatedValue } from '../types/react-native';
 import {
   AnimatedView,
   AnimatedImage,
   type AnimatedViewStyle,
   type AnimatedStyleObj,
 } from '../types/styles';
 
 const animatedSpec = {
   duration: 400,
+  // $FlowFixMe[method-unbinding]
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 const reanimatedSpec = {
   duration: 400,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 
 type Props = {
   +selection: MediaLibrarySelection,
   +containerHeight: number,
   +queueModeActive: boolean,
   +isQueued: boolean,
   +setMediaQueued: (media: MediaLibrarySelection, isQueued: boolean) => void,
   +sendMedia: (media: MediaLibrarySelection) => void,
   +isFocused: boolean,
   +setFocus: (media: MediaLibrarySelection, isFocused: boolean) => void,
   +dimensions: DimensionsInfo,
 };
 class MediaGalleryMedia extends React.PureComponent<Props> {
   // eslint-disable-next-line import/no-named-as-default-member
   focusProgress: Reanimated.Value = new Reanimated.Value(0);
   buttonsStyle: AnimatedViewStyle;
   mediaStyle: AnimatedStyleObj;
   checkProgress: AnimatedValue = new Animated.Value(0);
 
   constructor(props: Props) {
     super(props);
 
     // eslint-disable-next-line import/no-named-as-default-member
     const buttonsScale = Reanimated.interpolateNode(this.focusProgress, {
       inputRange: [0, 1],
       outputRange: [1.3, 1],
     });
     this.buttonsStyle = {
       ...styles.buttons,
       opacity: this.focusProgress,
       transform: [{ scale: buttonsScale }],
       marginBottom: this.props.dimensions.bottomInset,
     };
 
     // eslint-disable-next-line import/no-named-as-default-member
     const mediaScale = Reanimated.interpolateNode(this.focusProgress, {
       inputRange: [0, 1],
       outputRange: [1, 1.3],
     });
     this.mediaStyle = {
       transform: [{ scale: mediaScale }],
     };
   }
 
   static isActive(props: Props): boolean {
     return props.isFocused || props.isQueued;
   }
 
   componentDidUpdate(prevProps: Props) {
     const isActive = MediaGalleryMedia.isActive(this.props);
     const wasActive = MediaGalleryMedia.isActive(prevProps);
     if (isActive && !wasActive) {
       // eslint-disable-next-line import/no-named-as-default-member
       Reanimated.timing(this.focusProgress, {
         ...reanimatedSpec,
         toValue: 1,
       }).start();
     } else if (!isActive && wasActive) {
       // eslint-disable-next-line import/no-named-as-default-member
       Reanimated.timing(this.focusProgress, {
         ...reanimatedSpec,
         toValue: 0,
       }).start();
     }
 
     if (this.props.isQueued && !prevProps.isQueued) {
       // When I updated to React Native 0.60, I also updated Lottie. At that
       // time, on iOS the last frame of the animation drops the circle outlining
       // the checkmark. This is a hack to get around that
       const maxValue = Platform.OS === 'ios' ? 0.99 : 1;
       Animated.timing(this.checkProgress, {
         ...animatedSpec,
         toValue: maxValue,
       }).start();
     } else if (!this.props.isQueued && prevProps.isQueued) {
       Animated.timing(this.checkProgress, {
         ...animatedSpec,
         toValue: 0,
       }).start();
     }
   }
 
   render(): React.Node {
     const { selection, containerHeight } = this.props;
     const {
       uri,
       dimensions: { width, height },
       step,
     } = selection;
     const active = MediaGalleryMedia.isActive(this.props);
     const scaledWidth = height ? (width * containerHeight) / height : 0;
     const dimensionsStyle: { +height: number, +width: number } = {
       height: containerHeight,
       width: Math.max(Math.min(scaledWidth, this.props.dimensions.width), 150),
     };
 
     let buttons = null;
     const { queueModeActive } = this.props;
     if (!queueModeActive) {
       buttons = (
         <>
           <TouchableOpacity
             onPress={this.onPressSend}
             style={styles.sendButton}
             activeOpacity={0.6}
             disabled={!active}
           >
             <Icon name="send" style={styles.buttonIcon} />
             <Text style={styles.buttonText}>Send</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={this.onPressEnqueue}
             style={styles.enqueueButton}
             activeOpacity={0.6}
             disabled={!active}
           >
             <MaterialIcon name="add-to-photos" style={styles.buttonIcon} />
             <Text style={styles.buttonText}>Queue</Text>
           </TouchableOpacity>
         </>
       );
     }
 
     let media;
     const source = { uri };
     if (step === 'video_library') {
       let resizeMode = 'contain';
       if (Platform.OS === 'ios') {
         const [major, minor] = Platform.Version.split('.');
         if (parseInt(major, 10) === 14 && parseInt(minor, 10) < 2) {
           resizeMode = 'stretch';
         }
       }
       media = (
         <AnimatedView style={this.mediaStyle}>
           <Video
             source={source}
             repeat={true}
             muted={true}
             resizeMode={resizeMode}
             style={dimensionsStyle}
           />
         </AnimatedView>
       );
     } else {
       media = (
         <AnimatedImage
           source={source}
           style={[this.mediaStyle, dimensionsStyle]}
         />
       );
     }
 
     const overlay = (
       <AnimatedView style={this.buttonsStyle}>
         <LottieView
           source={require('../animations/check.json')}
           progress={this.checkProgress}
           style={styles.checkAnimation}
           resizeMode="cover"
         />
       </AnimatedView>
     );
 
     return (
       <View style={[styles.container, dimensionsStyle]}>
         <GestureTouchableOpacity
           onPress={this.onPressBackdrop}
           overlay={overlay}
           stickyActive={active}
         >
           {media}
         </GestureTouchableOpacity>
         <AnimatedView
           style={this.buttonsStyle}
           pointerEvents={active ? 'box-none' : 'none'}
         >
           {buttons}
         </AnimatedView>
       </View>
     );
   }
 
   onPressBackdrop: () => void = () => {
     if (this.props.isQueued) {
       this.props.setMediaQueued(this.props.selection, false);
     } else if (this.props.queueModeActive) {
       this.props.setMediaQueued(this.props.selection, true);
     } else {
       this.props.setFocus(this.props.selection, !this.props.isFocused);
     }
   };
 
   onPressSend: () => void = () => {
     this.props.sendMedia(this.props.selection);
   };
 
   onPressEnqueue: () => void = () => {
     this.props.setMediaQueued(this.props.selection, true);
   };
 }
 
 const buttonStyle = {
   flexDirection: 'row',
   alignItems: 'flex-start',
   margin: 10,
   borderRadius: 20,
   paddingLeft: 20,
   paddingRight: 20,
   paddingTop: 10,
   paddingBottom: 10,
 };
 const styles = StyleSheet.create({
   buttonIcon: {
     alignSelf: Platform.OS === 'android' ? 'center' : 'flex-end',
     color: 'white',
     fontSize: 18,
     marginRight: 6,
     paddingRight: 5,
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
   },
   buttons: {
     alignItems: 'center',
     bottom: 0,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   checkAnimation: {
     position: 'absolute',
     width: 128,
   },
   container: {
     flex: 1,
     overflow: 'hidden',
   },
   enqueueButton: {
     ...buttonStyle,
     backgroundColor: '#2A78E5',
   },
   sendButton: {
     ...buttonStyle,
     backgroundColor: '#7ED321',
     paddingLeft: 18,
   },
 });
 
 export default MediaGalleryMedia;
diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js
index dfc5ccea4..d1d25ce52 100644
--- a/native/navigation/disconnected-bar.react.js
+++ b/native/navigation/disconnected-bar.react.js
@@ -1,123 +1,124 @@
 // @flow
 
 import * as React from 'react';
 import { Text, Platform, Animated, Easing } from 'react-native';
 
 import { useSelector } from '../redux/redux-utils';
 import { useStyles } from '../themes/colors';
 
 const expandedHeight = Platform.select({
   android: 29.5,
   default: 27,
 });
 const timingConfig = {
   useNativeDriver: false,
   duration: 200,
+  // $FlowFixMe[method-unbinding]
   easing: Easing.inOut(Easing.ease),
 };
 
 type Props = {
   +visible: boolean,
 };
 function DisconnectedBar(props: Props): React.Node {
   const disconnected = useSelector(
     state => state.connection.showDisconnectedBar,
   );
   const socketConnected = useSelector(
     state => state.connection.status === 'connected',
   );
   const shouldShowDisconnectedBar = disconnected || !socketConnected;
 
   const showingRef = new React.useRef();
   if (!showingRef.current) {
     showingRef.current = new Animated.Value(shouldShowDisconnectedBar ? 1 : 0);
   }
   const showing = showingRef.current;
 
   const { visible } = props;
   const changeShowing = React.useCallback(
     toValue => {
       if (!visible) {
         showing.setValue(toValue);
         return;
       }
       Animated.timing(showing, {
         ...timingConfig,
         toValue,
       }).start();
     },
     [visible, showing],
   );
 
   const prevShowDisconnectedBar = React.useRef();
   React.useEffect(() => {
     const wasShowing = prevShowDisconnectedBar.current;
     if (shouldShowDisconnectedBar && wasShowing === false) {
       changeShowing(1);
     } else if (!shouldShowDisconnectedBar && wasShowing) {
       changeShowing(0);
     }
     prevShowDisconnectedBar.current = shouldShowDisconnectedBar;
   }, [shouldShowDisconnectedBar, changeShowing]);
 
   const heightStyle = React.useMemo(
     () => ({
       height: showing.interpolate({
         inputRange: [0, 1],
         outputRange: ([0, expandedHeight]: number[]), // Flow...
       }),
     }),
     [showing],
   );
 
   const [barCause, setBarCause] = React.useState('connecting');
   React.useEffect(() => {
     if (shouldShowDisconnectedBar && disconnected) {
       setBarCause('disconnected');
     } else if (shouldShowDisconnectedBar) {
       setBarCause('connecting');
     }
   }, [shouldShowDisconnectedBar, disconnected]);
 
   const styles = useStyles(unboundStyles);
   const text = barCause === 'disconnected' ? 'DISCONNECTED' : 'CONNECTING…';
   const viewStyle =
     barCause === 'disconnected' ? styles.disconnected : styles.connecting;
   const textStyle =
     barCause === 'disconnected'
       ? styles.disconnectedText
       : styles.connectingText;
 
   return (
     <Animated.View style={[viewStyle, heightStyle]} pointerEvents="none">
       <Text style={textStyle} numberOfLines={1}>
         {text}
       </Text>
     </Animated.View>
   );
 }
 
 const unboundStyles = {
   disconnected: {
     backgroundColor: '#CC0000',
     overflow: 'hidden',
   },
   connecting: {
     backgroundColor: 'disconnectedBarBackground',
     overflow: 'hidden',
   },
   disconnectedText: {
     color: 'white',
     fontSize: 14,
     padding: 5,
     textAlign: 'center',
   },
   connectingText: {
     color: 'panelForegroundLabel',
     fontSize: 14,
     padding: 5,
     textAlign: 'center',
   },
 };
 
 export default DisconnectedBar;