diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
index d667e8734..dbc721735 100644
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -1,846 +1,846 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   Image,
   Keyboard,
   Platform,
   BackHandler,
   ActivityIndicator,
 } from 'react-native';
 import Animated, { EasingNode } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { resetUserStateActionType } from 'lib/actions/user-actions.js';
 import {
   cookieSelector,
   urlPrefixSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import { logInActionSources } from 'lib/types/account-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { splashBackgroundURI } from './background-info.js';
 import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
 import LogInPanel from './log-in-panel.react.js';
 import type { LogInState } from './log-in-panel.react.js';
 import LoggedOutStaffInfo from './logged-out-staff-info.react.js';
 import RegisterPanel from './register-panel.react.js';
 import type { RegisterState } from './register-panel.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import { createIsForegroundSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import {
   type NavigationRoute,
   LoggedOutModalRouteName,
   RegistrationRouteName,
   QRCodeSignInNavigatorRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import { splashStyleSelector } from '../splash.js';
 import { useStyles } from '../themes/colors.js';
 import type {
   EventSubscription,
   KeyboardEvent,
 } from '../types/react-native.js';
 import type { ImageStyle } from '../types/styles.js';
 import {
   runTiming,
   ratchetAlongWithKeyboardHeight,
 } from '../utils/animation-utils.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import {
   type StateContainer,
   type StateChange,
   setStateForContainer,
 } from '../utils/state-container.js';
 import EthereumLogo from '../vectors/ethereum-logo.react.js';
 
 let initialAppLoad = true;
 const safeAreaEdges = ['top', 'bottom'];
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   block,
   set,
   call,
   cond,
   not,
   and,
   eq,
   neq,
   lessThan,
   greaterOrEq,
   add,
   sub,
   divide,
   max,
   stopClock,
   clockRunning,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 export type LoggedOutMode =
   | 'loading'
   | 'prompt'
   | 'log-in'
   | 'register'
   | 'siwe';
 const modeNumbers: { [LoggedOutMode]: number } = {
   'loading': 0,
   'prompt': 1,
   'log-in': 2,
   'register': 3,
   'siwe': 4,
 };
 function isPastPrompt(modeValue: Node) {
   return and(
     neq(modeValue, modeNumbers['loading']),
     neq(modeValue, modeNumbers['prompt']),
   );
 }
 
 const unboundStyles = {
   animationContainer: {
     flex: 1,
   },
   backButton: {
     position: 'absolute',
     top: 13,
   },
   button: {
     borderRadius: 4,
     marginBottom: 4,
     marginTop: 4,
     marginLeft: 4,
     marginRight: 4,
     paddingBottom: 14,
     paddingLeft: 18,
     paddingRight: 18,
     paddingTop: 14,
     flex: 1,
   },
   buttonContainer: {
     bottom: 0,
     left: 0,
     marginLeft: 26,
     marginRight: 26,
     paddingBottom: 20,
     position: 'absolute',
     right: 0,
   },
   buttonText: {
     fontFamily: 'OpenSans-Semibold',
     fontSize: 17,
     textAlign: 'center',
   },
   classicAuthButton: {
     backgroundColor: 'purpleButton',
   },
   classicAuthButtonText: {
     color: 'whiteText',
   },
   registerButtons: {
     flexDirection: 'row',
   },
   signInButtons: {
     flexDirection: 'row',
   },
   container: {
     backgroundColor: 'transparent',
     flex: 1,
   },
   header: {
     color: 'white',
     fontFamily: Platform.OS === 'ios' ? 'IBMPlexSans' : 'IBMPlexSans-Medium',
     fontSize: 56,
     fontWeight: '500',
     lineHeight: 66,
     textAlign: 'center',
   },
   loadingIndicator: {
     paddingTop: 15,
   },
   modalBackground: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   siweButton: {
     backgroundColor: 'siweButton',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
   },
   siweButtonText: {
     color: 'siweButtonText',
   },
   siweOr: {
     flex: 1,
     flexDirection: 'row',
     marginBottom: 18,
     marginTop: 14,
   },
   siweOrLeftHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginRight: 18,
     marginTop: 10,
   },
   siweOrRightHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginLeft: 18,
     marginTop: 10,
   },
   siweOrText: {
     color: 'whiteText',
     fontSize: 17,
     textAlign: 'center',
   },
   siweIcon: {
     paddingRight: 10,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'LoggedOutModal'>,
   +route: NavigationRoute<'LoggedOutModal'>,
 };
 
 type Props = {
   ...BaseProps,
   // Navigation state
   +isForeground: boolean,
   // Redux state
   +persistedStateLoaded: boolean,
   +rehydrateConcluded: boolean,
   +cookie: ?string,
   +urlPrefix: string,
   +loggedIn: boolean,
   +dimensions: DerivedDimensionsInfo,
   +splashStyle: ImageStyle,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // Keyserver olm sessions functions
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +mode: LoggedOutMode,
   +nextMode: LoggedOutMode,
   +logInState: StateContainer<LogInState>,
   +registerState: StateContainer<RegisterState>,
 };
 class LoggedOutModal extends React.PureComponent<Props, State> {
   keyboardShowListener: ?EventSubscription;
   keyboardHideListener: ?EventSubscription;
 
   mounted = false;
   nextMode: LoggedOutMode = 'loading';
   activeAlert = false;
 
   contentHeight: Value;
   keyboardHeightValue: Value = new Value(0);
   modeValue: Value;
 
   buttonOpacity: Value;
   panelPaddingTopValue: Node;
   panelOpacityValue: Node;
 
   constructor(props: Props) {
     super(props);
 
     // Man, this is a lot of boilerplate just to containerize some state.
     // Mostly due to Flow typing requirements...
     const setLogInState = setStateForContainer(
       this.guardedSetState,
       (change: $Shape<LogInState>) => (fullState: State) => ({
         logInState: {
           ...fullState.logInState,
           state: { ...fullState.logInState.state, ...change },
         },
       }),
     );
     const setRegisterState = setStateForContainer(
       this.guardedSetState,
       (change: $Shape<RegisterState>) => (fullState: State) => ({
         registerState: {
           ...fullState.registerState,
           state: { ...fullState.registerState.state, ...change },
         },
       }),
     );
 
     const initialMode = props.persistedStateLoaded ? 'prompt' : 'loading';
     this.state = {
       mode: initialMode,
       nextMode: initialMode,
       logInState: {
         state: {
           usernameInputText: null,
           passwordInputText: null,
         },
         setState: setLogInState,
       },
       registerState: {
         state: {
           usernameInputText: '',
           passwordInputText: '',
           confirmPasswordInputText: '',
         },
         setState: setRegisterState,
       },
     };
     this.nextMode = initialMode;
 
     this.contentHeight = new Value(props.dimensions.safeAreaHeight);
     this.modeValue = new Value(modeNumbers[this.nextMode]);
 
     this.buttonOpacity = new Value(props.persistedStateLoaded ? 1 : 0);
     this.panelPaddingTopValue = this.panelPaddingTop();
     this.panelOpacityValue = this.panelOpacity();
   }
 
   guardedSetState = (change: StateChange<State>, callback?: () => mixed) => {
     if (this.mounted) {
       this.setState(change, callback);
     }
   };
 
   setMode(newMode: LoggedOutMode) {
     this.nextMode = newMode;
     this.guardedSetState({ mode: newMode, nextMode: newMode });
     this.modeValue.setValue(modeNumbers[newMode]);
   }
 
   proceedToNextMode = () => {
     this.guardedSetState({ mode: this.nextMode });
   };
 
   componentDidMount() {
     this.mounted = true;
     if (this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (this.props.isForeground) {
       this.onForeground();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
     if (this.props.isForeground) {
       this.onBackground();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!prevProps.persistedStateLoaded && this.props.persistedStateLoaded) {
       this.setMode('prompt');
     }
     if (!prevProps.rehydrateConcluded && this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (!prevProps.isForeground && this.props.isForeground) {
       this.onForeground();
     } else if (prevProps.isForeground && !this.props.isForeground) {
       this.onBackground();
     }
 
     if (this.state.mode === 'prompt' && prevState.mode !== 'prompt') {
       this.buttonOpacity.setValue(0);
       Animated.timing(this.buttonOpacity, {
         easing: EasingNode.out(EasingNode.ease),
         duration: 250,
         toValue: 1.0,
       }).start();
     }
 
     const newContentHeight = this.props.dimensions.safeAreaHeight;
     const oldContentHeight = prevProps.dimensions.safeAreaHeight;
     if (newContentHeight !== oldContentHeight) {
       this.contentHeight.setValue(newContentHeight);
     }
   }
 
   onForeground() {
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardHideListener = addKeyboardDismissListener(this.keyboardHide);
     BackHandler.addEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   onBackground() {
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardHideListener) {
       removeKeyboardListener(this.keyboardHideListener);
       this.keyboardHideListener = null;
     }
     BackHandler.removeEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   // This gets triggered when an app is killed and restarted
   // Not when it is returned from being backgrounded
   async onInitialAppLoad() {
     if (!initialAppLoad) {
       return;
     }
     initialAppLoad = false;
 
     const { loggedIn, cookie, urlPrefix, dispatch } = this.props;
     const hasUserCookie = cookie && cookie.startsWith('user=');
     if (loggedIn === !!hasUserCookie) {
       return;
     }
     if (!__DEV__) {
       const actionSource = loggedIn
         ? logInActionSources.appStartReduxLoggedInButInvalidCookie
         : logInActionSources.appStartCookieLoggedInButInvalidRedux;
       const sessionChange = await fetchNewCookieFromNativeCredentials(
         dispatch,
         cookie,
         urlPrefix,
         actionSource,
         ashoatKeyserverID,
         this.props.getInitialNotificationsEncryptedMessage,
       );
       if (
         sessionChange &&
         sessionChange.cookie &&
         sessionChange.cookie.startsWith('user=')
       ) {
         // success! we can expect subsequent actions to fix up the state
         return;
       }
     }
     this.props.dispatch({ type: resetUserStateActionType });
   }
 
   hardwareBack: () => boolean = () => {
     if (this.nextMode !== 'prompt') {
       this.goBackToPrompt();
       return true;
     }
     return false;
   };
 
   panelPaddingTop(): Node {
     const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54;
     const promptButtonsSize = Platform.OS === 'ios' ? 40 : 61;
     const logInContainerSize = 140;
     const registerPanelSize = Platform.OS === 'ios' ? 181 : 180;
     const siwePanelSize = 250;
 
     const containerSize = add(
       headerHeight,
       cond(not(isPastPrompt(this.modeValue)), promptButtonsSize, 0),
       cond(eq(this.modeValue, modeNumbers['log-in']), logInContainerSize, 0),
       cond(eq(this.modeValue, modeNumbers['register']), registerPanelSize, 0),
       cond(eq(this.modeValue, modeNumbers['siwe']), siwePanelSize, 0),
     );
     const potentialPanelPaddingTop = divide(
       max(sub(this.contentHeight, this.keyboardHeightValue, containerSize), 0),
       2,
     );
 
     const panelPaddingTop = new Value(-1);
     const targetPanelPaddingTop = new Value(-1);
     const prevModeValue = new Value(modeNumbers[this.nextMode]);
     const clock = new Clock();
     const keyboardTimeoutClock = new Clock();
     return block([
       cond(lessThan(panelPaddingTop, 0), [
         set(panelPaddingTop, potentialPanelPaddingTop),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         lessThan(this.keyboardHeightValue, 0),
         [
           runTiming(keyboardTimeoutClock, 0, 1, true, { duration: 500 }),
           cond(
             not(clockRunning(keyboardTimeoutClock)),
             set(this.keyboardHeightValue, 0),
           ),
         ],
         stopClock(keyboardTimeoutClock),
       ),
       cond(
         and(
           greaterOrEq(this.keyboardHeightValue, 0),
           neq(prevModeValue, this.modeValue),
         ),
         [
           stopClock(clock),
           cond(
             neq(isPastPrompt(prevModeValue), isPastPrompt(this.modeValue)),
             set(targetPanelPaddingTop, potentialPanelPaddingTop),
           ),
           set(prevModeValue, this.modeValue),
         ],
       ),
       ratchetAlongWithKeyboardHeight(this.keyboardHeightValue, [
         stopClock(clock),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         neq(panelPaddingTop, targetPanelPaddingTop),
         set(
           panelPaddingTop,
           runTiming(clock, panelPaddingTop, targetPanelPaddingTop),
         ),
       ),
       panelPaddingTop,
     ]);
   }
 
   panelOpacity(): Node {
     const targetPanelOpacity = isPastPrompt(this.modeValue);
 
     const panelOpacity = new Value(-1);
     const prevPanelOpacity = new Value(-1);
     const prevTargetPanelOpacity = new Value(-1);
     const clock = new Clock();
     return block([
       cond(lessThan(panelOpacity, 0), [
         set(panelOpacity, targetPanelOpacity),
         set(prevPanelOpacity, targetPanelOpacity),
         set(prevTargetPanelOpacity, targetPanelOpacity),
       ]),
       cond(greaterOrEq(this.keyboardHeightValue, 0), [
         cond(neq(targetPanelOpacity, prevTargetPanelOpacity), [
           stopClock(clock),
           set(prevTargetPanelOpacity, targetPanelOpacity),
         ]),
         cond(
           neq(panelOpacity, targetPanelOpacity),
           set(panelOpacity, runTiming(clock, panelOpacity, targetPanelOpacity)),
         ),
       ]),
       cond(
         and(eq(panelOpacity, 0), neq(prevPanelOpacity, 0)),
         call([], this.proceedToNextMode),
       ),
       set(prevPanelOpacity, panelOpacity),
       panelOpacity,
     ]);
   }
 
   keyboardShow = (event: KeyboardEvent) => {
     if (
       event.startCoordinates &&
       _isEqual(event.startCoordinates)(event.endCoordinates)
     ) {
       return;
     }
-    const keyboardHeight = Platform.select({
+    const keyboardHeight: number = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(
         event.endCoordinates.height - this.props.dimensions.bottomInset,
         0,
       ),
     });
     this.keyboardHeightValue.setValue(keyboardHeight);
   };
 
   keyboardHide = () => {
     if (!this.activeAlert) {
       this.keyboardHeightValue.setValue(0);
     }
   };
 
   setActiveAlert = (activeAlert: boolean) => {
     this.activeAlert = activeAlert;
   };
 
   goBackToPrompt = () => {
     this.nextMode = 'prompt';
     this.guardedSetState({ nextMode: 'prompt' });
     this.keyboardHeightValue.setValue(0);
     this.modeValue.setValue(modeNumbers['prompt']);
     Keyboard.dismiss();
   };
 
   render(): React.Node {
     const { styles } = this.props;
 
     const siweButton = (
       <>
         <TouchableOpacity
           onPress={this.onPressSIWE}
           style={[styles.button, styles.siweButton]}
           activeOpacity={0.6}
         >
           <View style={styles.siweIcon}>
             <EthereumLogo />
           </View>
           <Text style={[styles.buttonText, styles.siweButtonText]}>
             Sign in with Ethereum
           </Text>
         </TouchableOpacity>
         <View style={styles.siweOr}>
           <View style={styles.siweOrLeftHR} />
           <Text style={styles.siweOrText}>or</Text>
           <View style={styles.siweOrRightHR} />
         </View>
       </>
     );
 
     let panel = null;
     let buttons = null;
     if (this.state.mode === 'log-in') {
       panel = (
         <LogInPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           logInState={this.state.logInState}
         />
       );
     } else if (this.state.mode === 'register') {
       panel = (
         <RegisterPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           registerState={this.state.registerState}
         />
       );
     } else if (this.state.mode === 'prompt') {
       const opacityStyle = { opacity: this.buttonOpacity };
 
       const registerButtons = [];
       registerButtons.push(
         <TouchableOpacity
           onPress={this.onPressRegister}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="old"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Register
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         registerButtons.push(
           <TouchableOpacity
             onPress={this.onPressNewRegister}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="new"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Register (new)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       const signInButtons = [];
       signInButtons.push(
         <TouchableOpacity
           onPress={this.onPressLogIn}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="login-form"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Sign in
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         signInButtons.push(
           <TouchableOpacity
             onPress={this.onPressQRCodeSignIn}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="qr-code-login"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Sign in (QR)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       buttons = (
         <Animated.View style={[styles.buttonContainer, opacityStyle]}>
           <LoggedOutStaffInfo />
           {siweButton}
           <View style={styles.signInButtons}>{signInButtons}</View>
           <View style={styles.registerButtons}>{registerButtons}</View>
         </Animated.View>
       );
     } else if (this.state.mode === 'loading') {
       panel = (
         <ActivityIndicator
           color="white"
           size="large"
           style={styles.loadingIndicator}
         />
       );
     }
 
     const windowWidth = this.props.dimensions.width;
     const buttonStyle = {
       opacity: this.panelOpacityValue,
       left: windowWidth < 360 ? 28 : 40,
     };
     const padding = { paddingTop: this.panelPaddingTopValue };
 
     const animatedContent = (
       <Animated.View style={[styles.animationContainer, padding]}>
         <View>
           <Text style={styles.header}>Comm</Text>
           <Animated.View style={[styles.backButton, buttonStyle]}>
             <TouchableOpacity activeOpacity={0.6} onPress={this.hardwareBack}>
               <Icon name="arrow-circle-o-left" size={36} color="#FFFFFFAA" />
             </TouchableOpacity>
           </Animated.View>
         </View>
         {panel}
       </Animated.View>
     );
 
     let siwePanel;
     if (this.state.mode === 'siwe') {
       siwePanel = (
         <FullscreenSIWEPanel
           goBackToPrompt={this.goBackToPrompt}
           closing={this.state.nextMode === 'prompt'}
         />
       );
     }
 
     const backgroundSource = { uri: splashBackgroundURI };
     return (
       <React.Fragment>
         <ConnectedStatusBar barStyle="light-content" />
         <Image
           source={backgroundSource}
           style={[styles.modalBackground, this.props.splashStyle]}
         />
         <SafeAreaView style={styles.container} edges={safeAreaEdges}>
           <KeyboardAvoidingView behavior="padding" style={styles.container}>
             {animatedContent}
             {buttons}
           </KeyboardAvoidingView>
         </SafeAreaView>
         {siwePanel}
       </React.Fragment>
     );
   }
 
   onPressSIWE = () => {
     this.setMode('siwe');
   };
 
   onPressLogIn = () => {
     if (Platform.OS !== 'ios') {
       // For some strange reason, iOS's password management logic doesn't
       // realize that the username and password fields in LogInPanel are related
       // if the username field gets focused on mount. To avoid this issue we
       // need the username and password fields to both appear on-screen before
       // we focus the username field. However, when we set keyboardHeightValue
       // to -1 here, we are telling our Reanimated logic to wait until the
       // keyboard appears before showing LogInPanel. Since we need LogInPanel
       // to appear before the username field is focused, we need to avoid this
       // behavior on iOS.
       this.keyboardHeightValue.setValue(-1);
     }
     this.setMode('log-in');
   };
 
   onPressQRCodeSignIn = () => {
     this.props.navigation.navigate(QRCodeSignInNavigatorRouteName);
   };
 
   onPressRegister = () => {
     this.keyboardHeightValue.setValue(-1);
     this.setMode('register');
   };
 
   onPressNewRegister = () => {
     this.props.navigation.navigate(RegistrationRouteName);
   };
 }
 
 const isForegroundSelector = createIsForegroundSelector(
   LoggedOutModalRouteName,
 );
 
 const ConnectedLoggedOutModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedLoggedOutModal(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const isForeground = isForegroundSelector(navContext);
 
     const rehydrateConcluded = useSelector(
       state => !!(state._persist && state._persist.rehydrated && navContext),
     );
     const persistedStateLoaded = usePersistedStateLoaded();
     const cookie = useSelector(cookieSelector(ashoatKeyserverID));
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const loggedIn = useSelector(isLoggedIn);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const splashStyle = useSelector(splashStyleSelector);
     const styles = useStyles(unboundStyles);
 
     const dispatch = useDispatch();
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
     return (
       <LoggedOutModal
         {...props}
         isForeground={isForeground}
         persistedStateLoaded={persistedStateLoaded}
         rehydrateConcluded={rehydrateConcluded}
         cookie={cookie}
         urlPrefix={urlPrefix}
         loggedIn={loggedIn}
         dimensions={dimensions}
         splashStyle={splashStyle}
         styles={styles}
         dispatch={dispatch}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedLoggedOutModal;
diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js
index a3edd0b9c..74dd52503 100644
--- a/native/calendar/calendar.react.js
+++ b/native/calendar/calendar.react.js
@@ -1,1115 +1,1115 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _find from 'lodash/fp/find.js';
 import _findIndex from 'lodash/fp/findIndex.js';
 import _map from 'lodash/fp/map.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _size from 'lodash/fp/size.js';
 import _sum from 'lodash/fp/sum.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   AppState as NativeAppState,
   Platform,
   LayoutAnimation,
   TouchableWithoutFeedback,
 } from 'react-native';
 
 import {
   updateCalendarQueryActionTypes,
   useUpdateCalendarQuery,
 } from 'lib/actions/entry-actions.js';
 import type { UpdateCalendarQueryInput } from 'lib/actions/entry-actions.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import type {
   EntryInfo,
   CalendarQuery,
   CalendarQueryUpdateResult,
 } from 'lib/types/entry-types.js';
 import type { CalendarFilter } from 'lib/types/filter-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ConnectionStatus } from 'lib/types/socket-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   dateString,
   prettyDate,
   dateFromString,
 } from 'lib/utils/date-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import CalendarInputBar from './calendar-input-bar.react.js';
 import {
   Entry,
   InternalEntry,
   dummyNodeForEntryHeightMeasurement,
 } from './entry.react.js';
 import SectionFooter from './section-footer.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import NodeHeightMeasurer from '../components/node-height-measurer.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import DisconnectedBar from '../navigation/disconnected-bar.react.js';
 import {
   createIsForegroundSelector,
   createActiveTabSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import {
   CalendarRouteName,
   ThreadPickerModalRouteName,
 } from '../navigation/route-names.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { calendarListData } from '../selectors/calendar-selectors.js';
 import type {
   CalendarItem,
   SectionHeaderItem,
   SectionFooterItem,
   LoaderItem,
 } from '../selectors/calendar-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import {
   useColors,
   useStyles,
   useIndicatorStyle,
   type Colors,
   type IndicatorStyle,
 } from '../themes/colors.js';
 import type {
   EventSubscription,
   ScrollEvent,
   ViewableItemsChange,
   KeyboardEvent,
 } from '../types/react-native.js';
 
 export type EntryInfoWithHeight = {
   ...EntryInfo,
   +textHeight: number,
 };
 type CalendarItemWithHeight =
   | LoaderItem
   | SectionHeaderItem
   | SectionFooterItem
   | {
       itemType: 'entryInfo',
       entryInfo: EntryInfoWithHeight,
       threadInfo: ThreadInfo,
     };
 type ExtraData = {
   +activeEntries: { +[key: string]: boolean },
   +visibleEntries: { +[key: string]: boolean },
 };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   flatList: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   keyboardAvoidingViewContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   keyboardAvoidingView: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
   },
   sectionHeader: {
     backgroundColor: 'panelSecondaryForeground',
     borderBottomWidth: 2,
     borderColor: 'listBackground',
     height: 31,
   },
   sectionHeaderText: {
     color: 'listSeparatorLabel',
     fontWeight: 'bold',
     padding: 5,
   },
   weekendSectionHeader: {},
 };
 
 type BaseProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +route: NavigationRoute<'Calendar'>,
 };
 type Props = {
   ...BaseProps,
   // Nav state
   +calendarActive: boolean,
   // Redux state
   +listData: ?$ReadOnlyArray<CalendarItem>,
   +startDate: string,
   +endDate: string,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dimensions: DerivedDimensionsInfo,
   +loadingStatus: LoadingStatus,
   +connectionStatus: ConnectionStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateCalendarQuery: (
     input: UpdateCalendarQueryInput,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +listDataWithHeights: ?$ReadOnlyArray<CalendarItemWithHeight>,
   +readyToShowList: boolean,
   +extraData: ExtraData,
   +currentlyEditing: $ReadOnlyArray<string>,
 };
 class Calendar extends React.PureComponent<Props, State> {
   flatList: ?FlatList<CalendarItemWithHeight> = null;
   currentState: ?string = NativeAppState.currentState;
   appStateListener: ?EventSubscription;
   lastForegrounded = 0;
   lastCalendarReset = 0;
   currentScrollPosition: ?number = null;
   // We don't always want an extraData update to trigger a state update, so we
   // cache the most recent value as a member here
   latestExtraData: ExtraData;
   // For some reason, we have to delay the scrollToToday call after the first
   // scroll upwards
   firstScrollComplete = false;
   // When an entry becomes active, we make a note of its key so that once the
   // keyboard event happens, we know where to move the scrollPos to
   lastEntryKeyActive: ?string = null;
   keyboardShowListener: ?EventSubscription;
   keyboardDismissListener: ?EventSubscription;
   keyboardShownHeight: ?number = null;
   // If the query fails, we try it again
   topLoadingFromScroll: ?CalendarQuery = null;
   bottomLoadingFromScroll: ?CalendarQuery = null;
   // We wait until the loaders leave view before letting them be triggered again
   topLoaderWaitingToLeaveView = true;
   bottomLoaderWaitingToLeaveView = true;
   // We keep refs to the entries so CalendarInputBar can save them
   entryRefs: Map<string, ?InternalEntry> = new Map();
 
   constructor(props: Props) {
     super(props);
     this.latestExtraData = {
       activeEntries: {},
       visibleEntries: {},
     };
     this.state = {
       listDataWithHeights: null,
       readyToShowList: false,
       extraData: this.latestExtraData,
       currentlyEditing: [],
     };
   }
 
   componentDidMount() {
     this.appStateListener = NativeAppState.addEventListener(
       'change',
       this.handleAppStateChange,
     );
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardDismissListener = addKeyboardDismissListener(
       this.keyboardDismiss,
     );
     this.props.navigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     if (this.appStateListener) {
       this.appStateListener.remove();
       this.appStateListener = null;
     }
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardDismissListener) {
       removeKeyboardListener(this.keyboardDismissListener);
       this.keyboardDismissListener = null;
     }
     this.props.navigation.removeListener('tabPress', this.onTabPress);
   }
 
   handleAppStateChange = (nextAppState: ?string) => {
     const lastState = this.currentState;
     this.currentState = nextAppState;
     if (
       !lastState ||
       !lastState.match(/inactive|background/) ||
       this.currentState !== 'active'
     ) {
       // We're only handling foregrounding here
       return;
     }
     if (Date.now() - this.lastCalendarReset < 500) {
       // If the calendar got reset right before this callback triggered, that
       // indicates we should reset the scroll position
       this.lastCalendarReset = 0;
       this.scrollToToday(false);
     } else {
       // Otherwise, it's possible that the calendar is about to get reset. We
       // record a timestamp here so we can scrollToToday there.
       this.lastForegrounded = Date.now();
     }
   };
 
   onTabPress = () => {
     if (this.props.navigation.isFocused()) {
       this.scrollToToday();
     }
   };
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!this.props.listData && this.props.listData !== prevProps.listData) {
       this.latestExtraData = {
         activeEntries: {},
         visibleEntries: {},
       };
       this.setState({
         listDataWithHeights: null,
         readyToShowList: false,
         extraData: this.latestExtraData,
       });
       this.firstScrollComplete = false;
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
     }
 
     const { loadingStatus, connectionStatus } = this.props;
     const {
       loadingStatus: prevLoadingStatus,
       connectionStatus: prevConnectionStatus,
     } = prevProps;
     if (
       (loadingStatus === 'error' && prevLoadingStatus === 'loading') ||
       (connectionStatus === 'connected' && prevConnectionStatus !== 'connected')
     ) {
       this.loadMoreAbove();
       this.loadMoreBelow();
     }
 
     const lastLDWH = prevState.listDataWithHeights;
     const newLDWH = this.state.listDataWithHeights;
     if (!newLDWH) {
       return;
     } else if (!lastLDWH) {
       if (!this.props.calendarActive) {
         // FlatList has an initialScrollIndex prop, which is usually close to
         // centering but can be off when there is a particularly large Entry in
         // the list. scrollToToday lets us actually center, but gets overriden
         // by initialScrollIndex if we call it right after the FlatList mounts
         sleep(50).then(() => this.scrollToToday());
       }
       return;
     }
 
     if (newLDWH.length < lastLDWH.length) {
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
       if (this.flatList) {
         if (!this.props.calendarActive) {
           // If the currentCalendarQuery gets reset we scroll to the center
           this.scrollToToday();
         } else if (Date.now() - this.lastForegrounded < 500) {
           // If the app got foregrounded right before the calendar got reset,
           // that indicates we should reset the scroll position
           this.lastForegrounded = 0;
           this.scrollToToday(false);
         } else {
           // Otherwise, it's possible that we got triggered before the
           // foreground callback. Let's record a timestamp here so we can call
           // scrollToToday there
           this.lastCalendarReset = Date.now();
         }
       }
     }
 
     const { lastStartDate, newStartDate, lastEndDate, newEndDate } =
       Calendar.datesFromListData(lastLDWH, newLDWH);
 
     if (newStartDate > lastStartDate || newEndDate < lastEndDate) {
       // If there are fewer items in our new data, which happens when the
       // current calendar query gets reset due to inactivity, let's reset the
       // scroll position to the center (today)
       if (!this.props.calendarActive) {
         sleep(50).then(() => this.scrollToToday());
       }
       this.firstScrollComplete = false;
     } else if (newStartDate < lastStartDate) {
       this.updateScrollPositionAfterPrepend(lastLDWH, newLDWH);
     } else if (newEndDate > lastEndDate) {
       this.firstScrollComplete = true;
     } else if (newLDWH.length > lastLDWH.length) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (newStartDate < lastStartDate) {
       this.topLoadingFromScroll = null;
     }
     if (newEndDate > lastEndDate) {
       this.bottomLoadingFromScroll = null;
     }
 
     const { keyboardShownHeight, lastEntryKeyActive } = this;
     if (keyboardShownHeight && lastEntryKeyActive) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   }
 
   static datesFromListData(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ): {
     +lastStartDate: Date,
     +newStartDate: Date,
     +lastEndDate: Date,
     +newEndDate: Date,
   } {
     const lastSecondItem = lastLDWH[1];
     const newSecondItem = newLDWH[1];
     invariant(
       newSecondItem.itemType === 'header' &&
         lastSecondItem.itemType === 'header',
       'second item in listData should be a header',
     );
     const lastStartDate = dateFromString(lastSecondItem.dateString);
     const newStartDate = dateFromString(newSecondItem.dateString);
 
     const lastPenultimateItem = lastLDWH[lastLDWH.length - 2];
     const newPenultimateItem = newLDWH[newLDWH.length - 2];
     invariant(
       newPenultimateItem.itemType === 'footer' &&
         lastPenultimateItem.itemType === 'footer',
       'penultimate item in listData should be a footer',
     );
     const lastEndDate = dateFromString(lastPenultimateItem.dateString);
     const newEndDate = dateFromString(newPenultimateItem.dateString);
 
     return { lastStartDate, newStartDate, lastEndDate, newEndDate };
   }
 
   /**
    * When prepending list items, FlatList isn't smart about preserving scroll
    * position. If we're at the start of the list before prepending, FlatList
    * will just keep us at the front after prepending. But we want to preserve
    * the previous on-screen items, so we have to do a calculation to get the new
    * scroll position. (And deal with the inherent glitchiness of trying to time
    * that change with the items getting prepended... *sigh*.)
    */
   updateScrollPositionAfterPrepend(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ) {
     const existingKeys = new Set(_map(Calendar.keyExtractor)(lastLDWH));
     const newItems = _filter(
       (item: CalendarItemWithHeight) =>
         !existingKeys.has(Calendar.keyExtractor(item)),
     )(newLDWH);
     const heightOfNewItems = Calendar.heightOfItems(newItems);
     const flatList = this.flatList;
     invariant(flatList, 'flatList should be set');
     const scrollAction = () => {
       invariant(
         this.currentScrollPosition !== undefined &&
           this.currentScrollPosition !== null,
         'currentScrollPosition should be set',
       );
       const currentScrollPosition = Math.max(this.currentScrollPosition, 0);
       const offset = currentScrollPosition + heightOfNewItems;
       flatList.scrollToOffset({
         offset,
         animated: false,
       });
     };
     scrollAction();
     if (!this.firstScrollComplete) {
       setTimeout(scrollAction, 0);
       this.firstScrollComplete = true;
     }
   }
 
   scrollToToday(animated: ?boolean = undefined) {
     if (animated === undefined) {
       animated = this.props.calendarActive;
     }
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       return;
     }
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(ldwh);
     invariant(this.flatList, "scrollToToday called, but flatList isn't set");
     this.flatList.scrollToIndex({
       index: todayIndex,
       animated,
       viewPosition: 0.5,
     });
   }
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   renderItem = (row: { +item: CalendarItemWithHeight, ... }): React.Node => {
     const item = row.item;
     if (item.itemType === 'loader') {
       return <ListLoadingIndicator />;
     } else if (item.itemType === 'header') {
       return this.renderSectionHeader(item);
     } else if (item.itemType === 'entryInfo') {
       const key = entryKey(item.entryInfo);
       return (
         <Entry
           navigation={this.props.navigation}
           entryInfo={item.entryInfo}
           threadInfo={item.threadInfo}
           active={!!this.state.extraData.activeEntries[key]}
           visible={!!this.state.extraData.visibleEntries[key]}
           makeActive={this.makeActive}
           onEnterEditMode={this.onEnterEntryEditMode}
           onConcludeEditMode={this.onConcludeEntryEditMode}
           onPressWhitespace={this.makeAllEntriesInactive}
           entryRef={this.entryRef}
         />
       );
     } else if (item.itemType === 'footer') {
       return this.renderSectionFooter(item);
     }
     invariant(false, 'renderItem conditions should be exhaustive');
   };
 
   renderSectionHeader = (item: SectionHeaderItem): React.Node => {
     let date = prettyDate(item.dateString);
     if (dateString(new Date()) === item.dateString) {
       date += ' (today)';
     }
     const dateObj = dateFromString(item.dateString).getDay();
     const weekendStyle =
       dateObj === 0 || dateObj === 6
         ? this.props.styles.weekendSectionHeader
         : null;
     return (
       <TouchableWithoutFeedback onPress={this.makeAllEntriesInactive}>
         <View style={[this.props.styles.sectionHeader, weekendStyle]}>
           <Text style={this.props.styles.sectionHeaderText}>{date}</Text>
         </View>
       </TouchableWithoutFeedback>
     );
   };
 
   renderSectionFooter = (item: SectionFooterItem): React.Node => {
     return (
       <SectionFooter
         dateString={item.dateString}
         onAdd={this.onAdd}
         onPressWhitespace={this.makeAllEntriesInactive}
       />
     );
   };
 
   onAdd = (dayString: string) => {
     this.props.navigation.navigate(ThreadPickerModalRouteName, {
       presentedFrom: this.props.route.key,
       dateString: dayString,
     });
   };
 
   static keyExtractor = (
     item: CalendarItemWithHeight | CalendarItem,
     // ESLint doesn't recognize that invariant always throws
     // eslint-disable-next-line consistent-return
   ): string => {
     if (item.itemType === 'loader') {
       return item.key;
     } else if (item.itemType === 'header') {
       return item.dateString + '/header';
     } else if (item.itemType === 'entryInfo') {
       return entryKey(item.entryInfo);
     } else if (item.itemType === 'footer') {
       return item.dateString + '/footer';
     }
     invariant(false, 'keyExtractor conditions should be exhaustive');
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<CalendarItemWithHeight>,
     index: number,
   ): { length: number, offset: number, index: number } => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? Calendar.itemHeight(item) : 0;
     return { length, offset, index };
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   static itemHeight = (item: CalendarItemWithHeight): number => {
     if (item.itemType === 'loader') {
       return 56;
     } else if (item.itemType === 'header') {
       return 31;
     } else if (item.itemType === 'entryInfo') {
       const verticalPadding = 10;
       return verticalPadding + item.entryInfo.textHeight;
     } else if (item.itemType === 'footer') {
       return 40;
     }
     invariant(false, 'itemHeight conditions should be exhaustive');
   };
 
   static heightOfItems = (
     data: $ReadOnlyArray<CalendarItemWithHeight>,
   ): number => {
     return _sum(data.map(Calendar.itemHeight));
   };
 
   render(): React.Node {
     const { listDataWithHeights } = this.state;
     let flatList = null;
     if (listDataWithHeights) {
       const flatListStyle = { opacity: this.state.readyToShowList ? 1 : 0 };
       const initialScrollIndex = this.initialScrollIndex(listDataWithHeights);
       flatList = (
         <FlatList
           data={listDataWithHeights}
           renderItem={this.renderItem}
           keyExtractor={Calendar.keyExtractor}
           getItemLayout={Calendar.getItemLayout}
           onViewableItemsChanged={this.onViewableItemsChanged}
           onScroll={this.onScroll}
           initialScrollIndex={initialScrollIndex}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag"
           onMomentumScrollEnd={this.onMomentumScrollEnd}
           onScrollEndDrag={this.onScrollEndDrag}
           scrollsToTop={false}
           extraData={this.state.extraData}
           style={[this.props.styles.flatList, flatListStyle]}
           indicatorStyle={this.props.indicatorStyle}
           ref={this.flatListRef}
         />
       );
     }
     let loadingIndicator = null;
     if (!listDataWithHeights || !this.state.readyToShowList) {
       loadingIndicator = (
         <ContentLoading fillType="absolute" colors={this.props.colors} />
       );
     }
     const disableInputBar = this.state.currentlyEditing.length === 0;
     return (
       <>
         <NodeHeightMeasurer
           listData={this.props.listData}
           itemToID={Calendar.keyExtractor}
           itemToMeasureKey={this.heightMeasurerKey}
           itemToDummy={this.heightMeasurerDummy}
           mergeItemWithHeight={this.heightMeasurerMergeItem}
           allHeightsMeasured={this.allHeightsMeasured}
         />
         <View style={this.props.styles.container}>
           <DisconnectedBar visible={this.props.calendarActive} />
           {loadingIndicator}
           {flatList}
         </View>
         <KeyboardAvoidingView
           behavior="position"
           style={this.props.styles.keyboardAvoidingViewContainer}
           contentContainerStyle={this.props.styles.keyboardAvoidingView}
           pointerEvents="box-none"
         >
           <CalendarInputBar
             onSave={this.onSaveEntry}
             disabled={disableInputBar}
           />
         </KeyboardAvoidingView>
       </>
     );
   }
 
   flatListHeight(): number {
     const { safeAreaHeight, tabBarHeight } = this.props.dimensions;
     return safeAreaHeight - tabBarHeight;
   }
 
   initialScrollIndex(data: $ReadOnlyArray<CalendarItemWithHeight>): number {
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(data);
     const heightOfTodayHeader = Calendar.itemHeight(data[todayIndex]);
 
     let returnIndex = todayIndex;
     let heightLeft = (this.flatListHeight() - heightOfTodayHeader) / 2;
     while (heightLeft > 0) {
       heightLeft -= Calendar.itemHeight(data[--returnIndex]);
     }
     return returnIndex;
   }
 
   flatListRef = (flatList: ?FlatList<CalendarItemWithHeight>) => {
     this.flatList = flatList;
   };
 
   entryRef = (inEntryKey: string, entry: ?InternalEntry) => {
     this.entryRefs.set(inEntryKey, entry);
   };
 
   makeAllEntriesInactive = () => {
     if (_size(this.state.extraData.activeEntries) === 0) {
       if (_size(this.latestExtraData.activeEntries) !== 0) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: {},
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   makeActive = (key: string, active: boolean) => {
     if (!active) {
       const activeKeys = Object.keys(this.latestExtraData.activeEntries);
       if (activeKeys.length === 0) {
         if (Object.keys(this.state.extraData.activeEntries).length !== 0) {
           this.setState({ extraData: this.latestExtraData });
         }
         return;
       }
       const activeKey = activeKeys[0];
       if (activeKey === key) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: {},
         };
         this.setState({ extraData: this.latestExtraData });
       }
       return;
     }
 
     if (
       _size(this.state.extraData.activeEntries) === 1 &&
       this.state.extraData.activeEntries[key]
     ) {
       if (
         _size(this.latestExtraData.activeEntries) !== 1 ||
         !this.latestExtraData.activeEntries[key]
       ) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: { [key]: true },
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   onEnterEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const keyboardShownHeight = this.keyboardShownHeight;
     if (keyboardShownHeight && this.state.listDataWithHeights) {
       this.scrollToKey(key, keyboardShownHeight);
     } else {
       this.lastEntryKeyActive = key;
     }
     const newCurrentlyEditing = [
       ...new Set([...this.state.currentlyEditing, key]),
     ];
     if (newCurrentlyEditing.length > this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   onConcludeEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const newCurrentlyEditing = this.state.currentlyEditing.filter(
       k => k !== key,
     );
     if (newCurrentlyEditing.length < this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   keyboardShow = (event: KeyboardEvent) => {
     // flatListHeight() factors in the size of the tab bar,
     // but it is hidden by the keyboard since it is at the bottom
     const { bottomInset, tabBarHeight } = this.props.dimensions;
     const inputBarHeight = Platform.OS === 'android' ? 37.7 : 35.5;
-    const keyboardHeight = Platform.select({
+    const keyboardHeight: number = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(event.endCoordinates.height - bottomInset, 0),
     });
     const keyboardShownHeight =
       inputBarHeight + Math.max(keyboardHeight - tabBarHeight, 0);
     this.keyboardShownHeight = keyboardShownHeight;
 
     const lastEntryKeyActive = this.lastEntryKeyActive;
     if (lastEntryKeyActive && this.state.listDataWithHeights) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   };
 
   keyboardDismiss = () => {
     this.keyboardShownHeight = null;
   };
 
   scrollToKey(lastEntryKeyActive: string, keyboardHeight: number) {
     const data = this.state.listDataWithHeights;
     invariant(data, 'should be set');
     const index = data.findIndex(
       (item: CalendarItemWithHeight) =>
         Calendar.keyExtractor(item) === lastEntryKeyActive,
     );
     if (index === -1) {
       return;
     }
     const itemStart = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const itemHeight = Calendar.itemHeight(data[index]);
     const entryAdditionalActiveHeight = Platform.OS === 'android' ? 21 : 20;
     const itemEnd = itemStart + itemHeight + entryAdditionalActiveHeight;
     const visibleHeight = this.flatListHeight() - keyboardHeight;
     if (
       this.currentScrollPosition !== undefined &&
       this.currentScrollPosition !== null &&
       itemStart > this.currentScrollPosition &&
       itemEnd < this.currentScrollPosition + visibleHeight
     ) {
       return;
     }
     const offset = itemStart - (visibleHeight - itemHeight) / 2;
     invariant(this.flatList, 'flatList should be set');
     this.flatList.scrollToOffset({ offset, animated: true });
   }
 
   heightMeasurerKey = (item: CalendarItem): ?string => {
     if (item.itemType !== 'entryInfo') {
       return null;
     }
     return item.entryInfo.text;
   };
 
   heightMeasurerDummy = (item: CalendarItem): React.MixedElement => {
     invariant(
       item.itemType === 'entryInfo',
       'NodeHeightMeasurer asked for dummy for non-entryInfo item',
     );
     return dummyNodeForEntryHeightMeasurement(item.entryInfo.text);
   };
 
   heightMeasurerMergeItem = (
     item: CalendarItem,
     height: ?number,
   ): CalendarItemWithHeight => {
     if (item.itemType !== 'entryInfo') {
       return item;
     }
     invariant(height !== null && height !== undefined, 'height should be set');
     const { entryInfo } = item;
     return {
       itemType: 'entryInfo',
       entryInfo: Calendar.entryInfoWithHeight(entryInfo, height),
       threadInfo: item.threadInfo,
     };
   };
 
   static entryInfoWithHeight(
     entryInfo: EntryInfo,
     textHeight: number,
   ): EntryInfoWithHeight {
     // Blame Flow for not accepting object spread on exact types
     if (entryInfo.id && entryInfo.localID) {
       return {
         id: entryInfo.id,
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else if (entryInfo.id) {
       return {
         id: entryInfo.id,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else {
       return {
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     }
   }
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<CalendarItemWithHeight>,
   ) => {
     this.setState({ listDataWithHeights });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       // This indicates the listData was cleared (set to null) right before this
       // callback was called. Since this leads to the FlatList getting cleared,
       // we'll just ignore this callback.
       return;
     }
 
     const visibleEntries: { [string]: boolean } = {};
     for (const token of info.viewableItems) {
       if (token.item.itemType === 'entryInfo') {
         visibleEntries[entryKey(token.item.entryInfo)] = true;
       }
     }
     this.latestExtraData = {
       activeEntries: _pickBy((_, key: string) => {
         if (visibleEntries[key]) {
           return true;
         }
         // We don't automatically set scrolled-away entries to be inactive
         // because entries can be out-of-view at creation time if they need to
         // be scrolled into view (see onEnterEntryEditMode). If Entry could
         // distinguish the reasons its active prop gets set to false, it could
         // differentiate the out-of-view case from the something-pressed case,
         // and then we could set scrolled-away entries to be inactive without
         // worrying about this edge case. Until then...
         const foundItem = _find(
           item => item.entryInfo && entryKey(item.entryInfo) === key,
         )(ldwh);
         return !!foundItem;
       })(this.latestExtraData.activeEntries),
       visibleEntries,
     };
 
     const topLoader = _find({ key: 'TopLoader' })(info.viewableItems);
     if (this.topLoaderWaitingToLeaveView && !topLoader) {
       this.topLoaderWaitingToLeaveView = false;
       this.topLoadingFromScroll = null;
     }
 
     const bottomLoader = _find({ key: 'BottomLoader' })(info.viewableItems);
     if (this.bottomLoaderWaitingToLeaveView && !bottomLoader) {
       this.bottomLoaderWaitingToLeaveView = false;
       this.bottomLoadingFromScroll = null;
     }
 
     if (
       !this.state.readyToShowList &&
       !this.topLoaderWaitingToLeaveView &&
       !this.bottomLoaderWaitingToLeaveView &&
       info.viewableItems.length > 0
     ) {
       this.setState({
         readyToShowList: true,
         extraData: this.latestExtraData,
       });
     }
 
     if (
       topLoader &&
       !this.topLoaderWaitingToLeaveView &&
       !this.topLoadingFromScroll
     ) {
       this.topLoaderWaitingToLeaveView = true;
       const start = dateFromString(this.props.startDate);
       start.setDate(start.getDate() - 31);
       const startDate = dateString(start);
       const endDate = this.props.endDate;
       this.topLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreAbove();
     } else if (
       bottomLoader &&
       !this.bottomLoaderWaitingToLeaveView &&
       !this.bottomLoadingFromScroll
     ) {
       this.bottomLoaderWaitingToLeaveView = true;
       const end = dateFromString(this.props.endDate);
       end.setDate(end.getDate() + 31);
       const endDate = dateString(end);
       const startDate = this.props.startDate;
       this.bottomLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreBelow();
     }
   };
 
   dispatchCalendarQueryUpdate(calendarQuery: CalendarQuery) {
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({ calendarQuery }),
     );
   }
 
   loadMoreAbove: () => void = _throttle(() => {
     if (
       this.topLoadingFromScroll &&
       this.topLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.topLoadingFromScroll);
     }
   }, 1000);
 
   loadMoreBelow: () => void = _throttle(() => {
     if (
       this.bottomLoadingFromScroll &&
       this.bottomLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.bottomLoadingFromScroll);
     }
   }, 1000);
 
   onScroll = (event: ScrollEvent) => {
     this.currentScrollPosition = event.nativeEvent.contentOffset.y;
   };
 
   // When the user "flicks" the scroll view, this callback gets triggered after
   // the scrolling ends
   onMomentumScrollEnd = () => {
     this.setState({ extraData: this.latestExtraData });
   };
 
   // This callback gets triggered when the user lets go of scrolling the scroll
   // view, regardless of whether it was a "flick" or a pan
   onScrollEndDrag = () => {
     // We need to figure out if this was a flick or not. If it's a flick, we'll
     // let onMomentumScrollEnd handle it once scroll position stabilizes
     const currentScrollPosition = this.currentScrollPosition;
     setTimeout(() => {
       if (this.currentScrollPosition === currentScrollPosition) {
         this.setState({ extraData: this.latestExtraData });
       }
     }, 50);
   };
 
   onSaveEntry = () => {
     const entryKeys = Object.keys(this.latestExtraData.activeEntries);
     if (entryKeys.length === 0) {
       return;
     }
     const entryRef = this.entryRefs.get(entryKeys[0]);
     if (entryRef) {
       entryRef.completeEdit();
     }
   };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 const activeTabSelector = createActiveTabSelector(CalendarRouteName);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const calendarActive =
       activeTabSelector(navContext) || activeThreadPickerSelector(navContext);
 
     const listData = useSelector(calendarListData);
     const startDate = useSelector(state => state.navInfo.startDate);
     const endDate = useSelector(state => state.navInfo.endDate);
     const calendarFilters = useSelector(state => state.calendarFilters);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const loadingStatus = useSelector(loadingStatusSelector);
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const connectionStatus = connection.status;
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateCalendarQuery = useUpdateCalendarQuery();
 
     return (
       <Calendar
         {...props}
         calendarActive={calendarActive}
         listData={listData}
         startDate={startDate}
         endDate={endDate}
         calendarFilters={calendarFilters}
         dimensions={dimensions}
         loadingStatus={loadingStatus}
         connectionStatus={connectionStatus}
         colors={colors}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/native/chat/settings/thread-settings-category.react.js b/native/chat/settings/thread-settings-category.react.js
index 997bf2350..f6eca2661 100644
--- a/native/chat/settings/thread-settings-category.react.js
+++ b/native/chat/settings/thread-settings-category.react.js
@@ -1,133 +1,133 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform, TouchableOpacity } from 'react-native';
 
 import { useStyles } from '../../themes/colors.js';
 
 export type CategoryType = 'full' | 'outline' | 'unpadded';
 type HeaderProps = {
   +type: CategoryType,
   +title: string,
 };
 function ThreadSettingsCategoryHeader(props: HeaderProps): React.Node {
   const styles = useStyles(unboundStyles);
   let contentStyle, paddingStyle;
   if (props.type === 'full') {
     contentStyle = styles.fullHeader;
     paddingStyle = styles.fullHeaderPadding;
   } else if (props.type === 'outline') {
     // nothing
   } else if (props.type === 'unpadded') {
     contentStyle = styles.fullHeader;
   } else {
     invariant(false, 'invalid ThreadSettingsCategory type');
   }
   return (
     <View>
       <View style={[styles.header, contentStyle]}>
         <Text style={styles.title}>{props.title.toUpperCase()}</Text>
       </View>
       <View style={paddingStyle} />
     </View>
   );
 }
 
 type ActionHeaderProps = {
   +title: string,
   +actionText: string,
   +onPress: () => mixed,
 };
 function ThreadSettingsCategoryActionHeader(
   props: ActionHeaderProps,
 ): React.Node {
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.actionHeader}>
       <Text style={styles.title}>{props.title.toUpperCase()}</Text>
       <TouchableOpacity onPress={props.onPress}>
         <Text style={styles.actionText}>{props.actionText}</Text>
       </TouchableOpacity>
     </View>
   );
 }
 
 type FooterProps = {
   +type: CategoryType,
 };
 function ThreadSettingsCategoryFooter(props: FooterProps): React.Node {
   const styles = useStyles(unboundStyles);
   let contentStyle, paddingStyle;
   if (props.type === 'full') {
     contentStyle = styles.fullFooter;
     paddingStyle = styles.fullFooterPadding;
   } else if (props.type === 'outline') {
     // nothing
   } else if (props.type === 'unpadded') {
     contentStyle = styles.fullFooter;
   } else {
     invariant(false, 'invalid ThreadSettingsCategory type');
   }
   return (
     <View>
       <View style={paddingStyle} />
       <View style={[styles.footer, contentStyle]} />
     </View>
   );
 }
 
-const paddingHeight = Platform.select({
+const paddingHeight: number = Platform.select({
   android: 6.5,
   default: 6,
 });
 const unboundStyles = {
   footer: {
     marginBottom: 16,
   },
   fullFooter: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   fullFooterPadding: {
     backgroundColor: 'panelForeground',
     height: paddingHeight,
   },
   fullHeader: {
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
   },
   fullHeaderPadding: {
     backgroundColor: 'panelForeground',
     height: paddingHeight,
     margin: 0,
   },
   header: {
     marginTop: 16,
   },
   title: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingLeft: 24,
   },
   actionHeader: {
     marginTop: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   actionText: {
     color: 'link',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingRight: 12,
   },
 };
 
 export {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryActionHeader,
   ThreadSettingsCategoryFooter,
 };
diff --git a/native/chat/settings/thread-settings-color.react.js b/native/chat/settings/thread-settings-color.react.js
index 8d1f3f6b5..1673c737d 100644
--- a/native/chat/settings/thread-settings-color.react.js
+++ b/native/chat/settings/thread-settings-color.react.js
@@ -1,126 +1,126 @@
 // @flow
 
 import * as React from 'react';
 import { Text, ActivityIndicator, View, Platform } from 'react-native';
 
 import { changeThreadSettingsActionTypes } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
 import type { ThreadSettingsNavigate } from './thread-settings.react.js';
 import ColorSplotch from '../../components/color-splotch.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import { ColorSelectorModalRouteName } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 
 const unboundStyles = {
   colorLine: {
-    lineHeight: Platform.select({ android: 22, default: 25 }),
+    lineHeight: (Platform.select({ android: 22, default: 25 }): number),
   },
   colorRow: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingBottom: 8,
     paddingHorizontal: 24,
     paddingTop: 4,
   },
   currentValue: {
     flex: 1,
     paddingLeft: 4,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +colorEditValue: string,
   +setColorEditValue: (color: string) => void,
   +canChangeSettings: boolean,
   +navigate: ThreadSettingsNavigate,
   +threadSettingsRouteKey: string,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
 };
 class ThreadSettingsColor extends React.PureComponent<Props> {
   render(): React.Node {
     let colorButton;
     if (this.props.loadingStatus !== 'loading') {
       colorButton = (
         <EditSettingButton
           onPress={this.onPressEditColor}
           canChangeSettings={this.props.canChangeSettings}
           style={this.props.styles.colorLine}
         />
       );
     } else {
       colorButton = (
         <ActivityIndicator
           size="small"
           key="activityIndicator"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     }
 
     return (
       <View style={this.props.styles.colorRow}>
         <Text style={[this.props.styles.label, this.props.styles.colorLine]}>
           Color
         </Text>
         <View style={this.props.styles.currentValue}>
           <ColorSplotch color={this.props.threadInfo.color} />
         </View>
         {colorButton}
       </View>
     );
   }
 
   onPressEditColor = () => {
     this.props.navigate<'ColorSelectorModal'>({
       name: ColorSelectorModalRouteName,
       params: {
         presentedFrom: this.props.threadSettingsRouteKey,
         color: this.props.colorEditValue,
         threadInfo: this.props.threadInfo,
         setColor: this.props.setColorEditValue,
       },
     });
   };
 }
 
 const ConnectedThreadSettingsColor: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsColor(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:color`,
       ),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     return (
       <ThreadSettingsColor
         {...props}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
       />
     );
   });
 
 export default ConnectedThreadSettingsColor;
diff --git a/native/components/edit-setting-button.react.js b/native/components/edit-setting-button.react.js
index 0fcbee51c..2de890df4 100644
--- a/native/components/edit-setting-button.react.js
+++ b/native/components/edit-setting-button.react.js
@@ -1,51 +1,51 @@
 // @flow
 
 import * as React from 'react';
 import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import { useColors } from '../themes/colors.js';
 import type { TextStyle } from '../types/styles.js';
 
 type Props = {
   +onPress: () => void,
   +canChangeSettings: boolean,
   +style?: TextStyle,
 };
 function EditSettingButton(props: Props): React.Node {
   const colors = useColors();
 
   const appliedStyles = React.useMemo(() => {
     const stylesArr: Array<TextStyle> = [styles.editIcon];
     if (props.style) {
       stylesArr.push(props.style);
     }
     return stylesArr;
   }, [props.style]);
 
   if (!props.canChangeSettings) {
     return null;
   }
 
   const { modalForegroundSecondaryLabel } = colors;
   return (
     <TouchableOpacity onPress={props.onPress}>
       <SWMansionIcon
         name="edit-1"
         size={20}
         style={appliedStyles}
         color={modalForegroundSecondaryLabel}
       />
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   editIcon: {
     paddingLeft: 10,
-    paddingTop: Platform.select({ android: 1, default: 0 }),
+    paddingTop: (Platform.select({ android: 1, default: 0 }): number),
     textAlign: 'right',
   },
 });
 
 export default EditSettingButton;
diff --git a/native/components/pencil-icon.react.js b/native/components/pencil-icon.react.js
index f9e02130f..d83f5b7b2 100644
--- a/native/components/pencil-icon.react.js
+++ b/native/components/pencil-icon.react.js
@@ -1,23 +1,23 @@
 // @flow
 
 import * as React from 'react';
 import { Platform } from 'react-native';
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import { useStyles } from '../themes/colors.js';
 
 function PencilIcon(): React.Node {
   const styles = useStyles(unboundStyles);
   return <SWMansionIcon name="edit-1" size={20} style={styles.editIcon} />;
 }
 
 const unboundStyles = {
   editIcon: {
     color: 'modalForegroundSecondaryLabel',
     lineHeight: 20,
-    paddingTop: Platform.select({ android: 1, default: 0 }),
+    paddingTop: (Platform.select({ android: 1, default: 0 }): number),
     textAlign: 'right',
   },
 };
 
 export default PencilIcon;
diff --git a/native/components/search.react.js b/native/components/search.react.js
index db25eb173..e05a8d72d 100644
--- a/native/components/search.react.js
+++ b/native/components/search.react.js
@@ -1,149 +1,149 @@
 // @flow
 
 import * as React from 'react';
 import {
   View,
   TouchableOpacity,
   TextInput as BaseTextInput,
   Text,
   Platform,
 } from 'react-native';
 
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import type { ReactRefSetter } from 'lib/types/react-types.js';
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import TextInput from './text-input.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles, useColors } from '../themes/colors.js';
 import type { ViewStyle } from '../types/styles.js';
 
 type Props = {
   ...React.ElementConfig<typeof BaseTextInput>,
   +searchText: string,
   +onChangeText: (searchText: string) => mixed,
   +containerStyle?: ViewStyle,
   +active?: boolean,
 };
 
 function ForwardedSearch(
   props: Props,
   ref: ReactRefSetter<React.ElementRef<typeof BaseTextInput>>,
 ) {
   const { onChangeText, searchText, containerStyle, active, ...rest } = props;
 
   const clearSearch = React.useCallback(() => {
     onChangeText('');
   }, [onChangeText]);
 
   const loggedIn = useSelector(isLoggedIn);
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const prevLoggedInRef = React.useRef<?boolean>();
   React.useEffect(() => {
     const prevLoggedIn = prevLoggedInRef.current;
     prevLoggedInRef.current = loggedIn;
     if (!loggedIn && prevLoggedIn) {
       clearSearch();
     }
   }, [loggedIn, clearSearch]);
 
   const { listSearchIcon: iconColor } = colors;
 
   let clearSearchInputIcon = null;
   if (searchText) {
     clearSearchInputIcon = (
       <TouchableOpacity
         onPress={clearSearch}
         activeOpacity={0.5}
         style={styles.clearSearchButton}
       >
         <SWMansionIcon name="cross-circle" size={20} color={iconColor} />
       </TouchableOpacity>
     );
   }
 
   const inactive = active === false;
   const usingPlaceholder = !searchText && rest.placeholder;
   const inactiveTextStyle = React.useMemo(
     () =>
       inactive && usingPlaceholder
         ? [styles.searchText, styles.inactiveSearchText, { color: iconColor }]
         : [styles.searchText, styles.inactiveSearchText],
     [
       inactive,
       usingPlaceholder,
       styles.searchText,
       styles.inactiveSearchText,
       iconColor,
     ],
   );
 
   let textNode;
   if (!inactive) {
     const textInputProps: React.ElementProps<typeof BaseTextInput> = {
       style: styles.searchText,
       value: searchText,
       onChangeText: onChangeText,
       placeholderTextColor: iconColor,
       returnKeyType: 'go',
     };
     textNode = <TextInput {...textInputProps} {...rest} ref={ref} />;
   } else {
     const text = usingPlaceholder ? rest.placeholder : searchText;
     textNode = <Text style={inactiveTextStyle}>{text}</Text>;
   }
 
   return (
     <View style={[styles.search, containerStyle]}>
       <SWMansionIcon name="search" size={22} color={iconColor} />
       {textNode}
       {clearSearchInputIcon}
     </View>
   );
 }
 
 const Search: React.AbstractComponent<
   Props,
   React.ElementRef<typeof BaseTextInput>,
 > = React.forwardRef<Props, React.ElementRef<typeof BaseTextInput>>(
   ForwardedSearch,
 );
 Search.displayName = 'Search';
 
 const unboundStyles = {
   search: {
     alignItems: 'center',
     backgroundColor: 'listSearchBackground',
     borderRadius: 8,
     flexDirection: 'row',
     paddingLeft: 14,
     paddingRight: 7,
   },
   inactiveSearchText: {
-    transform: Platform.select({
+    transform: (Platform.select({
       ios: [{ translateY: 1 / 3 }],
       default: undefined,
-    }),
+    }): ?$ReadOnlyArray<{ +translateY: number }>),
   },
   searchText: {
     color: 'listForegroundLabel',
     flex: 1,
     fontSize: 16,
     marginLeft: 8,
     marginVertical: 6,
     padding: 0,
     borderBottomColor: 'transparent',
   },
   clearSearchButton: {
     paddingVertical: 5,
     paddingLeft: 5,
   },
 };
 
 const MemoizedSearch: typeof Search = React.memo<
   Props,
   React.ElementRef<typeof BaseTextInput>,
 >(Search);
 
 export default MemoizedSearch;
diff --git a/native/crash.react.js b/native/crash.react.js
index 6d0339010..244f487fa 100644
--- a/native/crash.react.js
+++ b/native/crash.react.js
@@ -1,298 +1,298 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import Clipboard from '@react-native-clipboard/clipboard';
 import invariant from 'invariant';
 import _shuffle from 'lodash/fp/shuffle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   Platform,
   StyleSheet,
   ScrollView,
   ActivityIndicator,
 } from 'react-native';
 
 import {
   sendReportActionTypes,
   sendReport,
 } from 'lib/actions/report-actions.js';
 import { logOutActionTypes, useLogOut } from 'lib/actions/user-actions.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import { type ErrorData, reportTypes } from 'lib/types/report-types.js';
 import type { PreRequestUserState } from 'lib/types/session-types.js';
 import { actionLogger } from 'lib/utils/action-logger.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 import {
   sanitizeReduxReport,
   type ReduxCrashReport,
 } from 'lib/utils/sanitization.js';
 import sleep from 'lib/utils/sleep.js';
 
 import Button from './components/button.react.js';
 import ConnectedStatusBar from './connected-status-bar.react.js';
 import { commCoreModule } from './native-modules.js';
 import { persistConfig, codeVersion } from './redux/persist.js';
 import { useSelector } from './redux/redux-utils.js';
 import { wipeAndExit } from './utils/crash-utils.js';
 
 const errorTitles = ['Oh no!!', 'Womp womp womp...'];
 
 type BaseProps = {
   +errorData: $ReadOnlyArray<ErrorData>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +preRequestUserState: PreRequestUserState,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
   +crashReportingEnabled: boolean,
 };
 type State = {
   +errorReportID: ?string,
   +doneWaiting: boolean,
 };
 class Crash extends React.PureComponent<Props, State> {
   errorTitle: string = _shuffle(errorTitles)[0];
 
   constructor(props: Props) {
     super(props);
     this.state = {
       errorReportID: null,
       doneWaiting: !props.crashReportingEnabled,
     };
   }
 
   componentDidMount() {
     if (this.state.doneWaiting) {
       return;
     }
     this.props.dispatchActionPromise(sendReportActionTypes, this.sendReport());
     this.timeOut();
   }
 
   async timeOut() {
     // If it takes more than 10s, give up and let the user exit
     await sleep(10000);
     this.setState({ doneWaiting: true });
   }
 
   render(): React.Node {
     const errorText = [...this.props.errorData]
       .reverse()
       .map(errorData => errorData.error.message)
       .join('\n');
 
     let crashID;
     if (!this.state.doneWaiting) {
       crashID = <ActivityIndicator size="small" color="black" />;
     } else if (this.state.doneWaiting && this.state.errorReportID) {
       crashID = (
         <View style={styles.crashID}>
           <Text style={styles.crashIDText}>Crash report ID:</Text>
           <View style={styles.errorReportID}>
             <Text style={styles.errorReportIDText}>
               {this.state.errorReportID}
             </Text>
             <Button onPress={this.onCopyCrashReportID}>
               <Text style={styles.copyCrashReportIDButtonText}>(Copy)</Text>
             </Button>
           </View>
         </View>
       );
     } else {
       crashID = (
         <Text style={styles.text}>
           Crash reporting can be enabled in the Profile tab.
         </Text>
       );
     }
 
     const buttonStyle = { opacity: Number(this.state.doneWaiting) };
 
     return (
       <View style={styles.container}>
         <ConnectedStatusBar barStyle="dark-content" />
         <Icon name="bug" size={32} color="red" />
         <Text style={styles.header}>{this.errorTitle}</Text>
         <Text style={styles.text}>I&rsquo;m sorry, but the app crashed.</Text>
         {crashID}
         <Text style={styles.text}>
           Here&rsquo;s some text that&rsquo;s probably not helpful:
         </Text>
         <ScrollView style={styles.scrollView}>
           <Text style={styles.errorText}>{errorText}</Text>
         </ScrollView>
         <View style={[styles.buttons, buttonStyle]}>
           <Button onPress={this.onPressKill} style={styles.button}>
             <Text style={styles.buttonText}>Kill the app</Text>
           </Button>
           <Button onPress={this.onPressWipe} style={styles.button}>
             <Text style={styles.buttonText}>Wipe state and kill app</Text>
           </Button>
         </View>
       </View>
     );
   }
 
   async sendReport() {
     // There's a type error here because ActionLogger doesn't understand the
     // exact shape of the Redux state / actions it is passed. We could solve it
     // by adding some type params to ActionLogger
     const rawReduxReport: ReduxCrashReport = ({
       preloadedState: actionLogger.preloadedState,
       currentState: actionLogger.currentState,
       actions: actionLogger.actions,
     }: any);
     const sanitizedReduxReport = sanitizeReduxReport(rawReduxReport);
     const result = await sendReport({
       type: reportTypes.ERROR,
       platformDetails: {
         platform: Platform.OS,
         codeVersion,
         stateVersion: persistConfig.version,
       },
       errors: this.props.errorData.map(data => ({
         errorMessage: data.error.message,
         stack: data.error.stack,
         componentStack: data.info && data.info.componentStack,
       })),
       ...sanitizedReduxReport,
       id: generateReportID(),
     });
     this.setState({
       errorReportID: result.id,
       doneWaiting: true,
     });
   }
 
   onPressKill = () => {
     if (!this.state.doneWaiting) {
       return;
     }
     commCoreModule.terminate();
   };
 
   onPressWipe = async () => {
     if (!this.state.doneWaiting) {
       return;
     }
     this.props.dispatchActionPromise(logOutActionTypes, this.logOutAndExit());
   };
 
   async logOutAndExit() {
     try {
       await this.props.logOut(this.props.preRequestUserState);
     } catch (e) {}
     await wipeAndExit();
   }
 
   onCopyCrashReportID = () => {
     invariant(this.state.errorReportID, 'should be set');
     Clipboard.setString(this.state.errorReportID);
   };
 }
 
 const styles = StyleSheet.create({
   button: {
     backgroundColor: '#FF0000',
     borderRadius: 5,
     marginHorizontal: 10,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
   },
   buttons: {
     flexDirection: 'row',
   },
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
     flex: 1,
     justifyContent: 'center',
   },
   copyCrashReportIDButtonText: {
     color: '#036AFF',
   },
   crashID: {
     alignItems: 'center',
     paddingBottom: 12,
     paddingTop: 2,
   },
   crashIDText: {
     color: 'black',
   },
   errorReportID: {
     flexDirection: 'row',
     height: 20,
   },
   errorReportIDText: {
     color: 'black',
-    fontFamily: Platform.select({
+    fontFamily: (Platform.select({
       ios: 'Menlo',
       default: 'monospace',
-    }),
+    }): string),
     fontSize: 12,
     paddingRight: 8,
     paddingTop: 3,
   },
   errorText: {
     color: 'black',
-    fontFamily: Platform.select({
+    fontFamily: (Platform.select({
       ios: 'Menlo',
       default: 'monospace',
-    }),
+    }): string),
   },
   header: {
     color: 'black',
     fontSize: 24,
     paddingBottom: 24,
   },
   scrollView: {
     flex: 1,
     marginBottom: 24,
     marginTop: 12,
     maxHeight: 200,
     paddingHorizontal: 50,
   },
   text: {
     color: 'black',
     paddingBottom: 12,
   },
 });
 
 const ConnectedCrash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCrash(props: BaseProps) {
     const preRequestUserState = useSelector(preRequestUserStateSelector);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callLogOut = useLogOut();
     const crashReportingEnabled = useIsReportEnabled('crashReports');
     return (
       <Crash
         {...props}
         preRequestUserState={preRequestUserState}
         dispatchActionPromise={dispatchActionPromise}
         logOut={callLogOut}
         crashReportingEnabled={crashReportingEnabled}
       />
     );
   },
 );
 
 export default ConnectedCrash;
diff --git a/native/keyboard/keyboard.js b/native/keyboard/keyboard.js
index 9a1c1c194..a6ac3c34f 100644
--- a/native/keyboard/keyboard.js
+++ b/native/keyboard/keyboard.js
@@ -1,101 +1,101 @@
 // @flow
 
 import { Keyboard, Platform, DeviceInfo } from 'react-native';
 
 import type {
   EventSubscription,
   KeyboardEvent,
 } from '../types/react-native.js';
 
 export type ScreenRect = $ReadOnly<{
   screenX: number,
   screenY: number,
   width: number,
   height: number,
 }>;
 
 type ShowKeyboardCallback = (event: KeyboardEvent) => void;
 type HideKeyboardCallback = (event: ?KeyboardEvent) => void;
 
 const isIPhoneX =
   Platform.OS === 'ios' && DeviceInfo.getConstants().isIPhoneX_deprecated;
-const defaultKeyboardHeight = Platform.select({
+const defaultKeyboardHeight: number = Platform.select({
   ios: isIPhoneX ? 335 : 216,
   android: 282.28,
 });
 let keyboardHeight = null;
 function getKeyboardHeight(): ?number {
   if (keyboardHeight !== null && keyboardHeight !== undefined) {
     return keyboardHeight;
   }
   return defaultKeyboardHeight;
 }
 
 function callShowCallback(
   callback: ShowKeyboardCallback,
 ): ShowKeyboardCallback {
   return (event: KeyboardEvent) => {
     if (event) {
       const { height } = event.endCoordinates;
       // On iOS simulator, when the keyboard is disabled we still trigger here,
       // but with small values. This condition should filter that out
       if (Platform.OS !== 'ios' || height > 100) {
         keyboardHeight = height;
       }
     }
     callback(event);
   };
 }
 function addKeyboardShowListener(
   callback: ShowKeyboardCallback,
 ): EventSubscription {
   return Keyboard.addListener(
     Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
     callShowCallback(callback),
   );
 }
 
 function callHideCallback(
   callback: HideKeyboardCallback,
 ): HideKeyboardCallback {
   return (event: ?KeyboardEvent) => {
     if (event) {
       const { height } = event.endCoordinates;
       if (height > 0 && (!keyboardHeight || keyboardHeight < height)) {
         keyboardHeight = height;
       }
     }
     callback(event);
   };
 }
 function addKeyboardDismissListener(
   callback: HideKeyboardCallback,
 ): EventSubscription {
   return Keyboard.addListener(
     Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
     callHideCallback(callback),
   );
 }
 function addKeyboardDidDismissListener(
   callback: HideKeyboardCallback,
 ): EventSubscription {
   return Keyboard.addListener('keyboardDidHide', callHideCallback(callback));
 }
 
 function removeKeyboardListener(listener: EventSubscription) {
   listener.remove();
 }
 
 // This happens because we set windowTranslucentStatus and
 // windowTranslucentNavigation
 const rnsacThinksAndroidKeyboardResizesFrame: boolean =
   Platform.OS === 'android' && Platform.Version < 23;
 
 export {
   getKeyboardHeight,
   addKeyboardShowListener,
   addKeyboardDismissListener,
   addKeyboardDidDismissListener,
   removeKeyboardListener,
   rnsacThinksAndroidKeyboardResizesFrame,
 };
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index 37128addc..beb8682cb 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1219 +1,1219 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
   Image,
   Animated,
   Easing,
 } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import filesystem from 'react-native-fs';
 import {
   PinchGestureHandler,
   TapGestureHandler,
   State as GestureState,
   type PinchGestureEvent,
   type TapGestureEvent,
 } 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,
   type EventResult,
 } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { pathFromURI, filenameFromPathOrURI } from 'lib/media/file-utils.js';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js';
 import type { PhotoCapture } from 'lib/types/media-types.js';
 import type { ReactRef } from 'lib/types/react-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import SendMediaButton from './send-media-button.react.js';
 import type { RegistrationNavigationProp } from '../account/registration/registration-navigator.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { colors } from '../themes/colors.js';
 import { type DeviceCameraInfo } from '../types/camera.js';
 import type { NativeMethods } from '../types/react-native.js';
 import {
   AnimatedView,
   type ViewStyle,
   type AnimatedViewStyle,
 } from '../types/styles.js';
 import { clamp, gestureJustEnded } from '../utils/animation-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   timing,
   spring,
   SpringUtils,
 } = Reanimated;
 /* eslint-enable import/no-named-as-default-member */
 
 const maxZoom = 16;
 const zoomUpdateFactor = (() => {
   if (Platform.OS === 'ios') {
     return 0.002;
   }
   if (Platform.OS === 'android' && Platform.Version > 26) {
     return 0.005;
   }
   if (Platform.OS === 'android' && Platform.Version > 23) {
     return 0.01;
   }
   return 0.03;
 })();
 
 const stagingModeAnimationConfig = {
   duration: 150,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const indicatorSpringConfig = {
   ...SpringUtils.makeDefaultConfig(),
   damping: 0,
   mass: 0.6,
   toValue: 1,
 };
 const indicatorTimingConfig = {
   duration: 500,
   easing: ReanimatedEasing.out(ReanimatedEasing.ease),
   toValue: 0,
 };
 function runIndicatorAnimation(
   // Inputs
   springClock: Clock,
   delayClock: Clock,
   timingClock: Clock,
   animationRunning: Node,
   // Outputs
   scale: Value,
   opacity: Value,
 ): Node {
   const delayStart = new Value(0);
 
   const springScale = new Value(0.75);
   const delayScale = new Value(0);
   const timingScale = new Value(0.75);
 
   const animatedScale = cond(
     clockRunning(springClock),
     springScale,
     cond(clockRunning(delayClock), delayScale, timingScale),
   );
   const lastAnimatedScale = new Value(0.75);
   const numScaleLoops = new Value(0);
 
   const springState = {
     finished: new Value(1),
     velocity: new Value(0),
     time: new Value(0),
     position: springScale,
   };
   const timingState = {
     finished: new Value(1),
     frameTime: new Value(0),
     time: new Value(0),
     position: timingScale,
   };
 
   return block([
     cond(not(animationRunning), [
       set(springState.finished, 0),
       set(springState.velocity, 0),
       set(springState.time, 0),
       set(springScale, 0.75),
       set(lastAnimatedScale, 0.75),
       set(numScaleLoops, 0),
       set(opacity, 1),
       startClock(springClock),
     ]),
     [
       cond(
         clockRunning(springClock),
         spring(springClock, springState, indicatorSpringConfig),
       ),
       timing(timingClock, timingState, indicatorTimingConfig),
     ],
     [
       cond(
         and(
           greaterThan(animatedScale, 1.2),
           not(greaterThan(lastAnimatedScale, 1.2)),
         ),
         [
           set(numScaleLoops, add(numScaleLoops, 1)),
           cond(greaterThan(numScaleLoops, 1), [
             set(springState.finished, 1),
             stopClock(springClock),
             set(delayScale, springScale),
             set(delayStart, delayClock),
             startClock(delayClock),
           ]),
         ],
       ),
       set(lastAnimatedScale, animatedScale),
     ],
     cond(
       and(
         clockRunning(delayClock),
         greaterThan(delayClock, add(delayStart, 400)),
       ),
       [
         stopClock(delayClock),
         set(timingState.finished, 0),
         set(timingState.frameTime, 0),
         set(timingState.time, 0),
         set(timingScale, delayScale),
         startClock(timingClock),
       ],
     ),
     cond(
       and(springState.finished, timingState.finished),
       stopClock(timingClock),
     ),
     set(scale, animatedScale),
     cond(clockRunning(timingClock), set(opacity, clamp(animatedScale, 0, 1))),
   ]);
 }
 
 type RNCameraStatus = 'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED';
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +handlePhotoCapture: (capture: PhotoCapture) => mixed,
   +navigation:
     | AppNavigationProp<'ChatCameraModal'>
     | AppNavigationProp<'UserAvatarCameraModal'>
     | AppNavigationProp<'ThreadAvatarCameraModal'>
     | RegistrationNavigationProp<'RegistrationUserAvatarCameraModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +deviceCameraInfo: DeviceCameraInfo,
   +deviceOrientation: Orientations,
   +foreground: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // 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: EventResult<PinchGestureEvent>;
   pinchHandler: ReactRef<PinchGestureHandler> = React.createRef();
   tapEvent: EventResult<TapGestureEvent>;
   tapHandler: ReactRef<TapGestureHandler> = React.createRef();
   animationCode: Node;
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   closeButtonX: Value = new Value(-1);
   closeButtonY: Value = new Value(-1);
   closeButtonWidth: Value = new Value(0);
   closeButtonHeight: Value = new Value(0);
 
   photoButton: ?React.ElementRef<TouchableOpacityInstance>;
   photoButtonX: Value = new Value(-1);
   photoButtonY: Value = new Value(-1);
   photoButtonWidth: Value = new Value(0);
   photoButtonHeight: Value = new Value(0);
 
   switchCameraButton: ?React.ElementRef<TouchableOpacityInstance>;
   switchCameraButtonX: Value = new Value(-1);
   switchCameraButtonY: Value = new Value(-1);
   switchCameraButtonWidth: Value = new Value(0);
   switchCameraButtonHeight: Value = new Value(0);
 
   flashButton: ?React.ElementRef<TouchableOpacityInstance>;
   flashButtonX: Value = new Value(-1);
   flashButtonY: Value = new Value(-1);
   flashButtonWidth: Value = new Value(0);
   flashButtonHeight: Value = new Value(0);
 
   focusIndicatorX: Value = new Value(-1);
   focusIndicatorY: Value = new Value(-1);
   focusIndicatorScale: Value = new Value(0);
   focusIndicatorOpacity: Value = new Value(0);
 
   cancelIndicatorAnimation: Value = new Value(0);
 
   cameraIDsFetched = false;
 
   stagingModeProgress: Value = new Value(0);
   sendButtonProgress: Animated.Value = 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: Props): boolean {
     const { overlayContext } = props;
     if (!overlayContext) {
       return true;
     }
     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(): AnimatedViewStyle {
     const { overlayContext } = this.props;
     if (!overlayContext) {
       return styles.container;
     }
     return {
       ...styles.container,
       opacity: overlayContext.position,
     };
   }
 
   get focusIndicatorStyle(): AnimatedViewStyle {
     return {
       ...styles.focusIndicator,
       opacity: this.focusIndicatorOpacity,
       transform: [
         { translateX: this.focusIndicatorX },
         { translateY: this.focusIndicatorY },
         { scale: this.focusIndicatorScale },
       ],
     };
   }
 
   renderCamera = ({
     camera,
     status,
   }: {
     +camera: RNCamera & { +_cameraHandle?: mixed, ... },
     status: RNCameraStatus,
     ...
   }): React.Node => {
     if (camera && camera._cameraHandle) {
       this.fetchCameraIDs(camera);
     }
     if (this.state.stagingMode) {
       return this.renderStagingView();
     }
 
     return (
       <SafeAreaView style={styles.fill}>
         <View style={styles.fill}>
           {this.renderCameraContent(status)}
           <TouchableOpacity
             onPress={this.close}
             onLayout={this.onCloseButtonLayout}
             style={styles.closeButton}
             ref={this.closeButtonRef}
           >
             <Text style={styles.closeIcon}>×</Text>
           </TouchableOpacity>
         </View>
       </SafeAreaView>
     );
   };
 
   renderStagingView(): React.Node {
     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} />;
     }
 
     return (
       <>
         {image}
         <SafeAreaView style={styles.stagingViewOverlay}>
           <View style={styles.fill}>
             <TouchableOpacity
               onPress={this.clearPendingImage}
               style={styles.retakeButton}
             >
               <Icon name="ios-arrow-back" style={styles.retakeIcon} />
             </TouchableOpacity>
             <SendMediaButton
               onPress={this.sendPhoto}
               pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
               containerStyle={styles.sendButtonContainer}
               style={this.sendButtonStyle}
             />
           </View>
         </SafeAreaView>
       </>
     );
   }
 
   renderCameraContent(status: RNCameraStatus): React.Node {
     if (status === 'PENDING_AUTHORIZATION') {
       return <ContentLoading fillType="flex" colors={colors.dark} />;
     } else if (status === 'NOT_AUTHORIZED') {
       return (
         <View style={styles.authorizationDeniedContainer}>
           <Text style={styles.authorizationDeniedText}>
             {'don’t have permission :('}
           </Text>
         </View>
       );
     }
 
     let switchCameraButton = null;
     if (this.state.hasCamerasOnBothSides) {
       switchCameraButton = (
         <TouchableOpacity
           onPress={this.switchCamera}
           onLayout={this.onSwitchCameraButtonLayout}
           style={styles.switchCameraButton}
           ref={this.switchCameraButtonRef}
         >
           <Icon name="ios-camera-reverse" style={styles.switchCameraIcon} />
         </TouchableOpacity>
       );
     }
 
     let flashIcon;
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       flashIcon = <Icon name="ios-flash" style={styles.flashIcon} />;
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       flashIcon = <Icon name="ios-flash-off" style={styles.flashIcon} />;
     } else {
       flashIcon = (
         <>
           <Icon name="ios-flash" style={styles.flashIcon} />
           <Text style={styles.flashIconAutoText}>A</Text>
         </>
       );
     }
 
     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}
                 ref={this.flashButtonRef}
               >
                 {flashIcon}
               </TouchableOpacity>
               <View style={styles.bottomButtonsContainer}>
                 <TouchableOpacity
                   onPress={this.takePhoto}
                   onLayout={this.onPhotoButtonLayout}
                   style={styles.saveButton}
                   ref={this.photoButtonRef}
                 >
                   <View style={styles.saveButtonInner} />
                 </TouchableOpacity>
                 {switchCameraButton}
               </View>
             </Reanimated.View>
           </TapGestureHandler>
         </Reanimated.View>
       </PinchGestureHandler>
     );
   }
 
   render(): React.Node {
     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 = () => {
     const { overlayContext, navigation } = this.props;
     if (overlayContext && navigation.goBackOnce) {
       navigation.goBackOnce();
     } else {
       navigation.goBack();
     }
   };
 
   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();
 
     this.props.handlePhotoCapture(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',
     bottom: 20,
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
   },
   closeButton: {
     left: 16,
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
     top: 6,
   },
   closeIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   container: {
     backgroundColor: 'black',
     flex: 1,
   },
   fill: {
     flex: 1,
   },
   flashButton: {
-    marginTop: Platform.select({ android: 15, default: 13 }),
+    marginTop: (Platform.select({ android: 15, default: 13 }): number),
     paddingHorizontal: 10,
     paddingVertical: 3,
     position: 'absolute',
     right: 15,
     top: 3,
   },
   flashIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   flashIconAutoText: {
     color: 'white',
     fontSize: 10,
     fontWeight: 'bold',
     position: 'absolute',
     right: 5,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
     top: 0,
   },
   focusIndicator: {
     borderColor: 'white',
     borderRadius: 24,
     borderWidth: 1,
     height: 24,
     left: -12,
     position: 'absolute',
     top: -12,
     width: 24,
   },
   overlay: {
     backgroundColor: 'white',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   retakeButton: {
     left: 20,
-    marginTop: Platform.select({ android: 15, default: 15 }),
+    marginTop: (Platform.select({ android: 15, default: 15 }): number),
     paddingBottom: 3,
     paddingHorizontal: 10,
     position: 'absolute',
     top: 6,
   },
   retakeIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   saveButton: {
     alignItems: 'center',
     borderColor: 'white',
     borderRadius: 75,
     borderWidth: 4,
     height: 75,
     justifyContent: 'center',
     width: 75,
   },
   saveButtonInner: {
     backgroundColor: '#FFFFFF88',
     borderRadius: 60,
     height: 60,
     width: 60,
   },
   sendButtonContainer: {
     bottom: 22,
     position: 'absolute',
     right: 32,
   },
   stagingImage: {
     backgroundColor: 'black',
     flex: 1,
     resizeMode: 'contain',
   },
   stagingViewOverlay: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   switchCameraButton: {
     justifyContent: 'center',
     paddingHorizontal: 8,
     paddingVertical: 2,
     position: 'absolute',
     right: 18,
   },
   switchCameraIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
 });
 
 const ConnectedCameraModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedCameraModal(props: BaseProps) {
     const dimensions = useSelector(state => state.dimensions);
     const deviceCameraInfo = useSelector(state => state.deviceCameraInfo);
     const deviceOrientation = useSelector(state => state.deviceOrientation);
     const foreground = useIsAppForegrounded();
     const overlayContext = React.useContext(OverlayContext);
     const dispatch = useDispatch();
 
     return (
       <CameraModal
         {...props}
         dimensions={dimensions}
         deviceCameraInfo={deviceCameraInfo}
         deviceOrientation={deviceOrientation}
         foreground={foreground}
         dispatch={dispatch}
         overlayContext={overlayContext}
       />
     );
   });
 
 export default ConnectedCameraModal;
diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index cff4e4f73..4f14f2f44 100644
--- a/native/media/media-gallery-keyboard.react.js
+++ b/native/media/media-gallery-keyboard.react.js
@@ -1,685 +1,685 @@
 // @flow
 
 import * as ImagePicker from 'expo-image-picker';
 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,
   filenameFromPathOrURI,
 } from 'lib/media/file-utils.js';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js';
 import type { MediaLibrarySelection } from 'lib/types/media-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { getCompatibleMediaURI } from './identifier-utils.js';
 import MediaGalleryMedia from './media-gallery-media.react.js';
 import SendMediaButton from './send-media-button.react.js';
 import Button from '../components/button.react.js';
 import type { DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { store } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type {
   LayoutEvent,
   ViewableItemsChange,
 } from '../types/react-native.js';
 import type { ViewStyle } from '../types/styles.js';
 
 const animationSpec = {
   duration: 400,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
   },
   galleryHeader: {
     height: 56,
     borderTopWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
   },
   galleryHeaderTitle: {
     color: 'modalForegroundLabel',
     fontSize: 14,
     fontWeight: '500',
   },
   nativePickerButton: {
     backgroundColor: 'rgba(255, 255, 255, 0.08)',
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 7,
   },
   nativePickerButtonLabel: {
     color: 'modalButtonLabel',
     fontSize: 12,
     fontWeight: '500',
   },
   galleryContainer: {
     flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
   },
   error: {
     color: 'listBackgroundLabel',
     flex: 1,
     fontSize: 28,
     textAlign: 'center',
   },
   loadingIndicator: {
     flex: 1,
   },
   sendButtonContainer: {
     bottom: 20,
     position: 'absolute',
     right: 30,
   },
   separator: {
     width: 2,
   },
 };
 
 type BaseProps = {
   +threadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +foreground: boolean,
   +colors: Colors,
   +styles: $ReadOnly<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: Animated.Value = 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): Partial<State> {
     // We keep this in state since we pass this.state as
     // FlatList's extraData prop
     return { dimensions: props.dimensions };
   }
 
   componentDidMount() {
     this.mounted = true;
     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: Partial<State>) {
     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;
   }
 
   openNativePicker = async () => {
     try {
       const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.All,
         allowsEditing: false,
         allowsMultipleSelection: true,
         // maximum quality is 1 - it disables compression
         quality: 1,
         // we don't want to compress videos at this point
         videoExportPreset: ImagePicker.VideoExportPreset.Passthrough,
       });
 
       if (canceled || assets.length === 0) {
         return;
       }
 
       const selections = assets.map(asset => {
         const {
           width,
           height,
           fileName,
           type,
           duration,
           assetId: mediaNativeID,
         } = asset;
         const isVideo = type === 'video';
         const filename = fileName || filenameFromPathOrURI(asset.uri) || '';
         const uri = getCompatibleMediaURI(
           asset.uri,
           extensionFromFilename(filename),
         );
 
         if (isVideo) {
           return {
             step: 'video_library',
             dimensions: { height, width },
             uri,
             filename,
             mediaNativeID,
             duration,
             selectTime: 0,
             sendTime: 0,
             retries: 0,
           };
         } else {
           return {
             step: 'photo_library',
             dimensions: { height, width },
             uri,
             filename,
             mediaNativeID,
             selectTime: 0,
             sendTime: 0,
             retries: 0,
           };
         }
       });
 
       this.sendMedia(selections);
     } catch (e) {
       if (__DEV__) {
         console.warn(e);
       }
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
   };
 
   async getPermissions(): Promise<boolean> {
     const { granted } = await MediaLibrary.requestPermissionsAsync();
     if (!granted) {
       this.guardedSetState({ error: "don't have permission :(" });
     }
     return granted;
   }
 
   get queueModeActive(): boolean {
     return !!this.state.queuedMediaURIs;
   }
 
   renderItem = (row: { +item: MediaLibrarySelection, ... }): React.Node => {
     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 = (): React.Node => {
     return <View style={this.props.styles.separator} />;
   };
 
   static keyExtractor = (item: MediaLibrarySelection): string => {
     return item.uri;
   };
 
   GalleryHeader = (): React.Node => (
     <View style={this.props.styles.galleryHeader}>
       <Text style={this.props.styles.galleryHeaderTitle}>Photos</Text>
       <Button
         onPress={this.openNativePicker}
         style={this.props.styles.nativePickerButton}
       >
         <Text style={this.props.styles.nativePickerButtonLabel}>
           Browse all Photos
         </Text>
       </Button>
     </View>
   );
 
   render(): React.Node {
     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({
+    const bottomInset: number = Platform.select({
       ios: -1 * this.props.dimensions.bottomInset,
       default: 0,
     });
     const containerStyle = { bottom: bottomInset };
     return (
       <View style={[this.props.styles.container, containerStyle]}>
         <this.GalleryHeader />
         <View
           style={this.props.styles.galleryContainer}
           onLayout={this.onContainerLayout}
         >
           {content}
           <SendMediaButton
             onPress={this.sendQueuedMedia}
             queueCount={queueCount}
             pointerEvents={queuedMediaURIs ? 'auto' : 'none'}
             containerStyle={[
               this.props.styles.sendButtonContainer,
               bottomOffsetStyle,
             ]}
             style={this.sendButtonStyle}
           />
         </View>
       </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, {
       selections: selectionsWithTime,
       threadInfo: this.props.threadInfo,
     });
   }
 }
 
 const mediaGalleryKeyboardName = 'MediaGalleryKeyboard';
 
 function ConnectedMediaGalleryKeyboard(props: BaseProps) {
   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}
       {...props}
     />
   );
 }
 
 function ReduxMediaGalleryKeyboard(props: BaseProps) {
   return (
     <Provider store={store}>
       <ConnectedMediaGalleryKeyboard {...props} />
     </Provider>
   );
 }
 
 KeyboardRegistry.registerKeyboard(
   mediaGalleryKeyboardName,
   () => ReduxMediaGalleryKeyboard,
 );
 
 export { mediaGalleryKeyboardName };
diff --git a/native/media/save-media.js b/native/media/save-media.js
index 40041cdb3..0878efca4 100644
--- a/native/media/save-media.js
+++ b/native/media/save-media.js
@@ -1,477 +1,477 @@
 // @flow
 
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
 import filesystem from 'react-native-fs';
 
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { readableFilename, pathFromURI } from 'lib/media/file-utils.js';
 import { isLocalUploadID } from 'lib/media/media-utils.js';
 import type {
   MediaMissionStep,
   MediaMissionResult,
   MediaMissionFailure,
 } from 'lib/types/media-types.js';
 import {
   reportTypes,
   type ClientMediaMissionReportCreationRequest,
 } from 'lib/types/report-types.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 
 import { fetchBlob } from './blob-utils.js';
 import {
   fetchAssetInfo,
   fetchFileInfo,
   disposeTempFile,
   mkdir,
   androidScanFile,
   fetchFileHash,
   copyFile,
   temporaryDirectoryPath,
   type FetchFileInfoResult,
 } from './file-utils.js';
 import { getMediaLibraryIdentifier } from './identifier-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { requestAndroidPermission } from '../utils/android-permissions.js';
 
 export type IntentionalSaveMedia = (
   uri: string,
   ids: {
     uploadID: string,
     messageServerID: ?string,
     messageLocalID: ?string,
   },
 ) => Promise<void>;
 
 function useIntentionalSaveMedia(): IntentionalSaveMedia {
   const dispatch = useDispatch();
   const mediaReportsEnabled = useIsReportEnabled('mediaReports');
   return React.useCallback(
     async (
       uri: string,
       ids: {
         uploadID: string,
         messageServerID: ?string,
         messageLocalID: ?string,
       },
     ) => {
       const start = Date.now();
       const steps: Array<MediaMissionStep> = [
         { step: 'save_media', uri, time: start },
       ];
 
       const { resultPromise, reportPromise } = saveMedia(uri, 'request');
       const result = await resultPromise;
       const userTime = Date.now() - start;
 
       let message;
       if (result.success) {
         message = 'saved!';
       } else if (result.reason === 'save_unsupported') {
-        const os = Platform.select({
+        const os: string = Platform.select({
           ios: 'iOS',
           android: 'Android',
           default: Platform.OS,
         });
         message = `saving media is unsupported on ${os}`;
       } else if (result.reason === 'missing_permission') {
         message = 'don’t have permission :(';
       } else if (
         result.reason === 'resolve_failed' ||
         result.reason === 'data_uri_failed'
       ) {
         message = 'failed to resolve :(';
       } else if (result.reason === 'fetch_failed') {
         message = 'failed to download :(';
       } else {
         message = 'failed to save :(';
       }
       displayActionResultModal(message);
 
       if (!mediaReportsEnabled) {
         return;
       }
       const reportSteps = await reportPromise;
       steps.push(...reportSteps);
       const totalTime = Date.now() - start;
       const mediaMission = { steps, result, userTime, totalTime };
 
       const { uploadID, messageServerID, messageLocalID } = ids;
       const uploadIDIsLocal = isLocalUploadID(uploadID);
       const report: ClientMediaMissionReportCreationRequest = {
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID: uploadIDIsLocal ? undefined : uploadID,
         uploadLocalID: uploadIDIsLocal ? uploadID : undefined,
         messageServerID,
         messageLocalID,
         id: generateReportID(),
       };
       dispatch({
         type: queueReportsActionType,
         payload: { reports: [report] },
       });
     },
     [dispatch, mediaReportsEnabled],
   );
 }
 
 type Permissions = 'check' | 'request';
 
 function saveMedia(
   uri: string,
   permissions?: Permissions = 'check',
 ): {
   resultPromise: Promise<MediaMissionResult>,
   reportPromise: Promise<$ReadOnlyArray<MediaMissionStep>>,
 } {
   let resolveResult;
   const sendResult = (result: MediaMissionResult) => {
     if (resolveResult) {
       resolveResult(result);
     }
   };
 
   const reportPromise = innerSaveMedia(uri, permissions, sendResult);
   const resultPromise = new Promise<MediaMissionResult>(resolve => {
     resolveResult = resolve;
   });
 
   return { reportPromise, resultPromise };
 }
 
 async function innerSaveMedia(
   uri: string,
   permissions: Permissions,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   if (Platform.OS === 'android') {
     return await saveMediaAndroid(uri, permissions, sendResult);
   } else if (Platform.OS === 'ios') {
     return await saveMediaIOS(uri, sendResult);
   } else {
     sendResult({ success: false, reason: 'save_unsupported' });
     return [];
   }
 }
 
 const androidSavePermission =
   PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
 
 // On Android, we save the media to our own Comm folder in the
 // Pictures directory, and then trigger the media scanner to pick it up
 async function saveMediaAndroid(
   inputURI: string,
   permissions: Permissions,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   const steps: Array<MediaMissionStep> = [];
 
   let hasPermission = false,
     permissionCheckExceptionMessage;
   const permissionCheckStart = Date.now();
   try {
     hasPermission = await requestAndroidPermission(
       androidSavePermission,
       'throw',
     );
   } catch (e) {
     permissionCheckExceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'permissions_check',
     success: hasPermission,
     exceptionMessage: permissionCheckExceptionMessage,
     time: Date.now() - permissionCheckStart,
     platform: Platform.OS,
     permissions: [androidSavePermission],
   });
   if (!hasPermission) {
     sendResult({ success: false, reason: 'missing_permission' });
     return steps;
   }
 
   const promises = [];
   let success = true;
   const saveFolder = `${filesystem.PicturesDirectoryPath}/Comm/`;
   promises.push(
     (async () => {
       const makeDirectoryStep = await mkdir(saveFolder);
       if (!makeDirectoryStep.success) {
         success = false;
         sendResult({ success, reason: 'make_directory_failed' });
       }
       steps.push(makeDirectoryStep);
     })(),
   );
 
   let uri = inputURI;
   let tempFile, mime;
   if (uri.startsWith('http')) {
     promises.push(
       (async () => {
         const { result: tempSaveResult, steps: tempSaveSteps } =
           await saveRemoteMediaToDisk(uri, temporaryDirectoryPath);
         steps.push(...tempSaveSteps);
         if (!tempSaveResult.success) {
           success = false;
           sendResult(tempSaveResult);
         } else {
           tempFile = tempSaveResult.path;
           uri = `file://${tempFile}`;
           mime = tempSaveResult.mime;
         }
       })(),
     );
   }
 
   await Promise.all(promises);
   if (!success) {
     return steps;
   }
 
   const { result: copyResult, steps: copySteps } = await copyToSortedDirectory(
     uri,
     saveFolder,
     mime,
   );
   steps.push(...copySteps);
   if (!copyResult.success) {
     sendResult(copyResult);
     return steps;
   }
   sendResult({ success: true });
 
   const postResultPromises = [];
 
   postResultPromises.push(
     (async () => {
       const scanFileStep = await androidScanFile(copyResult.path);
       steps.push(scanFileStep);
     })(),
   );
 
   if (tempFile) {
     postResultPromises.push(
       (async (file: string) => {
         const disposeStep = await disposeTempFile(file);
         steps.push(disposeStep);
       })(tempFile),
     );
   }
 
   await Promise.all(postResultPromises);
   return steps;
 }
 
 // On iOS, we save the media to the camera roll
 async function saveMediaIOS(
   inputURI: string,
   sendResult: (result: MediaMissionResult) => void,
 ): Promise<$ReadOnlyArray<MediaMissionStep>> {
   const steps: Array<MediaMissionStep> = [];
 
   let uri = inputURI;
   let tempFile;
   if (uri.startsWith('http')) {
     const { result: tempSaveResult, steps: tempSaveSteps } =
       await saveRemoteMediaToDisk(uri, temporaryDirectoryPath);
     steps.push(...tempSaveSteps);
     if (!tempSaveResult.success) {
       sendResult(tempSaveResult);
       return steps;
     }
     tempFile = tempSaveResult.path;
     uri = `file://${tempFile}`;
   } else if (!uri.startsWith('file://')) {
     const mediaNativeID = getMediaLibraryIdentifier(uri);
     if (mediaNativeID) {
       const { result: fetchAssetInfoResult, steps: fetchAssetInfoSteps } =
         await fetchAssetInfo(mediaNativeID);
       steps.push(...fetchAssetInfoSteps);
       const { localURI } = fetchAssetInfoResult;
       if (localURI) {
         uri = localURI;
       }
     }
   }
 
   if (!uri.startsWith('file://')) {
     sendResult({ success: false, reason: 'resolve_failed', uri });
     return steps;
   }
 
   let success = false,
     exceptionMessage;
   const start = Date.now();
   try {
     await MediaLibrary.saveToLibraryAsync(uri);
     success = true;
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'ios_save_to_library',
     success,
     exceptionMessage,
     time: Date.now() - start,
     uri,
   });
 
   if (success) {
     sendResult({ success: true });
   } else {
     sendResult({ success: false, reason: 'save_to_library_failed', uri });
   }
 
   if (tempFile) {
     const disposeStep = await disposeTempFile(tempFile);
     steps.push(disposeStep);
   }
   return steps;
 }
 
 type IntermediateSaveResult = {
   result: { success: true, path: string, mime: string } | MediaMissionFailure,
   steps: $ReadOnlyArray<MediaMissionStep>,
 };
 
 async function saveRemoteMediaToDisk(
   inputURI: string,
   directory: string, // should end with a /
 ): Promise<IntermediateSaveResult> {
   const steps: Array<MediaMissionStep> = [];
 
   const { result: fetchBlobResult, steps: fetchBlobSteps } = await fetchBlob(
     inputURI,
   );
   steps.push(...fetchBlobSteps);
   if (!fetchBlobResult.success) {
     return { result: fetchBlobResult, steps };
   }
   const { mime, base64 } = fetchBlobResult;
 
   const tempName = readableFilename('', mime);
   if (!tempName) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
   const tempPath = `${directory}tempsave.${tempName}`;
 
   const start = Date.now();
   let success = false,
     exceptionMessage;
   try {
     await filesystem.writeFile(tempPath, base64, 'base64');
     success = true;
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'write_file',
     success,
     exceptionMessage,
     time: Date.now() - start,
     path: tempPath,
     length: base64.length,
   });
 
   if (!success) {
     return { result: { success: false, reason: 'write_file_failed' }, steps };
   }
   return { result: { success: true, path: tempPath, mime }, steps };
 }
 
 async function copyToSortedDirectory(
   localURI: string,
   directory: string, // should end with a /
   inputMIME: ?string,
 ): Promise<IntermediateSaveResult> {
   const steps: Array<MediaMissionStep> = [];
 
   const path = pathFromURI(localURI);
   if (!path) {
     return {
       result: { success: false, reason: 'resolve_failed', uri: localURI },
       steps,
     };
   }
   let mime = inputMIME;
 
   const hashStepPromise = fetchFileHash(path);
   const fileInfoPromise: Promise<?{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result: MediaMissionFailure | FetchFileInfoResult,
   }> = (async () => {
     if (mime) {
       return undefined;
     }
     return await fetchFileInfo(localURI, undefined, {
       mime: true,
     });
   })();
   const [hashStep, fileInfoResult] = await Promise.all([
     hashStepPromise,
     fileInfoPromise,
   ]);
 
   steps.push(hashStep);
   if (!hashStep.success) {
     return {
       result: { success: false, reason: 'fetch_file_hash_failed' },
       steps,
     };
   }
   const { hash } = hashStep;
   invariant(hash, 'hash should be truthy if hashStep.success is truthy');
 
   if (fileInfoResult) {
     steps.push(...fileInfoResult.steps);
     if (fileInfoResult.result.success && fileInfoResult.result.mime) {
       ({ mime } = fileInfoResult.result);
     }
   }
   if (!mime) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
 
   const name = readableFilename(hash, mime);
   if (!name) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
   const newPath = `${directory}${name}`;
 
   const copyStep = await copyFile(path, newPath);
   steps.push(copyStep);
   if (!copyStep.success) {
     return {
       result: { success: false, reason: 'copy_file_failed' },
       steps,
     };
   }
 
   return {
     result: { success: true, path: newPath, mime },
     steps,
   };
 }
 
 export { useIntentionalSaveMedia, saveMedia };
diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
index daf1e17d4..18e52b785 100644
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -1,239 +1,239 @@
 // @flow
 
 import { useDrawerStatus } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { FlatList, Platform, View, Text, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import {
   fetchPrimaryInviteLinkActionTypes,
   useFetchPrimaryInviteLinks,
 } from 'lib/actions/link-actions.js';
 import {
   childThreadInfos,
   communityThreadSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import {
   createRecursiveDrawerItemsData,
   appendSuffix,
 } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
 
 import CommunityDrawerItem from './community-drawer-item.react.js';
 import { CommunityCreationRouteName } from './route-names.js';
 import { useNavigateToThread } from '../chat/message-list-types.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useStyles } from '../themes/colors.js';
 import {
   flattenDrawerItemsData,
   filterOutThreadAndDescendantIDs,
   type CommunityDrawerItemDataFlattened,
 } from '../utils/drawer-utils.react.js';
 
 const maxDepth = 2;
-const safeAreaEdges = Platform.select({
+const safeAreaEdges: $ReadOnlyArray<string> = Platform.select({
   ios: ['top'],
   default: ['top', 'bottom'],
 });
 
 function CommunityDrawerContent(): React.Node {
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
   const communitiesSuffixed = React.useMemo(
     () => appendSuffix(resolvedCommunities),
     [resolvedCommunities],
   );
   const styles = useStyles(unboundStyles);
 
   const callFetchPrimaryLinks = useFetchPrimaryInviteLinks();
   const dispatchActionPromise = useDispatchActionPromise();
   const drawerStatus = useDrawerStatus();
   React.useEffect(() => {
     (async () => {
       if (drawerStatus !== 'open') {
         return;
       }
       await dispatchActionPromise(
         fetchPrimaryInviteLinkActionTypes,
         callFetchPrimaryLinks(),
       );
     })();
   }, [callFetchPrimaryLinks, dispatchActionPromise, drawerStatus]);
 
   const [expanded, setExpanded] = React.useState<Set<string>>(() => {
     if (communitiesSuffixed.length === 1) {
       return new Set([communitiesSuffixed[0].id]);
     }
     return new Set();
   });
 
   const setOpenCommunityOrClose = React.useCallback(
     (id: string) =>
       expanded.has(id) ? setExpanded(new Set()) : setExpanded(new Set([id])),
     [expanded],
   );
 
   const labelStylesObj = useStyles(labelUnboundStyles);
   const labelStyles = React.useMemo(
     () => [
       labelStylesObj.level0Label,
       labelStylesObj.level1Label,
       labelStylesObj.level2Label,
     ],
     [labelStylesObj],
   );
   const childThreadInfosMap = useSelector(childThreadInfos);
 
   const drawerItemsData = React.useMemo(
     () =>
       createRecursiveDrawerItemsData(
         childThreadInfosMap,
         communitiesSuffixed,
         labelStyles,
         maxDepth,
       ),
     [childThreadInfosMap, communitiesSuffixed, labelStyles],
   );
 
   const toggleExpanded = React.useCallback(
     (id: string) =>
       setExpanded(expandedState => {
         if (expanded.has(id)) {
           return new Set(
             filterOutThreadAndDescendantIDs(
               [...expandedState.values()],
               drawerItemsData,
               id,
             ),
           );
         }
         return new Set([...expanded.values(), id]);
       }),
     [drawerItemsData, expanded],
   );
 
   const navigateToThread = useNavigateToThread();
 
   const renderItem = React.useCallback(
     ({
       item,
     }: {
       +item: CommunityDrawerItemDataFlattened,
       ...
     }): React.Node => {
       const isCommunity = threadTypeIsCommunityRoot(item.threadInfo.type);
       return (
         <CommunityDrawerItem
           key={item.threadInfo.id}
           itemData={item}
           navigateToThread={navigateToThread}
           isExpanded={expanded.has(item.threadInfo.id)}
           toggleExpanded={
             isCommunity ? setOpenCommunityOrClose : toggleExpanded
           }
         />
       );
     },
     [expanded, navigateToThread, setOpenCommunityOrClose, toggleExpanded],
   );
 
   const { navigate } = useNavigation();
   const onPressCommunityCreation = React.useCallback(() => {
     navigate(CommunityCreationRouteName);
   }, [navigate]);
 
   const communityCreationButton = (
     <TouchableOpacity onPress={onPressCommunityCreation} activeOpacity={0.4}>
       <View style={styles.communityCreationContainer}>
         <View style={styles.communityCreationIconContainer}>
           <SWMansionIcon
             name="plus"
             size={22}
             style={styles.communityCreationIcon}
           />
         </View>
         <Text style={styles.communityCreationText}>Create community</Text>
       </View>
     </TouchableOpacity>
   );
 
   const flattenedDrawerItemsData = React.useMemo(
     () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]),
     [drawerItemsData, expanded],
   );
 
   return (
     <SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
       <FlatList
         data={flattenedDrawerItemsData}
         renderItem={renderItem}
         initialNumToRender={30}
       />
       {communityCreationButton}
     </SafeAreaView>
   );
 }
 
 const unboundStyles = {
   drawerContent: {
     flex: 1,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
   },
   communityCreationContainer: {
     flexDirection: 'row',
     padding: 24,
     alignItems: 'center',
     borderTopWidth: 1,
     borderColor: 'panelSeparator',
   },
   communityCreationText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   communityCreationIconContainer: {
     height: 28,
     width: 28,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 16,
     marginRight: 12,
     backgroundColor: 'panelSecondaryForeground',
   },
   communityCreationIcon: {
     color: 'panelForegroundLabel',
   },
 };
 const labelUnboundStyles = {
   level0Label: {
     color: 'drawerItemLabelLevel0',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   level1Label: {
     color: 'drawerItemLabelLevel1',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '500',
   },
   level2Label: {
     color: 'drawerItemLabelLevel2',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '400',
   },
 };
 
 const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
   CommunityDrawerContent,
 );
 
 export default MemoizedCommunityDrawerContent;
diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js
index 42f7c8c21..183050742 100644
--- a/native/navigation/disconnected-bar.react.js
+++ b/native/navigation/disconnected-bar.react.js
@@ -1,103 +1,103 @@
 // @flow
 
 import * as React from 'react';
 import { Text, Platform, Animated, Easing } from 'react-native';
 
 import {
   useDisconnectedBar,
   useShouldShowDisconnectedBar,
 } from 'lib/hooks/disconnected-bar.js';
 
 import { useStyles } from '../themes/colors.js';
 
-const expandedHeight = Platform.select({
+const expandedHeight: number = Platform.select({
   android: 29.5,
   default: 27,
 });
 const timingConfig = {
   useNativeDriver: false,
   duration: 200,
   easing: Easing.inOut(Easing.ease),
 };
 
 type Props = {
   +visible: boolean,
 };
 function DisconnectedBar(props: Props): React.Node {
   const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar();
   const showingRef = React.useRef<?Animated.Value>();
   if (!showingRef.current) {
     showingRef.current = new Animated.Value(shouldShowDisconnectedBar ? 1 : 0);
   }
   const showing = showingRef.current;
 
   const { visible } = props;
   const changeShowing = React.useCallback(
     (toState: boolean) => {
       const toValue = toState ? 1 : 0;
       if (!visible) {
         showing.setValue(toValue);
         return;
       }
       Animated.timing(showing, {
         ...timingConfig,
         toValue,
       }).start();
     },
     [visible, showing],
   );
 
   const barCause = useDisconnectedBar(changeShowing);
 
   const heightStyle = React.useMemo(
     () => ({
       height: showing.interpolate({
         inputRange: [0, 1],
         outputRange: ([0, expandedHeight]: number[]), // Flow...
       }),
     }),
     [showing],
   );
 
   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;
diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
index f5c428c5f..e10db95e9 100644
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -1,315 +1,316 @@
 // @flow
 
 import type {
   StackNavigationState,
   StackOptions,
   StackNavigationEventMap,
   StackNavigatorProps,
   ExtraStackNavigatorProps,
   ParamListBase,
   StackNavigationHelpers,
   StackNavigationProp,
   StackRouterOptions,
   RouteProp,
   StackCardInterpolationProps,
+  TransitionPreset,
 } from '@react-navigation/core';
 import {
   createNavigatorFactory,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import { StackView, TransitionPresets } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { enableScreens } from 'react-native-screens';
 
 import AppNavigator from './app-navigator.react.js';
 import InviteLinkModal from './invite-link-modal.react.js';
 import { defaultStackScreenOptions } from './options.js';
 import { RootNavigatorContext } from './root-navigator-context.js';
 import RootRouter, {
   type RootRouterExtraNavigationHelpers,
   type RootRouterNavigationAction,
 } from './root-router.js';
 import {
   LoggedOutModalRouteName,
   AppRouteName,
   ThreadPickerModalRouteName,
   ImagePasteModalRouteName,
   AddUsersModalRouteName,
   CustomServerModalRouteName,
   ColorSelectorModalRouteName,
   ComposeSubchannelModalRouteName,
   SidebarListModalRouteName,
   SubchannelsListModalRouteName,
   MessageReactionsModalRouteName,
   type ScreenParamList,
   type RootParamList,
   TermsAndPrivacyRouteName,
   RegistrationRouteName,
   InviteLinkModalRouteName,
   InviteLinkNavigatorRouteName,
   CommunityCreationRouteName,
   RolesNavigatorRouteName,
   QRCodeSignInNavigatorRouteName,
   UserProfileBottomSheetNavigatorRouteName,
   KeyserverSelectionBottomSheetRouteName,
 } from './route-names.js';
 import LoggedOutModal from '../account/logged-out-modal.react.js';
 import RegistrationNavigator from '../account/registration/registration-navigator.react.js';
 import TermsAndPrivacyModal from '../account/terms-and-privacy-modal.react.js';
 import ThreadPickerModal from '../calendar/thread-picker-modal.react.js';
 import ImagePasteModal from '../chat/image-paste-modal.react.js';
 import MessageReactionsModal from '../chat/message-reactions-modal.react.js';
 import AddUsersModal from '../chat/settings/add-users-modal.react.js';
 import ColorSelectorModal from '../chat/settings/color-selector-modal.react.js';
 import ComposeSubchannelModal from '../chat/settings/compose-subchannel-modal.react.js';
 import SidebarListModal from '../chat/sidebar-list-modal.react.js';
 import SubchannelsListModal from '../chat/subchannels-list-modal.react.js';
 import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js';
 import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
 import CustomServerModal from '../profile/custom-server-modal.react.js';
 import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js';
 import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js';
 import RolesNavigator from '../roles/roles-navigator.react.js';
 import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
 
 enableScreens();
 
 export type RootNavigationHelpers<ParamList: ParamListBase = ParamListBase> = {
   ...$Exact<StackNavigationHelpers<ParamList>>,
   ...RootRouterExtraNavigationHelpers,
   ...
 };
 
 type RootNavigatorProps = StackNavigatorProps<RootNavigationHelpers<>>;
 function RootNavigator({
   initialRouteName,
   children,
   screenOptions,
   defaultScreenOptions,
   screenListeners,
   id,
   ...rest
 }: RootNavigatorProps) {
   const [keyboardHandlingEnabled, setKeyboardHandlingEnabled] =
     React.useState(true);
   const mergedScreenOptions = React.useMemo(() => {
     if (typeof screenOptions === 'function') {
       return (input: {
         +route: RouteProp<>,
         +navigation: RootNavigationHelpers<>,
       }) => ({
         ...screenOptions(input),
         keyboardHandlingEnabled,
       });
     }
     return {
       ...screenOptions,
       keyboardHandlingEnabled,
     };
   }, [screenOptions, keyboardHandlingEnabled]);
 
   const { state, descriptors, navigation } = useNavigationBuilder<
     StackNavigationState,
     RootRouterNavigationAction,
     StackOptions,
     StackRouterOptions,
     RootNavigationHelpers<>,
     StackNavigationEventMap,
     ExtraStackNavigatorProps,
   >(RootRouter, {
     id,
     initialRouteName,
     children,
     screenOptions: mergedScreenOptions,
     defaultScreenOptions,
     screenListeners,
   });
 
   const rootNavigationContext = React.useMemo(
     () => ({ setKeyboardHandlingEnabled }),
     [setKeyboardHandlingEnabled],
   );
 
   return (
     <RootNavigatorContext.Provider value={rootNavigationContext}>
       <StackView
         {...rest}
         state={state}
         descriptors={descriptors}
         navigation={navigation}
         detachInactiveScreens={Platform.OS !== 'ios'}
       />
     </RootNavigatorContext.Provider>
   );
 }
 const createRootNavigator = createNavigatorFactory<
   StackNavigationState,
   StackOptions,
   StackNavigationEventMap,
   RootNavigationHelpers<>,
   ExtraStackNavigatorProps,
 >(RootNavigator);
 
-const baseTransitionPreset = Platform.select({
+const baseTransitionPreset: TransitionPreset = Platform.select({
   ios: TransitionPresets.ModalSlideFromBottomIOS,
   default: TransitionPresets.FadeFromBottomAndroid,
 });
 const transitionPreset = {
   ...baseTransitionPreset,
   cardStyleInterpolator: (interpolatorProps: StackCardInterpolationProps) => {
     const baseCardStyleInterpolator =
       baseTransitionPreset.cardStyleInterpolator(interpolatorProps);
     const overlayOpacity = interpolatorProps.current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: ([0, 0.7]: number[]), // Flow...
       extrapolate: 'clamp',
     });
     return {
       ...baseCardStyleInterpolator,
       overlayStyle: [
         baseCardStyleInterpolator.overlayStyle,
         { opacity: overlayOpacity },
       ],
     };
   },
 };
 
 const defaultScreenOptions = {
   ...defaultStackScreenOptions,
   ...transitionPreset,
   cardStyle: { backgroundColor: 'transparent' },
   presentation: 'modal',
   headerShown: false,
 };
 const disableGesturesScreenOptions = {
   gestureEnabled: false,
 };
 const modalOverlayScreenOptions = {
   cardOverlayEnabled: true,
   presentation: 'transparentModal',
 };
 const termsAndPrivacyModalScreenOptions = {
   gestureEnabled: false,
   cardOverlayEnabled: true,
   presentation: 'transparentModal',
 };
 
 export type RootRouterNavigationProp<
   ParamList: ParamListBase = ParamListBase,
   RouteName: $Keys<ParamList> = $Keys<ParamList>,
 > = {
   ...StackNavigationProp<ParamList, RouteName>,
   ...RootRouterExtraNavigationHelpers,
 };
 
 export type RootNavigationProp<
   RouteName: $Keys<ScreenParamList> = $Keys<ScreenParamList>,
 > = {
   ...StackNavigationProp<ScreenParamList, RouteName>,
   ...RootRouterExtraNavigationHelpers,
 };
 
 const Root = createRootNavigator<
   ScreenParamList,
   RootParamList,
   RootNavigationHelpers<ScreenParamList>,
 >();
 function RootComponent(): React.Node {
   return (
     <Root.Navigator screenOptions={defaultScreenOptions}>
       <Root.Screen
         name={LoggedOutModalRouteName}
         component={LoggedOutModal}
         options={disableGesturesScreenOptions}
       />
       <Root.Screen
         name={RegistrationRouteName}
         component={RegistrationNavigator}
         options={disableGesturesScreenOptions}
       />
       <Root.Screen
         name={QRCodeSignInNavigatorRouteName}
         component={QRCodeSignInNavigator}
         options={disableGesturesScreenOptions}
       />
       <Root.Screen
         name={CommunityCreationRouteName}
         component={CommunityCreationNavigator}
       />
       <Root.Screen name={AppRouteName} component={AppNavigator} />
       <Root.Screen
         name={TermsAndPrivacyRouteName}
         component={TermsAndPrivacyModal}
         options={termsAndPrivacyModalScreenOptions}
       />
       <Root.Screen
         name={InviteLinkModalRouteName}
         component={InviteLinkModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={InviteLinkNavigatorRouteName}
         component={InviteLinksNavigator}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={ThreadPickerModalRouteName}
         component={ThreadPickerModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={ImagePasteModalRouteName}
         component={ImagePasteModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={AddUsersModalRouteName}
         component={AddUsersModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={CustomServerModalRouteName}
         component={CustomServerModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={ColorSelectorModalRouteName}
         component={ColorSelectorModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={ComposeSubchannelModalRouteName}
         component={ComposeSubchannelModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={SidebarListModalRouteName}
         component={SidebarListModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={SubchannelsListModalRouteName}
         component={SubchannelsListModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={MessageReactionsModalRouteName}
         component={MessageReactionsModal}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen name={RolesNavigatorRouteName} component={RolesNavigator} />
       <Root.Screen
         name={UserProfileBottomSheetNavigatorRouteName}
         component={UserProfileBottomSheetNavigator}
         options={modalOverlayScreenOptions}
       />
       <Root.Screen
         name={KeyserverSelectionBottomSheetRouteName}
         component={KeyserverSelectionBottomSheet}
         options={modalOverlayScreenOptions}
       />
     </Root.Navigator>
   );
 }
 export default RootComponent;
diff --git a/native/push/in-app-notif.react.js b/native/push/in-app-notif.react.js
index 699902797..ad7eb519d 100644
--- a/native/push/in-app-notif.react.js
+++ b/native/push/in-app-notif.react.js
@@ -1,94 +1,98 @@
 // @flow
 
 import * as React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { GlobalTheme } from 'lib/types/theme-types.js';
 
 import SingleLine from '../components/single-line.react.js';
 
 const edges = ['top'];
 
 type Props = {
   +title: ?string,
   +message: string,
   +activeTheme: ?GlobalTheme,
 };
 function InAppNotif(props: Props): React.Node {
   const useLightStyle = Platform.OS === 'ios' && props.activeTheme !== 'dark';
 
   let title = null;
   const textStyle = [
     styles.text,
     useLightStyle ? styles.lightText : styles.darkText,
   ];
 
   if (props.title) {
     title = (
       <SingleLine style={[styles.title, ...textStyle]}>
         {props.title}
       </SingleLine>
     );
   }
 
   const notificationContent = (
     <View style={styles.notificationContent}>
       {title}
       <SingleLine style={textStyle}>{props.message}</SingleLine>
     </View>
   );
 
   if (Platform.OS === 'android') {
     return (
       <SafeAreaView style={styles.notif} edges={edges}>
         {notificationContent}
       </SafeAreaView>
     );
   }
 
   return <View style={styles.notif}>{notificationContent}</View>;
 }
 
 const styles = StyleSheet.create({
   darkText: {
     color: 'black',
   },
   lightText: {
     color: 'white',
   },
   notif: {
     alignItems: 'flex-start',
     alignSelf: 'flex-start',
     justifyContent: 'flex-start',
     width: '100%',
   },
   notificationContent: {
-    ...Platform.select({
+    ...(Platform.select({
       ios: {
         marginTop: 16,
         marginBottom: 6,
       },
       default: {
         marginVertical: 16,
       },
+    }): {
+      +marginTop?: number,
+      +marginBottom?: number,
+      +marginVertical?: number,
     }),
     marginHorizontal: 10,
   },
   text: {
-    ...Platform.select({
+    ...(Platform.select({
       ios: {
         fontSize: 16,
         color: 'black',
       },
       default: {
         fontSize: 18,
       },
-    }),
+    }): { +fontSize: number, +color?: string }),
   },
   title: {
     fontWeight: 'bold',
   },
 });
 
 export default InAppNotif;
diff --git a/native/utils/alert-messages.js b/native/utils/alert-messages.js
index 54df73a1e..655f42e96 100644
--- a/native/utils/alert-messages.js
+++ b/native/utils/alert-messages.js
@@ -1,20 +1,20 @@
 // @flow
 
 import { Platform } from 'react-native';
 
 type AlertDetails = {
   +title: string,
   +message: string,
 };
 
-const platformStore = Platform.select({
+const platformStore: string = Platform.select({
   ios: 'App Store',
   android: 'Play Store',
 });
 
 export const AppOutOfDateAlertDetails: AlertDetails = {
   title: 'App out of date',
   message:
     'Your app version is pretty old, and the server doesn’t know how ' +
     `to speak to it anymore. Please use the ${platformStore} to update!`,
 };