diff --git a/native/account/register-panel.react.js b/native/account/register-panel.react.js
index 560050b09..84cef9b35 100644
--- a/native/account/register-panel.react.js
+++ b/native/account/register-panel.react.js
@@ -1,512 +1,513 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   StyleSheet,
   Platform,
   Keyboard,
   Linking,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import {
   registerActionTypes,
   register,
   getOlmSessionInitializationDataActionTypes,
 } from 'lib/actions/user-actions.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { validUsernameRegex } from 'lib/shared/account-utils.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import type {
   RegisterInfo,
   LogInExtraInfo,
   RegisterResult,
   LogInStartingPayload,
 } from 'lib/types/account-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { TextInput } from './modal-components.react.js';
 import { setNativeCredentials } from './native-credentials.js';
 import { PanelButton, Panel } from './panel-components.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import { type StateContainer } from '../utils/state-container.js';
 
-export type RegisterState = {
-  +usernameInputText: string,
-  +passwordInputText: string,
-  +confirmPasswordInputText: string,
+type WritableRegisterState = {
+  usernameInputText: string,
+  passwordInputText: string,
+  confirmPasswordInputText: string,
 };
+export type RegisterState = $ReadOnly<WritableRegisterState>;
 type BaseProps = {
   +setActiveAlert: (activeAlert: boolean) => void,
   +opacityValue: Animated.Node,
   +registerState: StateContainer<RegisterState>,
 };
 type Props = {
   ...BaseProps,
   +loadingStatus: LoadingStatus,
   +logInExtraInfo: () => Promise<LogInExtraInfo>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +confirmPasswordFocused: boolean,
 };
 class RegisterPanel extends React.PureComponent<Props, State> {
   state: State = {
     confirmPasswordFocused: false,
   };
   usernameInput: ?TextInput;
   passwordInput: ?TextInput;
   confirmPasswordInput: ?TextInput;
   passwordBeingAutoFilled = false;
 
   render() {
     let confirmPasswordTextInputExtraProps;
     if (
       Platform.OS !== 'ios' ||
       this.state.confirmPasswordFocused ||
       this.props.registerState.state.confirmPasswordInputText.length > 0
     ) {
       confirmPasswordTextInputExtraProps = {
         secureTextEntry: true,
         textContentType: 'password',
       };
     }
 
     let onPasswordKeyPress;
     if (Platform.OS === 'ios') {
       onPasswordKeyPress = this.onPasswordKeyPress;
     }
 
     /* eslint-disable react-native/no-raw-text */
     const privatePolicyNotice = (
       <View style={styles.notice}>
         <Text style={styles.noticeText}>
           By signing up, you agree to our{' '}
           <Text style={styles.hyperlinkText} onPress={this.onTermsOfUsePressed}>
             Terms
           </Text>
           {' & '}
           <Text
             style={styles.hyperlinkText}
             onPress={this.onPrivacyPolicyPressed}
           >
             Privacy Policy
           </Text>
           .
         </Text>
       </View>
     );
     /* eslint-enable react-native/no-raw-text */
 
     return (
       <Panel opacityValue={this.props.opacityValue} style={styles.container}>
         <View style={styles.row}>
           <SWMansionIcon
             name="user-1"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.usernameInputText}
             onChangeText={this.onChangeUsernameInputText}
             placeholder="Username"
             autoFocus={true}
             autoCorrect={false}
             autoCapitalize="none"
             keyboardType="ascii-capable"
             textContentType="username"
             autoComplete="username-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.usernameInputRef}
           />
         </View>
         <View style={styles.row}>
           <SWMansionIcon
             name="lock-on"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.passwordInputText}
             onChangeText={this.onChangePasswordInputText}
             onKeyPress={onPasswordKeyPress}
             placeholder="Password"
             secureTextEntry={true}
             textContentType="password"
             autoComplete="password-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusConfirmPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.passwordInputRef}
           />
         </View>
         <View style={styles.row}>
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.confirmPasswordInputText}
             onChangeText={this.onChangeConfirmPasswordInputText}
             placeholder="Confirm password"
             autoComplete="password-new"
             returnKeyType="go"
             blurOnSubmit={false}
             onSubmitEditing={this.onSubmit}
             onFocus={this.onConfirmPasswordFocus}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.confirmPasswordInputRef}
             {...confirmPasswordTextInputExtraProps}
           />
         </View>
         <View style={styles.footer}>
           {privatePolicyNotice}
           <PanelButton
             text="SIGN UP"
             loadingStatus={this.props.loadingStatus}
             onSubmit={this.onSubmit}
           />
         </View>
       </Panel>
     );
   }
 
   usernameInputRef = (usernameInput: ?TextInput) => {
     this.usernameInput = usernameInput;
   };
 
   passwordInputRef = (passwordInput: ?TextInput) => {
     this.passwordInput = passwordInput;
   };
 
   confirmPasswordInputRef = (confirmPasswordInput: ?TextInput) => {
     this.confirmPasswordInput = confirmPasswordInput;
   };
 
   focusUsernameInput = () => {
     invariant(this.usernameInput, 'ref should be set');
     this.usernameInput.focus();
   };
 
   focusPasswordInput = () => {
     invariant(this.passwordInput, 'ref should be set');
     this.passwordInput.focus();
   };
 
   focusConfirmPasswordInput = () => {
     invariant(this.confirmPasswordInput, 'ref should be set');
     this.confirmPasswordInput.focus();
   };
 
   onTermsOfUsePressed = () => {
     Linking.openURL('https://comm.app/terms');
   };
 
   onPrivacyPolicyPressed = () => {
     Linking.openURL('https://comm.app/privacy');
   };
 
   onChangeUsernameInputText = (text: string) => {
     this.props.registerState.setState({ usernameInputText: text });
   };
 
   onChangePasswordInputText = (text: string) => {
-    const stateUpdate = {};
+    const stateUpdate: Partial<WritableRegisterState> = {};
     stateUpdate.passwordInputText = text;
     if (this.passwordBeingAutoFilled) {
       this.passwordBeingAutoFilled = false;
       stateUpdate.confirmPasswordInputText = text;
     }
     this.props.registerState.setState(stateUpdate);
   };
 
   onPasswordKeyPress = (event: KeyPressEvent) => {
     const { key } = event.nativeEvent;
     if (
       key.length > 1 &&
       key !== 'Backspace' &&
       key !== 'Enter' &&
       this.props.registerState.state.confirmPasswordInputText.length === 0
     ) {
       this.passwordBeingAutoFilled = true;
     }
   };
 
   onChangeConfirmPasswordInputText = (text: string) => {
     this.props.registerState.setState({ confirmPasswordInputText: text });
   };
 
   onConfirmPasswordFocus = () => {
     this.setState({ confirmPasswordFocused: true });
   };
 
   onSubmit = async () => {
     this.props.setActiveAlert(true);
     if (this.props.registerState.state.passwordInputText === '') {
       Alert.alert(
         'Empty password',
         'Password cannot be empty',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.passwordInputText !==
       this.props.registerState.state.confirmPasswordInputText
     ) {
       Alert.alert(
         'Passwords don’t match',
         'Password fields must contain the same password',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.usernameInputText.search(
         validUsernameRegex,
       ) === -1
     ) {
       Alert.alert(
         'Invalid username',
         'Usernames must be at least six characters long, start with either a ' +
           'letter or a number, and may contain only letters, numbers, or the ' +
           'characters “-” and “_”',
         [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
         { cancelable: false },
       );
     } else {
       Keyboard.dismiss();
       const extraInfo = await this.props.logInExtraInfo();
       const initialNotificationsEncryptedMessage =
         await this.props.getInitialNotificationsEncryptedMessage();
       this.props.dispatchActionPromise(
         registerActionTypes,
         this.registerAction({
           ...extraInfo,
           initialNotificationsEncryptedMessage,
         }),
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
     }
   };
 
   onPasswordAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.passwordInput, 'ref should exist');
         this.passwordInput.focus();
       },
     );
   };
 
   onUsernameAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   async registerAction(extraInfo: LogInExtraInfo) {
     try {
       const result = await this.props.register({
         ...extraInfo,
         username: this.props.registerState.state.usernameInputText,
         password: this.props.registerState.state.passwordInputText,
       });
       this.props.setActiveAlert(false);
       this.props.dispatch({
         type: setDataLoadedActionType,
         payload: {
           dataLoaded: true,
         },
       });
       await setNativeCredentials({
         username: result.currentUserInfo.username,
         password: this.props.registerState.state.passwordInputText,
       });
       return result;
     } catch (e) {
       if (e.message === 'username_reserved') {
         Alert.alert(
           'Username reserved',
           'This username is currently reserved. Please contact support@' +
             'comm.app if you would like to claim this account.',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'username_taken') {
         Alert.alert(
           'Username taken',
           'An account with that username already exists',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'client_version_unsupported') {
         Alert.alert(
           AppOutOfDateAlertDetails.title,
           AppOutOfDateAlertDetails.message,
           [{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   onUnknownErrorAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   onAppOutOfDateAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     zIndex: 2,
   },
   footer: {
     alignItems: 'stretch',
     flexDirection: 'row',
     flexShrink: 1,
     justifyContent: 'space-between',
     paddingLeft: 24,
   },
   hyperlinkText: {
     color: '#036AFF',
     fontWeight: 'bold',
   },
   icon: {
     bottom: 10,
     left: 4,
     position: 'absolute',
   },
   input: {
     paddingLeft: 35,
   },
   notice: {
     alignSelf: 'center',
     display: 'flex',
     flexShrink: 1,
     maxWidth: 190,
     paddingBottom: 18,
     paddingRight: 8,
     paddingTop: 12,
   },
   noticeText: {
     color: '#444',
     fontSize: 13,
     lineHeight: 20,
     textAlign: 'center',
   },
   row: {
     marginHorizontal: 24,
   },
 });
 
 const registerLoadingStatusSelector =
   createLoadingStatusSelector(registerActionTypes);
 const olmSessionInitializationDataLoadingStatusSelector =
   createLoadingStatusSelector(getOlmSessionInitializationDataActionTypes);
 
 const ConnectedRegisterPanel: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedRegisterPanel(props: BaseProps) {
     const registerLoadingStatus = useSelector(registerLoadingStatusSelector);
     const olmSessionInitializationDataLoadingStatus = useSelector(
       olmSessionInitializationDataLoadingStatusSelector,
     );
     const loadingStatus = combineLoadingStatuses(
       registerLoadingStatus,
       olmSessionInitializationDataLoadingStatus,
     );
 
     const navContext = React.useContext(NavContext);
     const logInExtraInfo = useSelector(state =>
       nativeLogInExtraInfoSelector({
         redux: state,
         navContext,
       }),
     );
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callRegister = useServerCall(register);
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
 
     return (
       <RegisterPanel
         {...props}
         loadingStatus={loadingStatus}
         logInExtraInfo={logInExtraInfo}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         register={callRegister}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedRegisterPanel;
diff --git a/native/avatars/avatar.react.js b/native/avatars/avatar.react.js
index 76dedc5b1..062e4d42b 100644
--- a/native/avatars/avatar.react.js
+++ b/native/avatars/avatar.react.js
@@ -1,164 +1,168 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
 import type {
   ResolvedClientAvatar,
   AvatarSize,
 } from 'lib/types/avatar-types.js';
 
 import {
   xSmallAvatarSize,
   smallAvatarSize,
   mediumAvatarSize,
   largeAvatarSize,
   xLargeAvatarSize,
   xxLargeAvatarSize,
 } from './avatar-constants.js';
 import Multimedia from '../media/multimedia.react.js';
+import type { ViewStyle } from '../types/styles.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
   +size: AvatarSize,
 };
 
 function Avatar(props: Props): React.Node {
   const { avatarInfo, size } = props;
 
   const containerSizeStyle = React.useMemo(() => {
     if (size === 'XS') {
       return styles.xSmall;
     } else if (size === 'S') {
       return styles.small;
     } else if (size === 'M') {
       return styles.medium;
     } else if (size === 'L') {
       return styles.large;
     } else if (size === 'XL') {
       return styles.xLarge;
     }
     return styles.xxLarge;
   }, [size]);
 
   const emojiContainerStyle = React.useMemo(() => {
-    const containerStyles = [styles.emojiContainer, containerSizeStyle];
+    const containerStyles: Array<ViewStyle> = [
+      styles.emojiContainer,
+      containerSizeStyle,
+    ];
     if (avatarInfo.type === 'emoji') {
       const backgroundColor = { backgroundColor: `#${avatarInfo.color}` };
       containerStyles.push(backgroundColor);
     }
 
     return containerStyles;
   }, [avatarInfo, containerSizeStyle]);
 
   const emojiSizeStyle = React.useMemo(() => {
     if (size === 'XS') {
       return styles.emojiXSmall;
     } else if (size === 'S') {
       return styles.emojiSmall;
     } else if (size === 'M') {
       return styles.emojiMedium;
     } else if (size === 'L') {
       return styles.emojiLarge;
     } else if (size === 'XL') {
       return styles.emojiXLarge;
     }
     return styles.emojiXXLarge;
   }, [size]);
 
   const avatar = React.useMemo(() => {
     if (avatarInfo.type !== 'image' && avatarInfo.type !== 'encrypted_image') {
       return (
         <View style={emojiContainerStyle}>
           <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
         </View>
       );
     }
 
     let avatarMediaInfo;
     if (avatarInfo.type === 'encrypted_image') {
       avatarMediaInfo = avatarInfo;
     } else if (avatarInfo.type === 'image') {
       avatarMediaInfo = {
         type: 'photo',
         uri: avatarInfo.uri,
       };
     } else {
       return null;
     }
 
     return (
       <View style={[containerSizeStyle, styles.imageContainer]}>
         <Multimedia mediaInfo={avatarMediaInfo} spinnerColor="white" />
       </View>
     );
   }, [avatarInfo, containerSizeStyle, emojiContainerStyle, emojiSizeStyle]);
 
   return avatar;
 }
 
 const styles = StyleSheet.create({
   emojiContainer: {
     alignItems: 'center',
     justifyContent: 'center',
   },
   emojiLarge: {
     fontSize: 64,
     textAlign: 'center',
   },
   emojiMedium: {
     fontSize: 28,
     textAlign: 'center',
   },
   emojiSmall: {
     fontSize: 14,
     textAlign: 'center',
   },
   emojiXLarge: {
     fontSize: 80,
     textAlign: 'center',
   },
   emojiXSmall: {
     fontSize: 9,
     textAlign: 'center',
   },
   emojiXXLarge: {
     fontSize: 176,
     textAlign: 'center',
   },
   imageContainer: {
     overflow: 'hidden',
   },
   large: {
     borderRadius: largeAvatarSize / 2,
     height: largeAvatarSize,
     width: largeAvatarSize,
   },
   medium: {
     borderRadius: mediumAvatarSize / 2,
     height: mediumAvatarSize,
     width: mediumAvatarSize,
   },
   small: {
     borderRadius: smallAvatarSize / 2,
     height: smallAvatarSize,
     width: smallAvatarSize,
   },
   xLarge: {
     borderRadius: xLargeAvatarSize / 2,
     height: xLargeAvatarSize,
     width: xLargeAvatarSize,
   },
   xSmall: {
     borderRadius: xSmallAvatarSize / 2,
     height: xSmallAvatarSize,
     width: xSmallAvatarSize,
   },
   xxLarge: {
     borderRadius: xxLargeAvatarSize / 2,
     height: xxLargeAvatarSize,
     width: xxLargeAvatarSize,
   },
 });
 
 export default Avatar;
diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js
index 32f18779a..837e39c9e 100644
--- a/native/calendar/calendar.react.js
+++ b/native/calendar/calendar.react.js
@@ -1,1103 +1,1103 @@
 // @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: 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 = 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>,
   ) {
     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, ... }) => {
     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) => {
     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) => {
     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,
     });
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   static keyExtractor = (item: CalendarItemWithHeight | CalendarItem) => {
     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,
   ) => {
     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) => {
     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>) => {
     return _sum(data.map(Calendar.itemHeight));
   };
 
   render() {
     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() {
     const { safeAreaHeight, tabBarHeight } = this.props.dimensions;
     return safeAreaHeight - tabBarHeight;
   }
 
   initialScrollIndex(data: $ReadOnlyArray<CalendarItemWithHeight>) {
     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({
       // 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) => {
     if (item.itemType !== 'entryInfo') {
       return null;
     }
     return item.entryInfo.text;
   };
 
   heightMeasurerDummy = (item: CalendarItem) => {
     invariant(
       item.itemType === 'entryInfo',
       'NodeHeightMeasurer asked for dummy for non-entryInfo item',
     );
     return dummyNodeForEntryHeightMeasurement(item.entryInfo.text);
   };
 
   heightMeasurerMergeItem = (item: CalendarItem, height: ?number) => {
     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 = {};
+    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 = _throttle(() => {
     if (
       this.topLoadingFromScroll &&
       this.topLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.topLoadingFromScroll);
     }
   }, 1000);
 
   loadMoreBelow = _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/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index 21c1ce8aa..37b744aff 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1448 +1,1454 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
   FadeInDown,
   FadeOutDown,
 } from 'react-native-reanimated';
 
 import {
   moveDraftActionType,
   updateDraftActionType,
 } from 'lib/actions/draft-actions.js';
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   getUserMentionsCandidates,
 } from 'lib/shared/mention-utils.js';
 import {
   useNextLocalID,
   trimMessage,
   useMessagePreview,
   messageKey,
   type MessagePreviewResult,
 } from 'lib/shared/message-utils.js';
 import SentencePrefixSearchIndex from 'lib/shared/sentence-prefix-search-index.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PhotoPaste } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   SendEditMessageResponse,
   MessageInfo,
 } from 'lib/types/message-types.js';
 import type {
   MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   RelativeMemberInfo,
   ChatMentionCandidates,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { ChatContext } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   MessageEditingContext,
   type MessageEditingContextType,
 } from './message-editing-context.react.js';
 import type { RemoveEditMode } from './message-list-types.js';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import MentionTypeaheadTooltipButton from '../chat/mention-typeahead-tooltip-button.react.js';
 import Button from '../components/button.react.js';
 // eslint-disable-next-line import/extensions
 import ClearableTextInput from '../components/clearable-text-input.react';
 import type { SyncedSelectionData } from '../components/selectable-text-input.js';
 // eslint-disable-next-line import/extensions
 import SelectableTextInput from '../components/selectable-text-input.react';
 import SingleLine from '../components/single-line.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import {
   type InputState,
   InputStateContext,
   type EditInputBarMessageParameters,
 } from '../input/input-state.js';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { getKeyboardHeight } from '../keyboard/keyboard.js';
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { OverlayContextType } from '../navigation/overlay-context.js';
 import {
   type NavigationRoute,
   ChatCameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent, ImagePasteEvent } from '../types/react-native.js';
-import { type AnimatedViewStyle, AnimatedView } from '../types/styles.js';
+import {
+  type AnimatedViewStyle,
+  AnimatedView,
+  type ViewStyle,
+} from '../types/styles.js';
 import Alert from '../utils/alert.js';
 import { runTiming } from '../utils/animation-utils.js';
 import { exitEditAlert } from '../utils/edit-messages-utils.js';
 import {
   nativeMentionTypeaheadRegex,
   mentionTypeaheadTooltipActions,
 } from '../utils/typeahead-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
   Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const expandoButtonsAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     paddingLeft: Platform.OS === 'android' ? 10 : 5,
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 13 : 11,
     paddingRight: 2,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     borderRadius: 8,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 48,
     marginBottom: 8,
   },
   editView: {
     marginLeft: 20,
     marginRight: 20,
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   editViewContent: {
     flex: 1,
     paddingRight: 6,
   },
   exitEditButton: {
     marginTop: 6,
   },
   editingLabel: {
     paddingBottom: 4,
   },
   editingMessagePreview: {
     color: 'listForegroundLabel',
   },
   joinButtonContent: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   joinButtonTextLight: {
     color: 'white',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinButtonTextDark: {
     color: 'black',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: 4,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 6,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 8,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginRight: 4,
     marginTop: 6,
     marginBottom: 8,
     maxHeight: 110,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
   +styles: typeof unboundStyles,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +isActive: boolean,
   +keyboardState: ?KeyboardState,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +inputState: ?InputState,
   +userSearchIndex: SentencePrefixSearchIndex,
   +userMentionsCandidates: $ReadOnlyArray<
     RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
   >,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +selectionState: SyncedSelectionData,
   +isExitingDuringEditMode: boolean,
 };
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
   selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: AnimatedViewStyle;
   cameraRollIconStyle: AnimatedViewStyle;
   cameraIconStyle: AnimatedViewStyle;
   expandIconStyle: AnimatedViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: AnimatedViewStyle;
 
   clearBeforeRemoveListener: () => void;
   clearFocusListener: () => void;
   clearBlurListener: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       textEdited: false,
       buttonsExpanded: true,
       selectionState: { text: props.draft, selection: { start: 0, end: 0 } },
       isExitingDuringEditMode: false,
     };
 
     this.setUpActionIconAnimations();
     this.setUpSendIconAnimations();
   }
 
   setUpActionIconAnimations() {
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [26, 66],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
   }
 
   setUpSendIconAnimations() {
     const initialSendButtonContainerOpen = trimMessage(this.props.draft)
       ? 1
       : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing() {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     if (this.shouldShowTextInput) {
       this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
     } else {
       this.setUpSendIconAnimations();
     }
   }
 
   componentDidMount() {
     const { isActive, navigation } = this.props;
     if (isActive) {
       this.addEditInputMessageListener();
     }
     if (!navigation) {
       return;
     }
     this.clearBeforeRemoveListener = navigation.addListener(
       'beforeRemove',
       this.onNavigationBeforeRemove,
     );
     this.clearFocusListener = navigation.addListener(
       'focus',
       this.onNavigationFocus,
     );
     this.clearBlurListener = navigation.addListener(
       'blur',
       this.onNavigationBlur,
     );
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeEditInputMessageListener();
     }
     if (this.clearBeforeRemoveListener) {
       this.clearBeforeRemoveListener();
     }
     if (this.clearFocusListener) {
       this.clearFocusListener();
     }
     if (this.clearBlurListener) {
       this.clearBlurListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (
       this.state.textEdited &&
       this.state.text &&
       this.props.threadInfo.id !== prevProps.threadInfo.id
     ) {
       this.props.dispatch({
         type: moveDraftActionType,
         payload: {
           oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
           newKey: draftKeyFromThreadID(this.props.threadInfo.id),
         },
       });
     } else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
       this.setState({ text: this.props.draft });
     }
     if (this.props.isActive && !prevProps.isActive) {
       this.addEditInputMessageListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeEditInputMessageListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing =
       ChatInputBar.systemKeyboardShowing(prevProps);
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
 
     if (
       this.props.messageEditingContext?.editState.editedMessage &&
       !prevProps.messageEditingContext?.editState.editedMessage
     ) {
       this.blockNavigation();
     }
   }
 
   addEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addEditInputMessageListener',
     );
     this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
   }
 
   removeEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeEditInputMessageListener',
     );
     this.props.inputState.removeEditInputMessageListener(
       this.focusAndUpdateText,
     );
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   get shouldShowTextInput(): boolean {
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       return true;
     }
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place
     // and won't list the viewer as a member,
     // which will end up hiding the input.
     // In this case, we will assume that our creation action
     // will get translated into a join, and as long
     // as members are voiced, we can show the input.
     if (!this.props.threadCreationInProgress) {
       return false;
     }
     return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
   }
 
   render() {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     const threadColor = `#${this.props.threadInfo.color}`;
     const isEditMode = this.isEditMode();
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         const textStyle = colorIsDark(this.props.threadInfo.color)
           ? this.props.styles.joinButtonTextLight
           : this.props.styles.joinButtonTextDark;
         buttonContent = (
           <View style={this.props.styles.joinButtonContent}>
             <SWMansionIcon name="plus" style={textStyle} />
             <Text style={textStyle}>Join Chat</Text>
           </View>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.85}
             style={[
               this.props.styles.joinButton,
               { backgroundColor: threadColor },
             ]}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     const typeaheadRegexMatches = getTypeaheadRegexMatches(
       this.state.selectionState.text,
       this.state.selectionState.selection,
       nativeMentionTypeaheadRegex,
     );
 
     let typeaheadTooltip = null;
 
     if (typeaheadRegexMatches && !isEditMode) {
       const typeaheadMatchedStrings = {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
 
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         this.props.userSearchIndex,
         this.props.userMentionsCandidates,
         this.props.viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         this.props.chatMentionSearchIndex,
         this.props.chatMentionCandidates,
         typeaheadMatchedStrings.query,
       );
       const suggestions = [...suggestedUsers, ...suggestedChats];
 
       if (suggestions.length > 0) {
         typeaheadTooltip = (
           <TypeaheadTooltip
             text={this.state.text}
             matchedStrings={typeaheadMatchedStrings}
             suggestions={suggestions}
             focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
             typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
             TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
           />
         );
       }
     }
 
     let content;
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
     if (this.shouldShowTextInput) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     let editedMessage;
     if (isEditMode && this.props.editedMessagePreview) {
       const { message } = this.props.editedMessagePreview;
       editedMessage = (
         <AnimatedView
           style={this.props.styles.editView}
           entering={FadeInDown}
           exiting={FadeOutDown}
         >
           <View style={this.props.styles.editViewContent}>
             <TouchableOpacity
               onPress={this.scrollToEditedMessage}
               activeOpacity={0.4}
             >
               <Text
                 style={[{ color: threadColor }, this.props.styles.editingLabel]}
               >
                 Editing message
               </Text>
               <SingleLine style={this.props.styles.editingMessagePreview}>
                 {message.text}
               </SingleLine>
             </TouchableOpacity>
           </View>
           <SWMansionIcon
             style={this.props.styles.exitEditButton}
             name="cross"
             size={22}
             color={threadColor}
             onPress={this.onPressExitEditMode}
           />
         </AnimatedView>
       );
     }
 
     return (
       <AnimatedView
         style={this.props.styles.container}
         onLayout={this.props.onInputBarLayout}
       >
         {typeaheadTooltip}
         {joinButton}
         {editedMessage}
         {content}
         {keyboardInputHost}
       </AnimatedView>
     );
   }
 
   renderInput() {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <AnimatedView style={this.expandIconStyle}>
           <SWMansionIcon
             name="chevron-right"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </AnimatedView>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
-    const expandoButtonsViewStyle = [this.props.styles.innerExpandoButtons];
+    const expandoButtonsViewStyle: Array<ViewStyle> = [
+      this.props.styles.innerExpandoButtons,
+    ];
     if (this.isEditMode()) {
       expandoButtonsViewStyle.push({ display: 'none' });
     }
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <AnimatedView style={this.expandoButtonsStyle}>
             <View style={expandoButtonsViewStyle}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <AnimatedView style={this.cameraRollIconStyle}>
                   <SWMansionIcon
                     name="image-1"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.props.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <AnimatedView style={this.cameraIconStyle}>
                   <SWMansionIcon
                     name="camera"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </AnimatedView>
           <SelectableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             selection={this.state.selectionState.selection}
             onUpdateSyncedSelectionData={this.updateSelectionState}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             clearableTextInputRef={this.clearableTextInputRef}
             ref={this.selectableTextInputRef}
             selectionColor={`#${this.props.threadInfo.color}`}
           />
           <AnimatedView style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </AnimatedView>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   selectableTextInputRef = (
     selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
   ) => {
     this.selectableTextInput = selectableTextInput;
   };
 
   updateText = (text: string) => {
     if (this.state.isExitingDuringEditMode) {
       return;
     }
     this.setState({ text, textEdited: true });
     this.props.messageEditingContext?.setEditedMessageChanged(
       this.isMessageEdited(text),
     );
     if (this.isEditMode()) {
       return;
     }
     this.saveDraft(text);
   };
 
   updateSelectionState: (data: SyncedSelectionData) => void = data => {
     this.setState({ selectionState: data });
   };
 
   saveDraft = _throttle(text => {
     this.props.dispatch({
       type: updateDraftActionType,
       payload: {
         key: draftKeyFromThreadID(this.props.threadInfo.id),
         text,
       },
     });
   }, 400);
 
   focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
     this.selectableTextInput?.prepareForSelectionMutation(text, selection);
     this.setState({
       text,
       textEdited: true,
       selectionState: { text, selection },
     });
     this.saveDraft(text);
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateText = (params: EditInputBarMessageParameters) => {
     const { message: text, mode } = params;
     const currentText = this.state.text;
     if (mode === 'replace') {
       this.updateText(text);
     } else if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
     }
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateButtonsVisibility = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
 
     this.immediatelyShowSendButton();
     this.immediatelyHideButtons();
     textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
 
     const editedMessage = this.getEditedMessage();
     if (editedMessage && editedMessage.id) {
       this.editMessage(editedMessage.id, this.state.text);
       return;
     }
 
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = this.props.nextLocalID;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 
   isEditMode = () => {
     const editState = this.props.messageEditingContext?.editState;
     const isThisThread =
       editState?.editedMessage?.threadID === this.props.threadInfo.id;
     return editState && editState.editedMessage !== null && isThisThread;
   };
 
   isMessageEdited = newText => {
     let text = newText ?? this.state.text;
     text = trimMessage(text);
     const originalText = this.props.editedMessageInfo?.text;
     return text !== originalText;
   };
 
   unblockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation) {
       return;
     }
     navigation.setParams({ removeEditMode: null });
   };
 
   removeEditMode: RemoveEditMode = action => {
     const { navigation } = this.props;
     if (!navigation || this.state.isExitingDuringEditMode) {
       return 'ignore_action';
     }
     if (!this.isMessageEdited()) {
       this.unblockNavigation();
       return 'reduce_action';
     }
     const unblockAndDispatch = () => {
       this.unblockNavigation();
       navigation.dispatch(action);
     };
     const onContinueEditing = () => {
       this.props.overlayContext?.resetScrollBlockingModalStatus();
     };
     exitEditAlert({
       onDiscard: unblockAndDispatch,
       onContinueEditing,
     });
     return 'ignore_action';
   };
 
   blockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation || !navigation.isFocused()) {
       return;
     }
     navigation.setParams({
       removeEditMode: this.removeEditMode,
     });
   };
 
   editMessage = async (messageID: string, text: string) => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     text = trimMessage(text);
     try {
       await this.props.editMessage(messageID, text);
       this.exitEditMode();
     } catch (error) {
       Alert.alert(
         'Couldn’t edit the message',
         'Please try again later',
         [{ text: 'OK' }],
         {
           cancelable: true,
         },
       );
     }
   };
 
   getEditedMessage = () => {
     const editState = this.props.messageEditingContext?.editState;
     return editState?.editedMessage;
   };
 
   onPressExitEditMode = () => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     exitEditAlert({
       onDiscard: this.exitEditMode,
     });
   };
 
   scrollToEditedMessage = () => {
     const editedMessage = this.getEditedMessage();
     if (!editedMessage) {
       return;
     }
     const editedMessageKey = messageKey(editedMessage);
     this.props.inputState?.scrollToMessage(editedMessageKey);
   };
 
   exitEditMode = () => {
     this.props.messageEditingContext?.setEditedMessage(null, () => {
       this.unblockNavigation();
       this.updateText(this.props.draft);
       this.focusAndUpdateButtonsVisibility();
       this.updateSendButton(this.props.draft);
     });
   };
 
   onNavigationFocus = () => {
     this.setState({ isExitingDuringEditMode: false });
   };
 
   onNavigationBlur = () => {
     if (!this.isEditMode()) {
       return;
     }
     this.setState(
       { text: this.props.draft, isExitingDuringEditMode: true },
       this.exitEditMode,
     );
   };
 
   onNavigationBeforeRemove = e => {
     if (!this.isEditMode()) {
       return;
     }
     const { action } = e.data;
     e.preventDefault();
     const saveExit = () => {
       this.props.messageEditingContext?.setEditedMessage(null, () => {
         this.setState({ isExitingDuringEditMode: true }, () => {
           if (!this.props.navigation) {
             return;
           }
           this.props.navigation.dispatch(action);
         });
       });
     };
     if (!this.isMessageEdited()) {
       saveExit();
       return;
     }
     exitEditAlert({
       onDiscard: saveExit,
     });
   };
 
   onPressJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction() {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded || this.isEditMode()) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 type ConnectedChatInputBarBaseProps = {
   ...BaseProps,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +navigation?: ChatNavigationProp<'MessageList'>,
 };
 function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
   const navContext = React.useContext(NavContext);
   const keyboardState = React.useContext(KeyboardContext);
   const inputState = React.useContext(InputStateContext);
   const overlayContext = React.useContext(OverlayContext);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const draft = useSelector(
     state =>
       state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const createThreadLoadingStatus = useSelector(
     createThreadLoadingStatusSelector,
   );
   const threadCreationInProgress = createThreadLoadingStatus === 'loading';
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useNextLocalID();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useJoinThread();
 
   const userSearchIndex = useSelector(userStoreMentionSearchIndex);
 
   const { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = getUserMentionsCandidates(
     props.threadInfo,
     parentThreadInfo,
   );
 
   const chatMentionCandidates = useThreadChatMentionCandidates(
     props.threadInfo,
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
 
   const editedMessageInfo = messageEditingContext?.editState.editedMessage;
   const editedMessagePreview = useMessagePreview(
     editedMessageInfo,
     props.threadInfo,
     getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
   );
   const editMessage = useEditMessage();
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       threadCreationInProgress={threadCreationInProgress}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
       userSearchIndex={userSearchIndex}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
     />
   );
 }
 
 type DummyChatInputBarProps = {
   ...BaseProps,
   +onHeightMeasured: (height: number) => mixed,
 };
 const noop = () => {};
 function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
   const { onHeightMeasured, ...restProps } = props;
   const onInputBarLayout = React.useCallback(
     (event: LayoutEvent) => {
       const { height } = event.nativeEvent.layout;
       onHeightMeasured(height);
     },
     [onHeightMeasured],
   );
   return (
     <View pointerEvents="none">
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={noop}
       />
     </View>
   );
 }
 
 type ChatInputBarProps = {
   ...BaseProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
   React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
     props: ChatInputBarProps,
   ) {
     const { navigation, route, ...restProps } = props;
     const keyboardState = React.useContext(KeyboardContext);
 
     const { threadInfo } = props;
     const imagePastedCallback = React.useCallback(
       (imagePastedEvent: ImagePasteEvent) => {
         if (threadInfo.id !== imagePastedEvent.threadID) {
           return;
         }
         const pastedImage: PhotoPaste = {
           step: 'photo_paste',
           dimensions: {
             height: imagePastedEvent.height,
             width: imagePastedEvent.width,
           },
           filename: imagePastedEvent.fileName,
           uri: 'file://' + imagePastedEvent.filePath,
           selectTime: 0,
           sendTime: 0,
           retries: 0,
         };
         navigation.navigate<'ImagePasteModal'>({
           name: ImagePasteModalRouteName,
           params: {
             imagePasteStagingInfo: pastedImage,
             thread: threadInfo,
           },
         });
       },
       [navigation, threadInfo],
     );
 
     React.useEffect(() => {
       const imagePasteListener = NativeAppEventEmitter.addListener(
         'imagePasted',
         imagePastedCallback,
       );
       return () => imagePasteListener.remove();
     }, [imagePastedCallback]);
 
     const chatContext = React.useContext(ChatContext);
     invariant(chatContext, 'should be set');
     const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
     const onInputBarLayout = React.useCallback(
       (event: LayoutEvent) => {
         const { height } = event.nativeEvent.layout;
         setChatInputBarHeight(threadInfo.id, height);
       },
       [threadInfo.id, setChatInputBarHeight],
     );
 
     React.useEffect(() => {
       return () => {
         deleteChatInputBarHeight(threadInfo.id);
       };
     }, [deleteChatInputBarHeight, threadInfo.id]);
 
     const openCamera = React.useCallback(() => {
       keyboardState?.dismissKeyboard();
       navigation.navigate<'ChatCameraModal'>({
         name: ChatCameraModalRouteName,
         params: {
           presentedFrom: route.key,
           thread: threadInfo,
         },
       });
     }, [keyboardState, navigation, route.key, threadInfo]);
 
     return (
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={openCamera}
         navigation={navigation}
       />
     );
   });
 
 export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
index 607beed8a..3b68b14d5 100644
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -1,384 +1,384 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import {
   newThreadActionTypes,
   useNewThread,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
 } from 'lib/selectors/user-selectors.js';
 import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadInFilterList, userIsMember } from 'lib/shared/thread-utils.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadType, threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { type AccountUserInfo } from 'lib/types/user-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import ParentThreadHeader from './parent-thread-header.react.js';
 import LinkButton from '../components/link-button.react.js';
 import { createTagInput } from '../components/tag-input.react.js';
 import ThreadList from '../components/thread-list.react.js';
 import UserList from '../components/user-list.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 export type ComposeSubchannelParams = {
   +threadType: ThreadType,
   +parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ComposeSubchannel'>,
   +route: NavigationRoute<'ComposeSubchannel'>,
 };
 function ComposeSubchannel(props: Props): React.Node {
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
   const [createButtonEnabled, setCreateButtonEnabled] =
     React.useState<boolean>(true);
 
   const tagInputRef = React.useRef();
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setUsernameInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const waitingOnThreadIDRef = React.useRef<?string>();
 
   const { threadType, parentThreadInfo } = props.route.params;
   const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
   const callNewThread = useNewThread();
   const calendarQuery = useCalendarQuery();
   const newChatThreadAction = React.useCallback(async () => {
     try {
       const assumedThreadType =
         threadType ?? threadTypes.COMMUNITY_SECRET_SUBTHREAD;
       const query = calendarQuery();
       invariant(
         assumedThreadType === 3 ||
           assumedThreadType === 4 ||
           assumedThreadType === 6 ||
           assumedThreadType === 7,
         "Sidebars and communities can't be created from the thread composer",
       );
       const result = await callNewThread({
         type: assumedThreadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: userInfoInputIDs,
         color: parentThreadInfo.color,
         calendarQuery: query,
       });
       waitingOnThreadIDRef.current = result.newThreadID;
       return result;
     } catch (e) {
       setCreateButtonEnabled(true);
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }, [
     threadType,
     userInfoInputIDs,
     calendarQuery,
     parentThreadInfo,
     callNewThread,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatchNewChatThreadAction = React.useCallback(() => {
     setCreateButtonEnabled(false);
     dispatchActionPromise(newThreadActionTypes, newChatThreadAction());
   }, [dispatchActionPromise, newChatThreadAction]);
 
   const userInfoInputArrayEmpty = userInfoInputArray.length === 0;
   const onPressCreateThread = React.useCallback(() => {
     if (!createButtonEnabled) {
       return;
     }
     if (userInfoInputArrayEmpty) {
       Alert.alert(
         'Chatting to yourself?',
         'Are you sure you want to create a channel containing only yourself?',
         [
           { text: 'Cancel', style: 'cancel' },
           { text: 'Confirm', onPress: dispatchNewChatThreadAction },
         ],
         { cancelable: true },
       );
     } else {
       dispatchNewChatThreadAction();
     }
   }, [
     createButtonEnabled,
     userInfoInputArrayEmpty,
     dispatchNewChatThreadAction,
   ]);
 
   const { navigation } = props;
   const { setOptions } = navigation;
   React.useEffect(() => {
     setOptions({
       // eslint-disable-next-line react/display-name
       headerRight: () => (
         <LinkButton
           text="Create"
           onPress={onPressCreateThread}
           disabled={!createButtonEnabled}
         />
       ),
     });
   }, [setOptions, onPressCreateThread, createButtonEnabled]);
 
   const { setParams } = navigation;
   const parentThreadInfoID = parentThreadInfo.id;
   const reduxParentThreadInfo = useSelector(
     state => threadInfoSelector(state)[parentThreadInfoID],
   );
   React.useEffect(() => {
     if (reduxParentThreadInfo) {
       setParams({ parentThreadInfo: reduxParentThreadInfo });
     }
   }, [reduxParentThreadInfo, setParams]);
 
   const threadInfos = useSelector(threadInfoSelector);
   const newlyCreatedThreadInfo = waitingOnThreadIDRef.current
     ? threadInfos[waitingOnThreadIDRef.current]
     : null;
   const { pushNewThread } = navigation;
   React.useEffect(() => {
     if (!newlyCreatedThreadInfo) {
       return;
     }
 
     const waitingOnThreadID = waitingOnThreadIDRef.current;
     if (waitingOnThreadID === null || waitingOnThreadID === undefined) {
       return;
     }
     waitingOnThreadIDRef.current = undefined;
 
     pushNewThread(newlyCreatedThreadInfo);
   }, [newlyCreatedThreadInfo, pushNewThread]);
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
   const { community } = parentThreadInfo;
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const userSearchResults = React.useMemo(
     () =>
       getPotentialMemberItems({
         text: usernameInputText,
         userInfos: otherUserInfos,
         searchIndex: userSearchIndex,
         excludeUserIDs: userInfoInputIDs,
         inputParentThreadInfo: parentThreadInfo,
         inputCommunityThreadInfo: communityThreadInfo,
         threadType,
       }),
     [
       usernameInputText,
       otherUserInfos,
       userSearchIndex,
       userInfoInputIDs,
       parentThreadInfo,
       communityThreadInfo,
       threadType,
     ],
   );
 
-  const existingThreads = React.useMemo(() => {
+  const existingThreads: $ReadOnlyArray<ThreadInfo> = React.useMemo(() => {
     if (userInfoInputIDs.length === 0) {
       return [];
     }
     return _flow(
       _filter(
         (threadInfo: ThreadInfo) =>
           threadInFilterList(threadInfo) &&
           threadInfo.parentThreadID === parentThreadInfo.id &&
           userInfoInputIDs.every(userID => userIsMember(threadInfo, userID)),
       ),
       _sortBy(
         ([
           'members.length',
           (threadInfo: ThreadInfo) => (threadInfo.name ? 1 : 0),
         ]: $ReadOnlyArray<string | ((threadInfo: ThreadInfo) => mixed)>),
       ),
     )(threadInfos);
   }, [userInfoInputIDs, threadInfos, parentThreadInfo]);
 
   const navigateToThread = useNavigateToThread();
   const onSelectExistingThread = React.useCallback(
     (threadID: string) => {
       const threadInfo = threadInfos[threadID];
       navigateToThread({ threadInfo });
     },
     [threadInfos, navigateToThread],
   );
 
   const onUserSelect = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setUserInfoInputArray(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [userInfoInputIDs, otherUserInfos],
   );
 
   const styles = useStyles(unboundStyles);
 
   let existingThreadsSection = null;
   if (existingThreads.length > 0) {
     existingThreadsSection = (
       <View style={styles.existingThreads}>
         <View style={styles.existingThreadsRow}>
           <Text style={styles.existingThreadsLabel}>Existing channels</Text>
         </View>
         <View style={styles.existingThreadList}>
           <ThreadList
             threadInfos={existingThreads}
             onSelect={onSelectExistingThread}
             itemTextStyle={styles.listItem}
           />
         </View>
       </View>
     );
   }
 
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressCreateThread,
     }),
     [onPressCreateThread],
   );
   const userSearchResultWithENSNames = useENSNames(userSearchResults);
   const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
   return (
     <View style={styles.container}>
       <ParentThreadHeader
         parentThreadInfo={parentThreadInfo}
         childThreadType={threadType}
       />
       <View style={styles.userSelectionRow}>
         <Text style={styles.tagInputLabel}>To: </Text>
         <View style={styles.tagInputContainer}>
           <TagInput
             value={userInfoInputArrayWithENSNames}
             onChange={setUserInfoInputArray}
             text={usernameInputText}
             onChangeText={setUsernameInputText}
             labelExtractor={tagDataLabelExtractor}
             inputProps={inputProps}
             ref={tagInputRef}
           />
         </View>
       </View>
       <View style={styles.userList}>
         <UserList
           userInfos={userSearchResultWithENSNames}
           onSelect={onUserSelect}
           itemTextStyle={styles.listItem}
         />
       </View>
       {existingThreadsSection}
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   existingThreadList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingRight: 12,
   },
   existingThreads: {
     flex: 1,
   },
   existingThreadsLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
     textAlign: 'center',
   },
   existingThreadsRow: {
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     borderTopWidth: 1,
     paddingVertical: 6,
   },
   listItem: {
     color: 'modalForegroundLabel',
   },
   tagInputContainer: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   userList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingLeft: 35,
     paddingRight: 12,
   },
   userSelectionRow: {
     alignItems: 'center',
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 const MemoizedComposeSubchannel: React.ComponentType<Props> =
   React.memo<Props>(ComposeSubchannel);
 
 export default MemoizedComposeSubchannel;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
index 144d180c6..1688ef147 100644
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -1,433 +1,437 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Feather.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import {
   useDerivedValue,
   withTiming,
   interpolateColor,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
 import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 
 import {
   clusterEndHeight,
   composedMessageStyle,
   avatarOffset,
 } from './chat-constants.js';
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { FailedSend } from './failed-send.react.js';
 import { InlineEngagement } from './inline-engagement.react.js';
 import { MessageEditingContext } from './message-editing-context.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { useNavigateToSidebar } from './sidebar-navigation.js';
 import SwipeableMessage from './swipeable-message.react.js';
 import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import CommIcon from '../components/comm-icon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import { useColors } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
-import { type AnimatedStyleObj, AnimatedView } from '../types/styles.js';
+import {
+  type AnimatedStyleObj,
+  type ViewStyle,
+  AnimatedView,
+} from '../types/styles.js';
 import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 
 type SwipeOptions = 'reply' | 'sidebar' | 'both' | 'none';
 type Props = {
   ...React.ElementConfig<typeof View>,
   +item: ChatMessageInfoItemWithHeight,
   +sendFailed: boolean,
   +focused: boolean,
   +swipeOptions: SwipeOptions,
   +shouldDisplayPinIndicator: boolean,
   +children: React.Node,
 };
 
 const ConnectedComposedMessage: React.ComponentType<Props> = React.memo<Props>(
   function ConnectedComposedMessage(props: Props) {
     const composedMessageMaxWidth = useComposedMessageMaxWidth();
     const colors = useColors();
     const inputState = React.useContext(InputStateContext);
     const navigateToSidebar = useNavigateToSidebar(props.item);
     const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
     const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
 
     const messageEditingContext = React.useContext(MessageEditingContext);
     const progress = useDerivedValue(() => {
       const isThisThread =
         messageEditingContext?.editState.editedMessage?.threadID ===
         props.item.threadInfo.id;
       const isHighlighted =
         messageEditingContext?.editState.editedMessage?.id ===
           props.item.messageInfo.id && isThisThread;
       return withTiming(isHighlighted ? 1 : 0);
     });
 
     const editedMessageStyle = useAnimatedStyle(() => {
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
         ['transparent', `#${props.item.threadInfo.color}40`],
       );
       return {
         backgroundColor,
       };
     });
 
     assertComposableMessageType(props.item.messageInfo.type);
     const {
       item,
       sendFailed,
       swipeOptions,
       shouldDisplayPinIndicator,
       children,
       focused,
       ...viewProps
     } = props;
 
     const { hasBeenEdited, isPinned } = item;
     const { id, creator } = item.messageInfo;
 
     const { isViewer } = creator;
     const alignStyle = isViewer
       ? styles.rightChatBubble
       : styles.leftChatBubble;
 
     const containerStyle = React.useMemo(() => {
       let containerMarginBottom = 5;
       if (item.endsCluster) {
         containerMarginBottom += clusterEndHeight;
       }
       return { marginBottom: containerMarginBottom };
     }, [item.endsCluster]);
 
     const messageBoxContainerStyle = React.useMemo(
       () => [
         styles.messageBoxContainer,
         isViewer ? styles.rightChatContainer : styles.leftChatContainer,
       ],
       [isViewer],
     );
 
     const deliveryIcon = React.useMemo(() => {
       if (!isViewer) {
         return undefined;
       }
 
       let deliveryIconName;
       let deliveryIconColor = `#${item.threadInfo.color}`;
 
       if (id !== null && id !== undefined) {
         deliveryIconName = 'check-circle';
       } else if (sendFailed) {
         deliveryIconName = 'x-circle';
         deliveryIconColor = colors.redText;
       } else {
         deliveryIconName = 'circle';
       }
 
       const animatedStyle: AnimatedStyleObj = { opacity: deliveryIconOpacity };
 
       return (
         <AnimatedView style={[styles.iconContainer, animatedStyle]}>
           <Icon
             name={deliveryIconName}
             style={[styles.icon, { color: deliveryIconColor }]}
           />
         </AnimatedView>
       );
     }, [
       colors.redText,
       deliveryIconOpacity,
       id,
       isViewer,
       item.threadInfo.color,
       sendFailed,
     ]);
 
     const editInputMessage = inputState?.editInputMessage;
     const reply = React.useCallback(() => {
       invariant(editInputMessage, 'editInputMessage should be set in reply');
       invariant(item.messageInfo.text, 'text should be set in reply');
       editInputMessage({
         message: createMessageReply(item.messageInfo.text),
         mode: 'prepend',
       });
     }, [editInputMessage, item.messageInfo.text]);
 
     const triggerReply =
       swipeOptions === 'reply' || swipeOptions === 'both' ? reply : undefined;
 
     const triggerSidebar =
       swipeOptions === 'sidebar' || swipeOptions === 'both'
         ? navigateToSidebar
         : undefined;
 
     const navigateToUserProfileBottomSheet =
       useNavigateToUserProfileBottomSheet();
 
     const onPressAvatar = React.useCallback(
       () => navigateToUserProfileBottomSheet(item.messageInfo.creator.id),
       [item.messageInfo.creator.id, navigateToUserProfileBottomSheet],
     );
 
     const avatar = React.useMemo(() => {
       if (!isViewer && item.endsCluster) {
         return (
           <TouchableOpacity
             onPress={onPressAvatar}
             style={styles.avatarContainer}
           >
             <UserAvatar size="S" userID={item.messageInfo.creator.id} />
           </TouchableOpacity>
         );
       } else if (!isViewer) {
         return <View style={styles.avatarOffset} />;
       } else {
         return undefined;
       }
     }, [
       isViewer,
       item.endsCluster,
       item.messageInfo.creator.id,
       onPressAvatar,
     ]);
 
     const pinIconPositioning = isViewer ? 'left' : 'right';
     const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
     const messageBoxTopLevelContainerStyle =
       pinIconPositioning === 'left'
         ? styles.rightMessageBoxTopLevelContainerStyle
         : styles.leftMessageBoxTopLevelContainerStyle;
 
     const pinIcon = React.useMemo(() => {
       if (!isPinned || !shouldDisplayPinIndicator) {
         return undefined;
       }
       return (
         <View style={styles.pinIconContainer}>
           <CommIcon
             name={pinIconName}
             size={12}
             style={{ color: `#${item.threadInfo.color}` }}
           />
         </View>
       );
     }, [
       isPinned,
       item.threadInfo.color,
       pinIconName,
       shouldDisplayPinIndicator,
     ]);
 
     const messageBoxStyle = React.useMemo(
       () => ({
         opacity: contentAndHeaderOpacity,
         maxWidth: composedMessageMaxWidth,
       }),
       [composedMessageMaxWidth, contentAndHeaderOpacity],
     );
 
     const messageBox = React.useMemo(
       () => (
         <View style={messageBoxTopLevelContainerStyle}>
           {pinIcon}
           <View style={messageBoxContainerStyle}>
             <SwipeableMessage
               triggerReply={triggerReply}
               triggerSidebar={triggerSidebar}
               isViewer={isViewer}
               contentStyle={styles.swipeableContainer}
               threadColor={item.threadInfo.color}
             >
               {avatar}
               <AnimatedView style={messageBoxStyle}>{children}</AnimatedView>
             </SwipeableMessage>
           </View>
         </View>
       ),
       [
         avatar,
         children,
         isViewer,
         item.threadInfo.color,
         messageBoxContainerStyle,
         messageBoxStyle,
         messageBoxTopLevelContainerStyle,
         pinIcon,
         triggerReply,
         triggerSidebar,
       ],
     );
 
     const inlineEngagement = React.useMemo(() => {
       const label = getMessageLabel(hasBeenEdited, item.threadInfo.id);
       if (
         !item.threadCreatedFromMessage &&
         Object.keys(item.reactions).length <= 0 &&
         !label
       ) {
         return undefined;
       }
       const positioning = isViewer ? 'right' : 'left';
       return (
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={item.threadInfo}
           sidebarThreadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           positioning={positioning}
           label={label}
         />
       );
     }, [
       hasBeenEdited,
       isViewer,
       item.messageInfo,
       item.reactions,
       item.threadCreatedFromMessage,
       item.threadInfo,
     ]);
 
     const viewStyle = React.useMemo(() => {
-      const baseStyle = [styles.alignment];
+      const baseStyle: Array<ViewStyle> = [styles.alignment];
       if (__DEV__) {
         return baseStyle;
       }
       if (item.messageShapeType === 'text') {
         baseStyle.push({ height: item.contentHeight });
       } else if (item.messageShapeType === 'multimedia') {
         const height = item.inlineEngagementHeight
           ? item.contentHeight + item.inlineEngagementHeight
           : item.contentHeight;
         baseStyle.push({ height });
       }
       return baseStyle;
     }, [
       item.contentHeight,
       item.inlineEngagementHeight,
       item.messageShapeType,
     ]);
 
     const messageHeaderStyle = React.useMemo(
       () => ({
         opacity: contentAndHeaderOpacity,
       }),
       [contentAndHeaderOpacity],
     );
 
     const animatedContainerStyle = React.useMemo(
       () => [containerStyle, editedMessageStyle],
       [containerStyle, editedMessageStyle],
     );
 
     const contentStyle = React.useMemo(
       () => [styles.content, alignStyle],
       [alignStyle],
     );
 
     const failedSend = React.useMemo(
       () => (sendFailed ? <FailedSend item={item} /> : undefined),
       [item, sendFailed],
     );
 
     const composedMessage = React.useMemo(() => {
       return (
         <View {...viewProps}>
           <AnimatedView style={messageHeaderStyle}>
             <MessageHeader
               item={item}
               focused={focused}
               display="lowContrast"
             />
           </AnimatedView>
           <AnimatedView style={animatedContainerStyle}>
             <View style={viewStyle}>
               <View style={contentStyle}>
                 {deliveryIcon}
                 {messageBox}
               </View>
               {inlineEngagement}
             </View>
             {failedSend}
           </AnimatedView>
         </View>
       );
     }, [
       animatedContainerStyle,
       contentStyle,
       deliveryIcon,
       failedSend,
       focused,
       inlineEngagement,
       item,
       messageBox,
       messageHeaderStyle,
       viewProps,
       viewStyle,
     ]);
 
     return composedMessage;
   },
 );
 
 const styles = StyleSheet.create({
   alignment: {
     marginLeft: composedMessageStyle.marginLeft,
     marginRight: composedMessageStyle.marginRight,
   },
   avatarContainer: {
     paddingRight: 8,
     paddingTop: 4,
   },
   avatarOffset: {
     width: avatarOffset,
   },
   content: {
     alignItems: 'center',
     flexDirection: 'row-reverse',
   },
   icon: {
     fontSize: 16,
     textAlign: 'center',
   },
   iconContainer: {
     marginLeft: 2,
     width: 16,
   },
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
   leftChatContainer: {
     alignItems: 'flex-start',
   },
   leftMessageBoxTopLevelContainerStyle: {
     flexDirection: 'row-reverse',
   },
   messageBoxContainer: {
     marginRight: 5,
   },
   pinIconContainer: {
     marginRight: 4,
     marginTop: 4,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
   rightChatContainer: {
     alignItems: 'flex-end',
   },
   rightMessageBoxTopLevelContainerStyle: {
     flexDirection: 'row',
   },
   swipeableContainer: {
     alignItems: 'flex-end',
     flexDirection: 'row',
   },
 });
 
 export default ConnectedComposedMessage;
diff --git a/native/chat/message-results-screen.react.js b/native/chat/message-results-screen.react.js
index fc5b2e2af..3ac33e221 100644
--- a/native/chat/message-results-screen.react.js
+++ b/native/chat/message-results-screen.react.js
@@ -1,181 +1,183 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { useFetchPinnedMessages } from 'lib/actions/message-actions.js';
 import { messageListData } from 'lib/selectors/chat-selectors.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
 } from 'lib/shared/message-utils.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useHeightMeasurer } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react';
+import type { NativeChatMessageItem } from './message-data.react.js';
 import MessageResult from './message-result.react.js';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 
 export type MessageResultsScreenParams = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 type MessageResultsScreenProps = {
   +navigation: ChatNavigationProp<'MessageResultsScreen'>,
   +route: NavigationRoute<'MessageResultsScreen'>,
 };
 
 function MessageResultsScreen(props: MessageResultsScreenProps): React.Node {
   const { navigation, route } = props;
   const { threadInfo } = route.params;
   const styles = useStyles(unboundStyles);
   const { id: threadID } = threadInfo;
   const [rawMessageResults, setRawMessageResults] = React.useState([]);
 
   const measureMessages = useHeightMeasurer();
   const [measuredMessages, setMeasuredMessages] = React.useState([]);
 
   const [messageVerticalBounds, setMessageVerticalBounds] = React.useState();
   const scrollViewContainerRef = React.useRef();
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   React.useEffect(() => {
     (async () => {
       const result = await callFetchPinnedMessages({ threadID });
       setRawMessageResults(result.pinnedMessages);
     })();
   }, [callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
-  const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
-    if (!chatMessageInfos) {
-      return [];
-    }
-
-    const chatMessageInfoItems = chatMessageInfos.filter(
-      item =>
-        item.itemType === 'message' &&
-        item.isPinned &&
-        !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
-    );
-
-    // By the nature of using messageListData and passing in
-    // the desired translatedMessageResults as additional
-    // messages, we will have duplicate ChatMessageInfoItems.
-    const uniqueChatMessageInfoItemsMap = new Map();
-    chatMessageInfoItems.forEach(
-      item =>
-        item.messageInfo &&
-        item.messageInfo.id &&
-        uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
-    );
+  const sortedUniqueChatMessageInfoItems: $ReadOnlyArray<NativeChatMessageItem> =
+    React.useMemo(() => {
+      if (!chatMessageInfos) {
+        return [];
+      }
+
+      const chatMessageInfoItems = chatMessageInfos.filter(
+        item =>
+          item.itemType === 'message' &&
+          item.isPinned &&
+          !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
+      );
 
-    // Push the items in the order they appear in the rawMessageResults
-    // since the messages fetched from the server are already sorted
-    // in the order of pin_time (newest first).
-    const sortedChatMessageInfoItems = [];
-    for (let i = 0; i < rawMessageResults.length; i++) {
-      sortedChatMessageInfoItems.push(
-        uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
+      // By the nature of using messageListData and passing in
+      // the desired translatedMessageResults as additional
+      // messages, we will have duplicate ChatMessageInfoItems.
+      const uniqueChatMessageInfoItemsMap = new Map();
+      chatMessageInfoItems.forEach(
+        item =>
+          item.messageInfo &&
+          item.messageInfo.id &&
+          uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
       );
-    }
 
-    return sortedChatMessageInfoItems.filter(Boolean);
-  }, [chatMessageInfos, rawMessageResults, threadInfo]);
+      // Push the items in the order they appear in the rawMessageResults
+      // since the messages fetched from the server are already sorted
+      // in the order of pin_time (newest first).
+      const sortedChatMessageInfoItems = [];
+      for (let i = 0; i < rawMessageResults.length; i++) {
+        sortedChatMessageInfoItems.push(
+          uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
+        );
+      }
+
+      return sortedChatMessageInfoItems.filter(Boolean);
+    }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const measureCallback = React.useCallback(
     (listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>) => {
       setMeasuredMessages(listDataWithHeights);
     },
     [],
   );
 
   React.useEffect(() => {
     measureMessages(
       sortedUniqueChatMessageInfoItems,
       threadInfo,
       measureCallback,
     );
   }, [
     measureCallback,
     measureMessages,
     sortedUniqueChatMessageInfoItems,
     threadInfo,
   ]);
 
   const onLayout = React.useCallback(() => {
     scrollViewContainerRef.current?.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
 
         setMessageVerticalBounds({ height, y: pageY });
       },
     );
   }, []);
 
   const messageResultsToDisplay = React.useMemo(
     () =>
       measuredMessages.map(item => {
         invariant(item.itemType !== 'loader', 'should not be loader');
 
         return (
           <MessageResult
             key={item.messageInfo.id}
             item={item}
             threadInfo={threadInfo}
             navigation={navigation}
             route={route}
             messageVerticalBounds={messageVerticalBounds}
             scrollable={false}
           />
         );
       }),
     [measuredMessages, threadInfo, navigation, route, messageVerticalBounds],
   );
 
   return (
     <View
       ref={scrollViewContainerRef}
       onLayout={onLayout}
       style={styles.scrollViewContainer}
     >
       <ScrollView>{messageResultsToDisplay}</ScrollView>
     </View>
   );
 }
 
 const unboundStyles = {
   scrollViewContainer: {
     flex: 1,
   },
 };
 
 export default MessageResultsScreen;
diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js
index b11cfc028..72192b595 100644
--- a/native/chat/reaction-message-utils.js
+++ b/native/chat/reaction-message-utils.js
@@ -1,204 +1,207 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useSendReactionMessage,
   sendReactionMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawReactionMessageInfo } from 'lib/types/messages/reaction.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { cloneError } from 'lib/utils/errors.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
 import Alert from '../utils/alert.js';
 
 function useSendReaction(
   messageID: ?string,
   localID: string,
   threadID: string,
   reactions: ReactionInfo,
 ): (reaction: string) => mixed {
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const callSendReactionMessage = useSendReactionMessage();
   const dispatchActionPromise = useDispatchActionPromise();
 
   return React.useCallback(
     reaction => {
       if (!messageID) {
         return;
       }
 
       invariant(viewerID, 'viewerID should be set');
 
       const viewerReacted = reactions[reaction]
         ? reactions[reaction].viewerReacted
         : false;
       const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
 
       const reactionMessagePromise = (async () => {
         try {
           const result = await callSendReactionMessage({
             threadID,
             localID,
             targetMessageID: messageID,
             reaction,
             action,
           });
           return {
             localID,
             serverID: result.id,
             threadID,
             time: result.time,
             interface: result.interface,
           };
         } catch (e) {
           Alert.alert(
             'Couldn’t send the reaction',
             'Please try again later',
             [{ text: 'OK' }],
             {
               cancelable: true,
             },
           );
 
           const copy = cloneError(e);
           copy.localID = localID;
           copy.threadID = threadID;
           throw copy;
         }
       })();
 
       const startingPayload: RawReactionMessageInfo = {
         type: messageTypes.REACTION,
         threadID,
         localID,
         creatorID: viewerID,
         time: Date.now(),
         targetMessageID: messageID,
         reaction,
         action,
       };
 
       dispatchActionPromise(
         sendReactionMessageActionTypes,
         reactionMessagePromise,
         undefined,
         startingPayload,
       );
     },
     [
       messageID,
       viewerID,
       reactions,
       threadID,
       localID,
       dispatchActionPromise,
       callSendReactionMessage,
     ],
   );
 }
 
 type ReactionSelectionPopoverPositionArgs = {
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +margin: ?number,
 };
 
+type WritableContainerStyle = {
+  position: 'absolute',
+  left?: number,
+  right?: number,
+  bottom?: number,
+  top?: number,
+  ...
+};
+type ContainerStyle = $ReadOnly<WritableContainerStyle>;
+
 type ReactionSelectionPopoverPosition = {
-  +containerStyle: {
-    +position: 'absolute',
-    +left?: number,
-    +right?: number,
-    +bottom?: number,
-    +top?: number,
-    ...
-  },
+  +containerStyle: ContainerStyle,
   +popoverLocation: 'above' | 'below',
 };
 function useReactionSelectionPopoverPosition({
   initialCoordinates,
   verticalBounds,
   margin,
 }: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition {
   const calculatedMargin = getCalculatedMargin(margin);
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const popoverLocation: 'above' | 'below' = (() => {
     const { y, height } = initialCoordinates;
     const contentTop = y;
     const contentBottom = y + height;
     const boundsTop = verticalBounds.y;
     const boundsBottom = verticalBounds.y + verticalBounds.height;
 
     const fullHeight =
       reactionSelectionPopoverDimensions.height + calculatedMargin;
 
     if (
       contentBottom + fullHeight > boundsBottom &&
       contentTop - fullHeight > boundsTop
     ) {
       return 'above';
     }
 
     return 'below';
   })();
 
   const containerStyle = React.useMemo(() => {
     const { x, width, height } = initialCoordinates;
 
-    const style = {};
-
-    style.position = 'absolute';
+    const style: WritableContainerStyle = {
+      position: 'absolute',
+    };
 
     const extraLeftSpace = x;
     const extraRightSpace = windowWidth - width - x;
     if (extraLeftSpace < extraRightSpace) {
       style.left = 0;
     } else {
       style.right = 0;
     }
 
     if (popoverLocation === 'above') {
       style.bottom = height + calculatedMargin / 2;
     } else {
       style.top = height + calculatedMargin / 2;
     }
 
     return style;
   }, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]);
   return React.useMemo(
     () => ({
       popoverLocation,
       containerStyle,
     }),
     [popoverLocation, containerStyle],
   );
 }
 
 function getCalculatedMargin(margin: ?number): number {
   return margin ?? 16;
 }
 
 const reactionSelectionPopoverDimensions = {
   height: 56,
   width: 316,
 };
 
 export {
   useSendReaction,
   useReactionSelectionPopoverPosition,
   getCalculatedMargin,
   reactionSelectionPopoverDimensions,
 };
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
index c5cf7a235..d3887e2f6 100644
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -1,233 +1,233 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 
 import { messageKey } from 'lib/shared/message-utils.js';
 import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils.js';
 
 import { inlineEngagementCenterStyle } from './chat-constants.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import { InlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils.js';
 import { ChatContext } from '../chat/chat-context.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import { fixedTooltipHeight } from '../tooltip/tooltip.react.js';
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import { AnimatedView } from '../types/styles.js';
 
 type Props = {
   ...React.ElementConfig<typeof View>,
   +item: ChatRobotextMessageInfoItemWithHeight,
   +navigation:
     | ChatNavigationProp<'MessageList'>
     | AppNavigationProp<'TogglePinModal'>
     | ChatNavigationProp<'MessageResultsScreen'>
     | ChatNavigationProp<'MessageSearch'>,
   +route:
     | NavigationRoute<'MessageList'>
     | NavigationRoute<'TogglePinModal'>
     | NavigationRoute<'MessageResultsScreen'>
     | NavigationRoute<'MessageSearch'>,
   +focused: boolean,
   +toggleFocus: (messageKey: string) => void,
   +verticalBounds: ?VerticalBounds,
 };
 function RobotextMessage(props: Props): React.Node {
   const {
     item,
     navigation,
     route,
     focused,
     toggleFocus,
     verticalBounds,
     ...viewProps
   } = props;
 
   let timestamp = null;
   if (focused || item.startsConversation) {
     timestamp = (
       <Timestamp time={item.messageInfo.time} display="lowContrast" />
     );
   }
 
   const styles = useStyles(unboundStyles);
   let inlineEngagement = null;
   if (item.threadCreatedFromMessage || Object.keys(item.reactions).length > 0) {
     inlineEngagement = (
       <View style={styles.sidebar}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={item.threadInfo}
           sidebarThreadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           positioning="center"
         />
       </View>
     );
   }
 
   const chatContext = React.useContext(ChatContext);
   const keyboardState = React.useContext(KeyboardContext);
   const key = messageKey(item.messageInfo);
   const onPress = React.useCallback(() => {
     const didDismiss =
       keyboardState && keyboardState.dismissKeyboardIfShowing();
     if (!didDismiss) {
       toggleFocus(key);
     }
   }, [keyboardState, toggleFocus, key]);
 
   const overlayContext = React.useContext(OverlayContext);
   const viewRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     item.threadInfo,
     item.messageInfo,
   );
 
   const visibleEntryIDs = React.useMemo(() => {
     const result = [];
 
     if (item.threadCreatedFromMessage || canCreateSidebarFromMessage) {
       result.push('sidebar');
     }
 
     return result;
   }, [item.threadCreatedFromMessage, canCreateSidebarFromMessage]);
 
   const openRobotextTooltipModal = React.useCallback(
     (x, y, width, height, pageX, pageY) => {
       invariant(
         verticalBounds,
         'verticalBounds should be present in openRobotextTooltipModal',
       );
       const coordinates = { x: pageX, y: pageY, width, height };
 
       const messageTop = pageY;
       const messageBottom = pageY + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const belowMargin = 20;
       const belowSpace = fixedTooltipHeight + belowMargin;
       const { isViewer } = item.messageInfo.creator;
       const aboveMargin = isViewer ? 30 : 50;
       const aboveSpace = fixedTooltipHeight + aboveMargin;
 
       let margin = 0;
       if (
         messageBottom + belowSpace > boundsBottom &&
         messageTop - aboveSpace > boundsTop
       ) {
         margin = aboveMargin;
       }
 
       const currentInputBarHeight =
         chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0;
 
       props.navigation.navigate<'RobotextMessageTooltipModal'>({
         name: RobotextMessageTooltipModalRouteName,
         params: {
           presentedFrom: props.route.key,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs,
           tooltipLocation: 'fixed',
           margin,
           item,
           chatInputBarHeight: currentInputBarHeight,
         },
         key: getMessageTooltipKey(item),
       });
     },
     [
       item,
       props.navigation,
       props.route.key,
       verticalBounds,
       visibleEntryIDs,
       chatContext,
     ],
   );
 
   const onLongPress = React.useCallback(() => {
     if (keyboardState && keyboardState.dismissKeyboardIfShowing()) {
       return;
     }
 
     if (visibleEntryIDs.length === 0) {
       return;
     }
 
     if (!viewRef.current || !verticalBounds) {
       return;
     }
 
     if (!focused) {
       toggleFocus(messageKey(item.messageInfo));
     }
 
     invariant(overlayContext, 'RobotextMessage should have OverlayContext');
     overlayContext.setScrollBlockingModalStatus('open');
     viewRef.current?.measure(openRobotextTooltipModal);
   }, [
     focused,
     item,
     keyboardState,
     overlayContext,
     toggleFocus,
     verticalBounds,
     viewRef,
     visibleEntryIDs,
     openRobotextTooltipModal,
   ]);
 
   const onLayout = React.useCallback(() => {}, []);
 
   const contentAndHeaderOpacity = useContentAndHeaderOpacity(item);
 
-  const viewStyle = {};
+  const viewStyle: { height?: number } = {};
   if (!__DEV__) {
     // We don't force view height in dev mode because we
     // want to measure it in Message to see if it's correct
     viewStyle.height = item.contentHeight;
   }
 
   return (
     <View {...viewProps}>
       <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
         {timestamp}
       </AnimatedView>
       <View onLayout={onLayout} ref={viewRef} style={viewStyle}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <InnerRobotextMessage
             item={item}
             onPress={onPress}
             onLongPress={onLongPress}
           />
         </AnimatedView>
         {inlineEngagement}
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   sidebar: {
     marginTop: inlineEngagementCenterStyle.topOffset,
     marginBottom: -inlineEngagementCenterStyle.topOffset,
     alignSelf: 'center',
   },
 };
 
 export { RobotextMessage };
diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js
index 4b3b0c49c..ef702c774 100644
--- a/native/chat/settings/thread-settings-description.react.js
+++ b/native/chat/settings/thread-settings-description.react.js
@@ -1,323 +1,323 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
 } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadInfo,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import SaveSettingButton from './save-setting-button.react.js';
 import {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryFooter,
 } from './thread-settings-category.react.js';
 import Button from '../../components/button.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import TextInput from '../../components/text-input.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
 import type {
   LayoutEvent,
   ContentSizeChangeEvent,
 } from '../../types/react-native.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   addDescriptionButton: {
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   addDescriptionText: {
     color: 'panelForegroundTertiaryLabel',
     flex: 1,
     fontSize: 16,
   },
   editIcon: {
     color: 'panelForegroundTertiaryLabel',
     paddingLeft: 10,
     textAlign: 'right',
   },
   outlineCategory: {
     backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
     borderRadius: 1,
     borderStyle: 'dashed',
     borderWidth: 1,
     marginLeft: -1,
     marginRight: -1,
   },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 4,
   },
   text: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +descriptionEditValue: ?string,
   +setDescriptionEditValue: (value: ?string, callback?: () => void) => void,
   +descriptionTextHeight: ?number,
   +setDescriptionTextHeight: (number: number) => void,
   +canChangeSettings: boolean,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: typeof unboundStyles,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 class ThreadSettingsDescription extends React.PureComponent<Props> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
 
   render() {
     if (
       this.props.descriptionEditValue !== null &&
       this.props.descriptionEditValue !== undefined
     ) {
-      const textInputStyle = {};
+      const textInputStyle: { height?: number } = {};
       if (
         this.props.descriptionTextHeight !== undefined &&
         this.props.descriptionTextHeight !== null
       ) {
         textInputStyle.height = this.props.descriptionTextHeight;
       }
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <TextInput
               style={[this.props.styles.text, textInputStyle]}
               value={this.props.descriptionEditValue}
               onChangeText={this.props.setDescriptionEditValue}
               multiline={true}
               autoFocus={true}
               selectTextOnFocus={true}
               onBlur={this.onSubmit}
               editable={this.props.loadingStatus !== 'loading'}
               onContentSizeChange={this.onTextInputContentSizeChange}
               ref={this.textInputRef}
               selectionColor={`#${this.props.threadInfo.color}`}
             />
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     if (this.props.threadInfo.description) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <Text style={this.props.styles.text} onLayout={this.onLayoutText}>
               {this.props.threadInfo.description}
             </Text>
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     const canEditThreadDescription = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_THREAD_DESCRIPTION,
     );
     const { panelIosHighlightUnderlay } = this.props.colors;
     if (canEditThreadDescription) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="outline" title="Description" />
           <View style={this.props.styles.outlineCategory}>
             <Button
               onPress={this.onPressEdit}
               style={this.props.styles.addDescriptionButton}
               iosFormat="highlight"
               iosHighlightUnderlayColor={panelIosHighlightUnderlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.addDescriptionText}>
                 Add a description...
               </Text>
               <SWMansionIcon
                 name="edit-1"
                 size={20}
                 style={this.props.styles.editIcon}
               />
             </Button>
           </View>
           <ThreadSettingsCategoryFooter type="outline" />
         </View>
       );
     }
 
     return null;
   }
 
   renderButton() {
     if (this.props.loadingStatus === 'loading') {
       return (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       this.props.descriptionEditValue === null ||
       this.props.descriptionEditValue === undefined
     ) {
       return (
         <EditSettingButton
           onPress={this.onPressEdit}
           canChangeSettings={this.props.canChangeSettings}
         />
       );
     }
     return <SaveSettingButton onPress={this.onSubmit} />;
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof BaseTextInput>) => {
     this.textInput = textInput;
   };
 
   onLayoutText = (event: LayoutEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.layout.height);
   };
 
   onTextInputContentSizeChange = (event: ContentSizeChangeEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.contentSize.height);
   };
 
   onPressEdit = () => {
     this.props.setDescriptionEditValue(this.props.threadInfo.description);
   };
 
   onSubmit = () => {
     invariant(
       this.props.descriptionEditValue !== null &&
         this.props.descriptionEditValue !== undefined,
       'should be set',
     );
     const description = this.props.descriptionEditValue.trim();
 
     if (description === this.props.threadInfo.description) {
       this.props.setDescriptionEditValue(null);
       return;
     }
 
     const editDescriptionPromise = this.editDescription(description);
     const action = changeThreadSettingsActionTypes.started;
     const threadID = this.props.threadInfo.id;
 
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       editDescriptionPromise,
       {
         customKeyName: `${action}:${threadID}:description`,
       },
     );
     editDescriptionPromise.then(() => {
       this.props.setDescriptionEditValue(null);
     });
   };
 
   async editDescription(newDescription: string) {
     try {
       return await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: { description: newDescription },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     this.props.setDescriptionEditValue(
       this.props.threadInfo.description,
       () => {
         invariant(this.textInput, 'textInput should be set');
         this.textInput.focus();
       },
     );
   };
 }
 
 const ConnectedThreadSettingsDescription: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsDescription(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:description`,
       ),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
     return (
       <ThreadSettingsDescription
         {...props}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedThreadSettingsDescription;
diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js
index 4af47879b..79a1dd6b7 100644
--- a/native/chat/settings/thread-settings-push-notifs.react.js
+++ b/native/chat/settings/thread-settings-push-notifs.react.js
@@ -1,197 +1,197 @@
 // @flow
 
 import * as React from 'react';
 import { View, Switch, TouchableOpacity, Platform } from 'react-native';
 import Linking from 'react-native/Libraries/Linking/Linking.js';
 
 import {
   updateSubscriptionActionTypes,
   useUpdateSubscription,
 } from 'lib/actions/user-actions.js';
 import { deviceTokenSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   SubscriptionUpdateRequest,
   SubscriptionUpdateResult,
 } from 'lib/types/subscription-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
 import {
   useDispatchActionPromise,
   extractKeyserverIDFromID,
 } from 'lib/utils/action-utils.js';
 
 import SingleLine from '../../components/single-line.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import { CommAndroidNotifications } from '../../push/android.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   currentValue: {
     alignItems: 'flex-end',
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     flex: 1,
   },
   row: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 3,
   },
   infoIcon: {
     paddingRight: 20,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +styles: typeof unboundStyles,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +hasPushPermissions: boolean,
   +updateSubscription: (
     subscriptionUpdate: SubscriptionUpdateRequest,
   ) => Promise<SubscriptionUpdateResult>,
 };
 type State = {
   +currentValue: boolean,
 };
 class ThreadSettingsPushNotifs extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       currentValue: props.threadInfo.currentUser.subscription.pushNotifs,
     };
   }
 
   render() {
     const componentLabel = 'Push notifs';
-    let notificationsSettingsLinkingIcon = undefined;
+    let notificationsSettingsLinkingIcon: React.Node = undefined;
     if (!this.props.hasPushPermissions) {
       notificationsSettingsLinkingIcon = (
         <TouchableOpacity
           onPress={this.onNotificationsSettingsLinkingIconPress}
         >
           <View style={this.props.styles.infoIcon}>
             <SWMansionIcon name="info-circle" size={25} color="gray" />
           </View>
         </TouchableOpacity>
       );
     }
     return (
       <View style={this.props.styles.row}>
         <SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
           {componentLabel}
         </SingleLine>
         {notificationsSettingsLinkingIcon}
         <View style={this.props.styles.currentValue}>
           <Switch
             value={this.state.currentValue}
             onValueChange={this.onValueChange}
             disabled={!this.props.hasPushPermissions}
           />
         </View>
       </View>
     );
   }
 
   onValueChange = (value: boolean) => {
     this.setState({ currentValue: value });
     this.props.dispatchActionPromise(
       updateSubscriptionActionTypes,
       this.props.updateSubscription({
         threadID: this.props.threadInfo.id,
         updatedFields: {
           pushNotifs: value,
         },
       }),
     );
   };
 
   onNotificationsSettingsLinkingIconPress = async () => {
     let platformRequestsPermission;
     if (Platform.OS !== 'android') {
       platformRequestsPermission = true;
     } else {
       platformRequestsPermission =
         await CommAndroidNotifications.canRequestNotificationsPermissionFromUser();
     }
 
     const alertTitle = platformRequestsPermission
       ? 'Need notif permissions'
       : 'Unable to initialize notifs';
     const notificationsSettingsPath =
       Platform.OS === 'ios'
         ? 'Settings App → Notifications → Comm'
         : 'Settings → Apps → Comm → Notifications';
 
     let alertMessage;
     if (platformRequestsPermission && this.state.currentValue) {
       alertMessage =
         'Notifs for this chat are enabled, but cannot be delivered ' +
         'to this device because you haven’t granted notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else if (platformRequestsPermission) {
       alertMessage =
         'In order to enable push notifs for this chat, ' +
         'you need to first grant notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else {
       alertMessage =
         'Please check your network connection, make sure Google Play ' +
         'services are installed and enabled, and confirm that your Google ' +
         'Play credentials are valid in the Google Play Store.';
     }
     Alert.alert(alertTitle, alertMessage, [
       {
         text: 'Go to settings',
         onPress: () => Linking.openSettings(),
       },
       {
         text: 'Cancel',
         style: 'cancel',
       },
     ]);
   };
 }
 
 const ConnectedThreadSettingsPushNotifs: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsPushNotifs(
     props: BaseProps,
   ) {
     const keyserverID = extractKeyserverIDFromID(props.threadInfo.id);
     const deviceToken = useSelector(deviceTokenSelector(keyserverID));
     const hasPushPermissions =
       deviceToken !== null && deviceToken !== undefined;
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateSubscription = useUpdateSubscription();
     return (
       <ThreadSettingsPushNotifs
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateSubscription={callUpdateSubscription}
         hasPushPermissions={hasPushPermissions}
       />
     );
   });
 
 export default ConnectedThreadSettingsPushNotifs;
diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
index 1f461a01d..ae25e7eba 100644
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -1,429 +1,429 @@
 // @flow
 
 import type { IconProps } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import {
   PanGestureHandler,
   type PanGestureEvent,
 } from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedGestureHandler,
   useSharedValue,
   useAnimatedStyle,
   runOnJS,
   withSpring,
   interpolate,
   cancelAnimation,
   Extrapolate,
   type SharedValue,
 } from 'react-native-reanimated';
 import tinycolor from 'tinycolor2';
 
 import { useMessageListScreenWidth } from './composed-message-width.js';
 import CommIcon from '../components/comm-icon.react.js';
 import { colors } from '../themes/colors.js';
 import type { ViewStyle } from '../types/styles.js';
 
 const primaryThreshold = 40;
 const secondaryThreshold = 120;
 
 const panGestureHandlerActiveOffsetX = [-4, 4];
 const panGestureHandlerFailOffsetY = [-5, 5];
 
 function dividePastDistance(value, distance, factor) {
   'worklet';
   const absValue = Math.abs(value);
   if (absValue < distance) {
     return value;
   }
   const absFactor = value >= 0 ? 1 : -1;
   return absFactor * (distance + (absValue - distance) / factor);
 }
 
 function makeSpringConfig(velocity) {
   'worklet';
   return {
     stiffness: 257.1370588235294,
     damping: 19.003038357561845,
     mass: 1,
     overshootClamping: true,
     restDisplacementThreshold: 0.001,
     restSpeedThreshold: 0.001,
     velocity,
   };
 }
 
 function interpolateOpacityForViewerPrimarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [-20, -5], [1, 0], Extrapolate.CLAMP);
 }
 function interpolateOpacityForNonViewerPrimarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [5, 20], [0, 1], Extrapolate.CLAMP);
 }
 function interpolateTranslateXForViewerSecondarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [-130, -120, -60, 0], [-130, -120, -5, 20]);
 }
 function interpolateTranslateXForNonViewerSecondarySnake(translateX) {
   'worklet';
   return interpolate(translateX, [0, 80, 120, 130], [0, 30, 120, 130]);
 }
 
 type SwipeSnakeProps<IconGlyphs: string> = {
   +isViewer: boolean,
   +translateX: SharedValue<number>,
   +color: string,
   +children: React.Element<React.ComponentType<IconProps<IconGlyphs>>>,
   +opacityInterpolator?: number => number, // must be worklet
   +translateXInterpolator?: number => number, // must be worklet
 };
 function SwipeSnake<IconGlyphs: string>(
   props: SwipeSnakeProps<IconGlyphs>,
 ): React.Node {
   const { translateX, isViewer, opacityInterpolator, translateXInterpolator } =
     props;
   const transformStyle = useAnimatedStyle(() => {
     const opacity = opacityInterpolator
       ? opacityInterpolator(translateX.value)
       : undefined;
     const translate = translateXInterpolator
       ? translateXInterpolator(translateX.value)
       : translateX.value;
     return {
       transform: [
         {
           translateX: translate,
         },
       ],
       opacity,
     };
   }, [isViewer, translateXInterpolator, opacityInterpolator]);
 
   const animationPosition = isViewer ? styles.right0 : styles.left0;
   const animationContainerStyle = React.useMemo(() => {
     return [styles.animationContainer, animationPosition];
   }, [animationPosition]);
 
   const iconPosition = isViewer ? styles.left0 : styles.right0;
   const swipeSnakeContainerStyle = React.useMemo(() => {
     return [styles.swipeSnakeContainer, transformStyle, iconPosition];
   }, [transformStyle, iconPosition]);
 
   const iconAlign = isViewer ? styles.alignStart : styles.alignEnd;
   const screenWidth = useMessageListScreenWidth();
   const { color } = props;
   const swipeSnakeStyle = React.useMemo(() => {
     return [
       styles.swipeSnake,
       iconAlign,
       {
         width: screenWidth,
         backgroundColor: color,
       },
     ];
   }, [iconAlign, screenWidth, color]);
 
   const { children } = props;
   const iconColor = tinycolor(color).isDark()
     ? colors.dark.listForegroundLabel
     : colors.light.listForegroundLabel;
   const coloredIcon = React.useMemo(
     () =>
       React.cloneElement(children, {
         color: iconColor,
       }),
     [children, iconColor],
   );
 
   const swipeSnake = React.useMemo(
     () => (
       <View style={animationContainerStyle}>
         <Animated.View style={swipeSnakeContainerStyle}>
           <View style={swipeSnakeStyle}>{coloredIcon}</View>
         </Animated.View>
       </View>
     ),
     [
       animationContainerStyle,
       coloredIcon,
       swipeSnakeContainerStyle,
       swipeSnakeStyle,
     ],
   );
 
   return swipeSnake;
 }
 
 type Props = {
   +triggerReply?: () => mixed,
   +triggerSidebar?: () => mixed,
   +isViewer: boolean,
   +contentStyle: ViewStyle,
   +threadColor: string,
   +children: React.Node,
 };
 function SwipeableMessage(props: Props): React.Node {
   const { isViewer, triggerReply, triggerSidebar } = props;
   const secondaryActionExists = triggerReply && triggerSidebar;
 
   const onPassPrimaryThreshold = React.useCallback(() => {
     const impactStrength = secondaryActionExists
       ? Haptics.ImpactFeedbackStyle.Medium
       : Haptics.ImpactFeedbackStyle.Heavy;
     Haptics.impactAsync(impactStrength);
   }, [secondaryActionExists]);
   const onPassSecondaryThreshold = React.useCallback(() => {
     if (secondaryActionExists) {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
     }
   }, [secondaryActionExists]);
 
   const primaryAction = React.useCallback(() => {
     if (triggerReply) {
       triggerReply();
     } else if (triggerSidebar) {
       triggerSidebar();
     }
   }, [triggerReply, triggerSidebar]);
   const secondaryAction = React.useCallback(() => {
     if (triggerReply && triggerSidebar) {
       triggerSidebar();
     }
   }, [triggerReply, triggerSidebar]);
 
   const translateX = useSharedValue(0);
   const swipeEvent = useAnimatedGestureHandler<PanGestureEvent>(
     {
       onStart: (
         event /*: PanGestureEvent */,
         ctx /*: { [string]: mixed } */,
       ) => {
         ctx.translationAtStart = translateX.value;
         cancelAnimation(translateX.value);
       },
       onActive: (
         event /*: PanGestureEvent */,
         ctx /*: { [string]: mixed } */,
       ) => {
         const { translationAtStart } = ctx;
         invariant(
           typeof translationAtStart === 'number',
           'translationAtStart should be number',
         );
         const translationX = translationAtStart + event.translationX;
         const baseActiveTranslation = isViewer
           ? Math.min(translationX, 0)
           : Math.max(translationX, 0);
         translateX.value = dividePastDistance(
           baseActiveTranslation,
           primaryThreshold,
           2,
         );
 
         const absValue = Math.abs(translateX.value);
         const pastPrimaryThreshold = absValue >= primaryThreshold;
         if (pastPrimaryThreshold && !ctx.prevPastPrimaryThreshold) {
           runOnJS(onPassPrimaryThreshold)();
         }
         ctx.prevPastPrimaryThreshold = pastPrimaryThreshold;
 
         const pastSecondaryThreshold = absValue >= secondaryThreshold;
         if (pastSecondaryThreshold && !ctx.prevPastSecondaryThreshold) {
           runOnJS(onPassSecondaryThreshold)();
         }
         ctx.prevPastSecondaryThreshold = pastSecondaryThreshold;
       },
       onEnd: (event /*: PanGestureEvent */) => {
         const absValue = Math.abs(translateX.value);
         if (absValue >= secondaryThreshold && secondaryActionExists) {
           runOnJS(secondaryAction)();
         } else if (absValue >= primaryThreshold) {
           runOnJS(primaryAction)();
         }
 
         translateX.value = withSpring(0, makeSpringConfig(event.velocityX));
       },
     },
     [
       isViewer,
       onPassPrimaryThreshold,
       onPassSecondaryThreshold,
       primaryAction,
       secondaryAction,
       secondaryActionExists,
     ],
   );
 
   const transformContentStyle = useAnimatedStyle(
     () => ({
       transform: [{ translateX: translateX.value }],
     }),
     [],
   );
 
   const { contentStyle, children } = props;
 
   const panGestureHandlerStyle = React.useMemo(
     () => [contentStyle, transformContentStyle],
     [contentStyle, transformContentStyle],
   );
 
   const threadColor = `#${props.threadColor}`;
   const tinyThreadColor = tinycolor(threadColor);
 
   const replyIcon = React.useMemo(
     () => <CommIcon name="reply-filled" size={14} />,
     [],
   );
   const replySwipeSnake = React.useMemo(
     () => (
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={threadColor}
         opacityInterpolator={
           isViewer
             ? interpolateOpacityForViewerPrimarySnake
             : interpolateOpacityForNonViewerPrimarySnake
         }
         key="reply"
       >
         {replyIcon}
       </SwipeSnake>
     ),
     [isViewer, replyIcon, threadColor, translateX],
   );
 
   const sidebarIcon = React.useMemo(
     () => <CommIcon name="sidebar-filled" size={16} />,
     [],
   );
   const sidebarSwipeSnakeWithReplySwipeSnake = React.useMemo(
     () => (
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={tinyThreadColor
           .darken(tinyThreadColor.isDark() ? 10 : 20)
           .toString()}
         translateXInterpolator={
           isViewer
             ? interpolateTranslateXForViewerSecondarySnake
             : interpolateTranslateXForNonViewerSecondarySnake
         }
         key="sidebar"
       >
         {sidebarIcon}
       </SwipeSnake>
     ),
     [isViewer, sidebarIcon, tinyThreadColor, translateX],
   );
 
   const sidebarSwipeSnakeWithoutReplySwipeSnake = React.useMemo(
     () => (
       <SwipeSnake
         isViewer={isViewer}
         translateX={translateX}
         color={threadColor}
         opacityInterpolator={
           isViewer
             ? interpolateOpacityForViewerPrimarySnake
             : interpolateOpacityForNonViewerPrimarySnake
         }
         key="sidebar"
       >
         {sidebarIcon}
       </SwipeSnake>
     ),
     [isViewer, sidebarIcon, threadColor, translateX],
   );
 
   const panGestureHandler = React.useMemo(
     () => (
       <PanGestureHandler
         maxPointers={1}
         activeOffsetX={panGestureHandlerActiveOffsetX}
         onGestureEvent={swipeEvent}
         failOffsetX={isViewer ? 5 : -5}
         failOffsetY={panGestureHandlerFailOffsetY}
         key="gesture"
       >
         <Animated.View style={panGestureHandlerStyle}>{children}</Animated.View>
       </PanGestureHandler>
     ),
     [children, isViewer, panGestureHandlerStyle, swipeEvent],
   );
 
   const swipeableMessage = React.useMemo(() => {
     if (!triggerReply && !triggerSidebar) {
       return (
         <PanGestureHandler enabled={false}>
           <Animated.View style={contentStyle}>{children}</Animated.View>
         </PanGestureHandler>
       );
     }
-    const snakes = [];
+    const snakes: Array<React.Node> = [];
     if (triggerReply) {
       snakes.push(replySwipeSnake);
     }
     if (triggerReply && triggerSidebar) {
       snakes.push(sidebarSwipeSnakeWithReplySwipeSnake);
     } else if (triggerSidebar) {
       snakes.push(sidebarSwipeSnakeWithoutReplySwipeSnake);
     }
     snakes.push(panGestureHandler);
     return snakes;
   }, [
     children,
     contentStyle,
     panGestureHandler,
     replySwipeSnake,
     sidebarSwipeSnakeWithReplySwipeSnake,
     sidebarSwipeSnakeWithoutReplySwipeSnake,
     triggerReply,
     triggerSidebar,
   ]);
 
   return swipeableMessage;
 }
 
 const styles = {
   swipeSnakeContainer: {
     marginHorizontal: 20,
     justifyContent: 'center',
     position: 'absolute',
     top: 0,
     bottom: 0,
   },
   animationContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
   },
   swipeSnake: {
     paddingHorizontal: 15,
     flex: 1,
     borderRadius: 25,
     height: 30,
     justifyContent: 'center',
     maxHeight: 50,
   },
   left0: {
     left: 0,
   },
   right0: {
     right: 0,
   },
   alignStart: {
     alignItems: 'flex-start',
   },
   alignEnd: {
     alignItems: 'flex-end',
   },
 };
 
 export default SwipeableMessage;
diff --git a/native/components/feature-flags-provider.react.js b/native/components/feature-flags-provider.react.js
index 1c0bb90ab..e419d87a9 100644
--- a/native/components/feature-flags-provider.react.js
+++ b/native/components/feature-flags-provider.react.js
@@ -1,119 +1,119 @@
 // @flow
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as React from 'react';
 import { Platform } from 'react-native';
 
 import { useIsCurrentUserStaff } from 'lib/shared/staff-utils.js';
 import { fetchFeatureFlags } from 'lib/utils/feature-flags-utils.js';
 import sleep from 'lib/utils/sleep.js';
 
 import { codeVersion } from '../redux/persist.js';
 
 type FeatureFlagsConfiguration = {
   +[feature: string]: boolean,
 };
 
 type FeatureFlagsContextType = {
   +configuration: FeatureFlagsConfiguration,
   +loadedFromService: boolean,
 };
 
 const defaultContext = {
   configuration: {},
   loadedFromService: false,
 };
 
 const FeatureFlagsContext: React.Context<FeatureFlagsContextType> =
   React.createContext<FeatureFlagsContextType>(defaultContext);
 
 const featureFlagsStorageKey = 'FeatureFlags';
 
 type Props = {
   +children: React.Node,
 };
 function FeatureFlagsProvider(props: Props): React.Node {
   const { children } = props;
   const isStaff = useIsCurrentUserStaff();
 
   const [featuresConfig, setFeaturesConfig] = React.useState(defaultContext);
 
   React.useEffect(() => {
     (async () => {
       if (featuresConfig.loadedFromService) {
         return;
       }
 
       const persistedFeaturesConfig = await AsyncStorage.getItem(
         featureFlagsStorageKey,
       );
       if (!persistedFeaturesConfig) {
         return;
       }
 
       setFeaturesConfig(config =>
         config.loadedFromService
           ? config
           : {
               configuration: JSON.parse(persistedFeaturesConfig),
               loadedFromService: false,
             },
       );
     })();
   }, [featuresConfig.loadedFromService]);
 
   React.useEffect(() => {
     (async () => {
       try {
         const config = await tryMultipleTimes(
           () => fetchFeatureFlags(Platform.OS, isStaff, codeVersion),
           3,
           5000,
         );
 
-        const configuration = {};
+        const configuration: { [string]: true } = {};
         for (const feature of config.enabledFeatures) {
           configuration[feature] = true;
         }
         setFeaturesConfig({
           configuration,
           loadedFromService: true,
         });
         await AsyncStorage.setItem(
           featureFlagsStorageKey,
           JSON.stringify(configuration),
         );
       } catch (e) {
         console.error('Feature flag retrieval failed:', e);
       }
     })();
   }, [isStaff]);
 
   return (
     <FeatureFlagsContext.Provider value={featuresConfig}>
       {children}
     </FeatureFlagsContext.Provider>
   );
 }
 
 async function tryMultipleTimes<T>(
   f: () => Promise<T>,
   numberOfTries: number,
   delay: number,
 ): Promise<T> {
   let lastError;
   while (numberOfTries > 0) {
     try {
       return await f();
     } catch (e) {
       --numberOfTries;
       lastError = e;
       if (numberOfTries > 0) {
         await sleep(delay);
       }
     }
   }
   throw lastError;
 }
 
 export { FeatureFlagsContext, FeatureFlagsProvider, featureFlagsStorageKey };
diff --git a/native/components/node-height-measurer.react.js b/native/components/node-height-measurer.react.js
index b2fdad1dc..ff6c6ccf1 100644
--- a/native/components/node-height-measurer.react.js
+++ b/native/components/node-height-measurer.react.js
@@ -1,517 +1,518 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet, PixelRatio } from 'react-native';
 import shallowequal from 'shallowequal';
 
 import type { Shape } from 'lib/types/core.js';
 
 import {
   addLifecycleListener,
   getCurrentLifecycleState,
 } from '../lifecycle/lifecycle.js';
 import type { LayoutEvent, EventSubscription } from '../types/react-native.js';
 
 const measureBatchSize = 50;
 
 type MergedItemPair<Item, MergedItem> = {
   +item: Item,
   +mergedItem: MergedItem,
 };
 
 type Props<Item, MergedItem> = {
   // What we want to render
   +listData: ?$ReadOnlyArray<Item>,
   // Every item should have an ID. We use this ID to cache the result of calling
   // mergeItemWithHeight below, and only update it if the input item changes,
   // mergeItemWithHeight changes, or any extra props we get passed change
   +itemToID: Item => string,
   // Only measurable items should return a measureKey.
   // Falsey keys won't get measured, but will still get passed through
   // mergeItemWithHeight with height undefined
   // Make sure that if an item's height changes, its measure key does too!
   +itemToMeasureKey: Item => ?string,
   // The "dummy" is the component whose height we will be measuring
   // We will only call this with items for which itemToMeasureKey returns truthy
   +itemToDummy: Item => React.Element<mixed>,
   // Once we have the height, we need to merge it into the item
   +mergeItemWithHeight: (item: Item, height: ?number) => MergedItem,
   // We'll pass our results here when we're done
   +allHeightsMeasured: (
     items: $ReadOnlyArray<MergedItem>,
     measuredHeights: $ReadOnlyMap<string, number>,
   ) => mixed,
   +initialMeasuredHeights?: ?$ReadOnlyMap<string, number>,
   ...
 };
-type State<Item, MergedItem> = {
+type WritableState<Item, MergedItem> = {
   // These are the dummies currently being rendered
-  +currentlyMeasuring: $ReadOnlyArray<{
+  currentlyMeasuring: $ReadOnlyArray<{
     +measureKey: string,
     +dummy: React.Element<any>,
   }>,
   // When certain parameters change we need to remeasure everything. In order to
   // avoid considering any onLayouts that got queued before we issued the
   // remeasure, we increment the "iteration" and only count onLayouts with the
   // right value
-  +iteration: number,
+  iteration: number,
   // We cache the measured heights here, keyed by measure key
-  +measuredHeights: Map<string, number>,
+  measuredHeights: Map<string, number>,
   // We cache the results of calling mergeItemWithHeight on measured items after
   // measuring their height, keyed by ID
-  +measurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
+  measurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
   // We cache the results of calling mergeItemWithHeight on items that aren't
   // measurable (eg. itemToKey reurns falsey), keyed by ID
-  +unmeasurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
+  unmeasurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
 };
+type State<Item, MergedItem> = $ReadOnly<WritableState<Item, MergedItem>>;
 class NodeHeightMeasurer<Item, MergedItem> extends React.PureComponent<
   Props<Item, MergedItem>,
   State<Item, MergedItem>,
 > {
   containerWidth: ?number;
   // we track font scale when native app state changes
   appLifecycleSubscription: ?EventSubscription;
   currentLifecycleState: ?string = getCurrentLifecycleState();
   currentFontScale: number = PixelRatio.getFontScale();
 
   constructor(props: Props<Item, MergedItem>) {
     super(props);
 
     this.state = NodeHeightMeasurer.createInitialStateFromProps(props);
   }
 
   static createInitialStateFromProps<InnerItem, InnerMergedItem>(
     props: Props<InnerItem, InnerMergedItem>,
   ): State<InnerItem, InnerMergedItem> {
     const {
       listData,
       itemToID,
       itemToMeasureKey,
       mergeItemWithHeight,
       initialMeasuredHeights,
     } = props;
     const unmeasurableItems = new Map();
     const measurableItems = new Map();
     const measuredHeights = initialMeasuredHeights
       ? new Map(initialMeasuredHeights)
       : new Map();
 
     if (listData) {
       for (const item of listData) {
         const measureKey = itemToMeasureKey(item);
         if (measureKey === null || measureKey === undefined) {
           const mergedItem = mergeItemWithHeight(item, undefined);
           unmeasurableItems.set(itemToID(item), { item, mergedItem });
           continue;
         }
         const height = measuredHeights.get(measureKey);
         if (height === undefined) {
           continue;
         }
         const mergedItem = mergeItemWithHeight(item, height);
         measurableItems.set(itemToID(item), { item, mergedItem });
       }
     }
 
     return {
       currentlyMeasuring: [],
       iteration: 0,
       measuredHeights,
       measurableItems,
       unmeasurableItems,
     };
   }
 
   static getDerivedStateFromProps<InnerItem, InnerMergedItem>(
     props: Props<InnerItem, InnerMergedItem>,
     state: State<InnerItem, InnerMergedItem>,
   ): ?Shape<State<InnerItem, InnerMergedItem>> {
     return NodeHeightMeasurer.getPossibleStateUpdateForNextBatch<
       InnerItem,
       InnerMergedItem,
     >(props, state);
   }
 
   static getPossibleStateUpdateForNextBatch<InnerItem, InnerMergedItem>(
     props: Props<InnerItem, InnerMergedItem>,
     state: State<InnerItem, InnerMergedItem>,
   ): ?Shape<State<InnerItem, InnerMergedItem>> {
     const { currentlyMeasuring, measuredHeights } = state;
 
     let stillMeasuring = false;
     for (const { measureKey } of currentlyMeasuring) {
       const height = measuredHeights.get(measureKey);
       if (height === null || height === undefined) {
         stillMeasuring = true;
         break;
       }
     }
     if (stillMeasuring) {
       return null;
     }
 
     const { listData, itemToMeasureKey, itemToDummy } = props;
 
     const toMeasure = new Map();
     if (listData) {
       for (const item of listData) {
         const measureKey = itemToMeasureKey(item);
         if (measureKey === null || measureKey === undefined) {
           continue;
         }
         const height = measuredHeights.get(measureKey);
         if (height !== null && height !== undefined) {
           continue;
         }
         const dummy = itemToDummy(item);
         toMeasure.set(measureKey, dummy);
         if (toMeasure.size === measureBatchSize) {
           break;
         }
       }
     }
     if (currentlyMeasuring.length === 0 && toMeasure.size === 0) {
       return null;
     }
 
     const nextCurrentlyMeasuring = [];
     for (const [measureKey, dummy] of toMeasure) {
       nextCurrentlyMeasuring.push({ measureKey, dummy });
     }
     return {
       currentlyMeasuring: nextCurrentlyMeasuring,
       measuredHeights: new Map(measuredHeights),
     };
   }
 
   possiblyIssueNewBatch() {
     const stateUpdate = NodeHeightMeasurer.getPossibleStateUpdateForNextBatch(
       this.props,
       this.state,
     );
     if (stateUpdate) {
       this.setState(stateUpdate);
     }
   }
 
   handleAppStateChange: (nextState: ?string) => void = nextState => {
     if (!nextState || nextState === 'unknown') {
       return;
     }
 
     const lastState = this.currentLifecycleState;
     this.currentLifecycleState = nextState;
 
     // detect font scale changes only when app enters foreground
     if (lastState !== 'background' || nextState !== 'active') {
       return;
     }
 
     const lastScale = this.currentFontScale;
     this.currentFontScale = PixelRatio.getFontScale();
 
     if (lastScale !== this.currentFontScale) {
       // recreate initial state to trigger full remeasurement
       this.setState(NodeHeightMeasurer.createInitialStateFromProps(this.props));
     }
   };
 
   componentDidMount() {
     this.appLifecycleSubscription = addLifecycleListener(
       this.handleAppStateChange,
     );
     this.triggerCallback(
       this.state.measurableItems,
       this.state.unmeasurableItems,
       this.state.measuredHeights,
       false,
     );
   }
 
   componentWillUnmount() {
     if (this.appLifecycleSubscription) {
       this.appLifecycleSubscription.remove();
     }
   }
 
   triggerCallback(
     measurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
     unmeasurableItems: Map<string, MergedItemPair<Item, MergedItem>>,
     measuredHeights: Map<string, number>,
     mustTrigger: boolean,
   ) {
     const { listData, itemToID, itemToMeasureKey, allHeightsMeasured } =
       this.props;
 
     if (!listData) {
       return;
     }
 
     const result = [];
     for (const item of listData) {
       const id = itemToID(item);
       const measureKey = itemToMeasureKey(item);
       if (measureKey !== null && measureKey !== undefined) {
         const measurableItem = measurableItems.get(id);
         if (!measurableItem && !mustTrigger) {
           return;
         }
         invariant(
           measurableItem,
           `currentlyMeasuring empty but no result for ${id}`,
         );
         result.push(measurableItem.mergedItem);
       } else {
         const unmeasurableItem = unmeasurableItems.get(id);
         if (!unmeasurableItem && !mustTrigger) {
           return;
         }
         invariant(
           unmeasurableItem,
           `currentlyMeasuring empty but no result for ${id}`,
         );
         result.push(unmeasurableItem.mergedItem);
       }
     }
 
     allHeightsMeasured(result, new Map(measuredHeights));
   }
 
   componentDidUpdate(
     prevProps: Props<Item, MergedItem>,
     prevState: State<Item, MergedItem>,
   ) {
     const {
       listData,
       itemToID,
       itemToMeasureKey,
       itemToDummy,
       mergeItemWithHeight,
       allHeightsMeasured,
       ...rest
     } = this.props;
     const {
       listData: prevListData,
       itemToID: prevItemToID,
       itemToMeasureKey: prevItemToMeasureKey,
       itemToDummy: prevItemToDummy,
       mergeItemWithHeight: prevMergeItemWithHeight,
       allHeightsMeasured: prevAllHeightsMeasured,
       ...prevRest
     } = prevProps;
     const restShallowEqual = shallowequal(rest, prevRest);
     const measurementJustCompleted =
       this.state.currentlyMeasuring.length === 0 &&
       prevState.currentlyMeasuring.length !== 0;
 
     let incrementIteration = false;
     const nextMeasuredHeights = new Map(this.state.measuredHeights);
     let measuredHeightsChanged = false;
     const nextMeasurableItems = new Map(this.state.measurableItems);
     let measurableItemsChanged = false;
     const nextUnmeasurableItems = new Map(this.state.unmeasurableItems);
     let unmeasurableItemsChanged = false;
 
     if (
       itemToMeasureKey !== prevItemToMeasureKey ||
       itemToDummy !== prevItemToDummy
     ) {
       incrementIteration = true;
       nextMeasuredHeights.clear();
       measuredHeightsChanged = true;
     }
     if (
       itemToID !== prevItemToID ||
       itemToMeasureKey !== prevItemToMeasureKey ||
       itemToDummy !== prevItemToDummy ||
       mergeItemWithHeight !== prevMergeItemWithHeight ||
       !restShallowEqual
     ) {
       if (nextMeasurableItems.size > 0) {
         nextMeasurableItems.clear();
         measurableItemsChanged = true;
       }
     }
     if (
       itemToID !== prevItemToID ||
       itemToMeasureKey !== prevItemToMeasureKey ||
       mergeItemWithHeight !== prevMergeItemWithHeight ||
       !restShallowEqual
     ) {
       if (nextUnmeasurableItems.size > 0) {
         nextUnmeasurableItems.clear();
         unmeasurableItemsChanged = true;
       }
     }
 
     if (
       measurementJustCompleted ||
       listData !== prevListData ||
       measuredHeightsChanged ||
       measurableItemsChanged ||
       unmeasurableItemsChanged
     ) {
       const currentMeasurableItems = new Map();
       const currentUnmeasurableItems = new Map();
       if (listData) {
         for (const item of listData) {
           const id = itemToID(item);
           const measureKey = itemToMeasureKey(item);
           if (measureKey !== null && measureKey !== undefined) {
             currentMeasurableItems.set(id, item);
           } else {
             currentUnmeasurableItems.set(id, item);
           }
         }
       }
 
       for (const [id, { item }] of nextMeasurableItems) {
         const currentItem = currentMeasurableItems.get(id);
         if (!currentItem) {
           measurableItemsChanged = true;
           nextMeasurableItems.delete(id);
         } else if (currentItem !== item) {
           measurableItemsChanged = true;
           const measureKey = itemToMeasureKey(currentItem);
           if (measureKey === null || measureKey === undefined) {
             nextMeasurableItems.delete(id);
             continue;
           }
           const height = nextMeasuredHeights.get(measureKey);
           if (height === null || height === undefined) {
             nextMeasurableItems.delete(id);
             continue;
           }
           const mergedItem = mergeItemWithHeight(currentItem, height);
           nextMeasurableItems.set(id, { item: currentItem, mergedItem });
         }
       }
       for (const [id, item] of currentMeasurableItems) {
         if (nextMeasurableItems.has(id)) {
           continue;
         }
         const measureKey = itemToMeasureKey(item);
         if (measureKey === null || measureKey === undefined) {
           continue;
         }
         const height = nextMeasuredHeights.get(measureKey);
         if (height === null || height === undefined) {
           continue;
         }
         const mergedItem = mergeItemWithHeight(item, height);
         nextMeasurableItems.set(id, { item, mergedItem });
         measurableItemsChanged = true;
       }
 
       for (const [id, { item }] of nextUnmeasurableItems) {
         const currentItem = currentUnmeasurableItems.get(id);
         if (!currentItem) {
           unmeasurableItemsChanged = true;
           nextUnmeasurableItems.delete(id);
         } else if (currentItem !== item) {
           unmeasurableItemsChanged = true;
           const measureKey = itemToMeasureKey(currentItem);
           if (measureKey !== null && measureKey !== undefined) {
             nextUnmeasurableItems.delete(id);
             continue;
           }
           const mergedItem = mergeItemWithHeight(currentItem, undefined);
           nextUnmeasurableItems.set(id, { item: currentItem, mergedItem });
         }
       }
       for (const [id, item] of currentUnmeasurableItems) {
         if (nextUnmeasurableItems.has(id)) {
           continue;
         }
         const measureKey = itemToMeasureKey(item);
         if (measureKey !== null && measureKey !== undefined) {
           continue;
         }
         const mergedItem = mergeItemWithHeight(item, undefined);
         nextUnmeasurableItems.set(id, { item, mergedItem });
         unmeasurableItemsChanged = true;
       }
     }
 
-    const stateUpdate = {};
+    const stateUpdate: Partial<WritableState<Item, MergedItem>> = {};
     if (incrementIteration) {
       stateUpdate.iteration = this.state.iteration + 1;
     }
     if (measuredHeightsChanged) {
       stateUpdate.measuredHeights = nextMeasuredHeights;
     }
     if (measurableItemsChanged) {
       stateUpdate.measurableItems = nextMeasurableItems;
     }
     if (unmeasurableItemsChanged) {
       stateUpdate.unmeasurableItems = nextUnmeasurableItems;
     }
     if (Object.keys(stateUpdate).length > 0) {
       this.setState(stateUpdate);
     }
 
     if (measurementJustCompleted || !shallowequal(this.props, prevProps)) {
       this.triggerCallback(
         nextMeasurableItems,
         nextUnmeasurableItems,
         nextMeasuredHeights,
         measurementJustCompleted,
       );
     }
   }
 
   onContainerLayout: (event: LayoutEvent) => void = event => {
     const { width, height } = event.nativeEvent.layout;
     if (width > height) {
       // We currently only use NodeHeightMeasurer on interfaces that are
       // portrait-locked. If we expand beyond that we'll need to rethink this
       return;
     }
     if (this.containerWidth === undefined) {
       this.containerWidth = width;
     } else if (this.containerWidth !== width) {
       this.containerWidth = width;
       this.setState(innerPrevState => ({
         iteration: innerPrevState.iteration + 1,
         measuredHeights: new Map(),
         measurableItems: new Map(),
       }));
     }
   };
 
   onDummyLayout(measureKey: string, iteration: number, event: LayoutEvent) {
     if (iteration !== this.state.iteration) {
       return;
     }
     const { height } = event.nativeEvent.layout;
     this.state.measuredHeights.set(measureKey, height);
     this.possiblyIssueNewBatch();
   }
 
   render(): React.Node {
     const { currentlyMeasuring, iteration } = this.state;
     const dummies = currentlyMeasuring.map(({ measureKey, dummy }) => {
       const { children } = dummy.props;
       const style = [dummy.props.style, styles.dummy];
       const onLayout = event =>
         this.onDummyLayout(measureKey, iteration, event);
       const node = React.cloneElement(dummy, {
         style,
         onLayout,
         children,
       });
       return <React.Fragment key={measureKey}>{node}</React.Fragment>;
     });
     return <View onLayout={this.onContainerLayout}>{dummies}</View>;
   }
 }
 
 const styles = StyleSheet.create({
   dummy: {
     opacity: 0,
     position: 'absolute',
   },
 });
 
 export default NodeHeightMeasurer;
diff --git a/native/components/thread-ancestors-label.react.js b/native/components/thread-ancestors-label.react.js
index 0351ac4b3..fdad66d2b 100644
--- a/native/components/thread-ancestors-label.react.js
+++ b/native/components/thread-ancestors-label.react.js
@@ -1,80 +1,80 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome5.js';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
 
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 function ThreadAncestorsLabel(props: Props): React.Node {
   const { threadInfo } = props;
   const { unread } = threadInfo.currentUser;
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const ancestorThreads = useAncestorThreads(threadInfo);
   const resolvedAncestorThreads = useResolvedThreadInfos(ancestorThreads);
 
   const chevronIcon = React.useMemo(
     () => (
       <Icon
         name="chevron-right"
         size={8}
         color={colors.listForegroundTertiaryLabel}
       />
     ),
     [colors.listForegroundTertiaryLabel],
   );
 
   const ancestorPath = React.useMemo(() => {
-    const path = [];
+    const path: Array<React.Node> = [];
     for (const thread of resolvedAncestorThreads) {
       path.push(<Text key={thread.id}>{thread.uiName}</Text>);
       path.push(
         <View key={`>${thread.id}`} style={styles.chevron}>
           {chevronIcon}
         </View>,
       );
     }
     path.pop();
     return path;
   }, [resolvedAncestorThreads, chevronIcon, styles.chevron]);
 
   const ancestorPathStyle = React.useMemo(() => {
     return unread ? [styles.pathText, styles.unread] : styles.pathText;
   }, [styles.pathText, styles.unread, unread]);
 
   const threadAncestorsLabel = React.useMemo(
     () => (
       <Text numberOfLines={1} style={ancestorPathStyle}>
         {ancestorPath}
       </Text>
     ),
     [ancestorPath, ancestorPathStyle],
   );
 
   return threadAncestorsLabel;
 }
 
 const unboundStyles = {
   pathText: {
     opacity: 0.8,
     fontSize: 12,
     color: 'listForegroundTertiaryLabel',
   },
   unread: {
     color: 'listForegroundLabel',
   },
   chevron: {
     paddingHorizontal: 3,
   },
 };
 
 export default ThreadAncestorsLabel;
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 35b9e32db..67e6d2c82 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1746 +1,1750 @@
 // @flow
 
 import * as FileSystem from 'expo-file-system';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useSendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   SendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   useBlobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
 } from 'lib/actions/upload-actions.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { pathFromURI, replaceExtension } from 'lib/media/file-utils.js';
 import {
   isLocalUploadID,
   getNextLocalUploadID,
 } from 'lib/media/media-utils.js';
 import { videoDurationLimit } from 'lib/media/video-utils.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   createMediaMessageInfo,
   useNextLocalID,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
   MediaMissionStep,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import { getMediaMessageServerDBContentsFromMedia } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   type ClientMediaMissionReportCreationRequest,
   reportTypes,
 } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import type {
   CallServerEndpointOptions,
   CallServerEndpointResponse,
 } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { values } from 'lib/utils/objects.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 
 import {
   type EditInputBarMessageParameters,
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
+  type MessagePendingUploads,
 } from './input-state.js';
 import { encryptMedia } from '../media/encryption-utils.js';
 import { disposeTempFile } from '../media/file-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import { useSelector } from '../redux/redux-utils.js';
 import blobServiceUploadHandler from '../utils/blob-service-upload.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type MediaIDs =
   | { +type: 'photo', +localMediaID: string }
   | { +type: 'video', +localMediaID: string, +localThumbnailID: string };
 type UploadFileInput = {
   +selection: NativeMediaSelection,
   +ids: MediaIDs,
 };
-type CompletedUploads = { +[localMessageID: string]: ?Set<string> };
+type WritableCompletedUploads = {
+  [localMessageID: string]: ?$ReadOnlySet<string>,
+};
+type CompletedUploads = $ReadOnly<WritableCompletedUploads>;
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +nextLocalID: string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +ongoingMessageCreation: boolean,
   +hasWiFi: boolean,
   +mediaReportsEnabled: boolean,
   +calendarQuery: () => CalendarQuery,
   +dispatch: Dispatch,
   +staffCanSee: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +sendMultimediaMessage: (
     input: SendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs = new Map();
   editInputBarCallbacks: Array<
     (params: EditInputBarMessageParameters) => void,
   > = [];
   scrollToMessageCallbacks: Array<(messageID: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
   pendingThreadUpdateHandlers = new Map<
     string,
     (ThreadInfo | MinimallyEncodedThreadInfo) => mixed,
   >();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs = new Set<string>();
 
   static getCompletedUploads(props: Props, state: State): CompletedUploads {
-    const completedUploads = {};
+    const completedUploads: WritableCompletedUploads = {};
     for (const localMessageID in state.pendingUploads) {
       const messagePendingUploads = state.pendingUploads[localMessageID];
       const rawMessageInfo = props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
 
       let allUploadsComplete = true;
       const completedUploadIDs = new Set(Object.keys(messagePendingUploads));
       for (const singleMedia of rawMessageInfo.media) {
         if (isLocalUploadID(singleMedia.id)) {
           allUploadsComplete = false;
           completedUploadIDs.delete(singleMedia.id);
         }
       }
 
       if (allUploadsComplete) {
         completedUploads[localMessageID] = null;
       } else if (completedUploadIDs.size > 0) {
         completedUploads[localMessageID] = completedUploadIDs;
       }
     }
     return completedUploads;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const currentlyComplete = InputStateContainer.getCompletedUploads(
       this.props,
       this.state,
     );
     const previouslyComplete = InputStateContainer.getCompletedUploads(
       prevProps,
       prevState,
     );
 
-    const newPendingUploads = {};
+    const newPendingUploads: PendingMultimediaUploads = {};
     let pendingUploadsChanged = false;
     const readyMessageIDs = [];
     for (const localMessageID in this.state.pendingUploads) {
       const messagePendingUploads = this.state.pendingUploads[localMessageID];
       const prevRawMessageInfo = prevProps.messageStoreMessages[localMessageID];
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       const completedUploadIDs = currentlyComplete[localMessageID];
       const previouslyCompletedUploadIDs = previouslyComplete[localMessageID];
 
       if (!rawMessageInfo && prevRawMessageInfo) {
         pendingUploadsChanged = true;
         continue;
       } else if (completedUploadIDs === null) {
         // All of this message's uploads have been completed
         newPendingUploads[localMessageID] = {};
         if (previouslyCompletedUploadIDs !== null) {
           readyMessageIDs.push(localMessageID);
           pendingUploadsChanged = true;
         }
         continue;
       } else if (!completedUploadIDs) {
         // Nothing has been completed
         newPendingUploads[localMessageID] = messagePendingUploads;
         continue;
       }
 
-      const newUploads = {};
+      const newUploads: MessagePendingUploads = {};
       let uploadsChanged = false;
       for (const localUploadID in messagePendingUploads) {
         if (!completedUploadIDs.has(localUploadID)) {
           newUploads[localUploadID] = messagePendingUploads[localUploadID];
         } else if (
           !previouslyCompletedUploadIDs ||
           !previouslyCompletedUploadIDs.has(localUploadID)
         ) {
           uploadsChanged = true;
         }
       }
 
       if (uploadsChanged) {
         pendingUploadsChanged = true;
         newPendingUploads[localMessageID] = newUploads;
       } else {
         newPendingUploads[localMessageID] = messagePendingUploads;
       }
     }
     if (pendingUploadsChanged) {
       this.setState({ pendingUploads: newPendingUploads });
     }
 
     for (const localMessageID of readyMessageIDs) {
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
       this.dispatchMultimediaMessageAction(rawMessageInfo);
     }
   }
 
   async dispatchMultimediaMessageAction(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaMessageContents = getMediaMessageServerDBContentsFromMedia(
       messageInfo.media,
     );
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaMessageContents,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   inputStateSelector = createSelector(
     (state: State) => state.pendingUploads,
     (pendingUploads: PendingMultimediaUploads) => ({
       pendingUploads,
       sendTextMessage: this.sendTextMessage,
       sendMultimediaMessage: this.sendMultimediaMessage,
       editInputMessage: this.editInputMessage,
       addEditInputMessageListener: this.addEditInputMessageListener,
       removeEditInputMessageListener: this.removeEditInputMessageListener,
       messageHasUploadFailure: this.messageHasUploadFailure,
       retryMessage: this.retryMessage,
       registerSendCallback: this.registerSendCallback,
       unregisterSendCallback: this.unregisterSendCallback,
       uploadInProgress: this.uploadInProgress,
       reportURIDisplayed: this.reportURIDisplayed,
       setPendingThreadUpdateHandler: this.setPendingThreadUpdateHandler,
       scrollToMessage: this.scrollToMessage,
       addScrollToMessageListener: this.addScrollToMessageListener,
       removeScrollToMessageListener: this.removeScrollToMessageListener,
     }),
   );
 
   scrollToMessage = (messageID: string) => {
     this.scrollToMessageCallbacks.forEach(callback => callback(messageID));
   };
 
   addScrollToMessageListener = (callback: (messageID: string) => void) => {
     this.scrollToMessageCallbacks.push(callback);
   };
 
   removeScrollToMessageListener = (
     callbackScrollToMessage: (messageID: string) => void,
   ) => {
     this.scrollToMessageCallbacks = this.scrollToMessageCallbacks.filter(
       candidate => candidate !== callbackScrollToMessage,
     );
   };
 
   uploadInProgress = () => {
     if (this.props.ongoingMessageCreation) {
       return true;
     }
     const { pendingUploads } = this.state;
     return values(pendingUploads).some(messagePendingUploads =>
       values(messagePendingUploads).some(upload => !upload.failed),
     );
   };
 
   sendTextMessage = async (
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         const pendingThreadUpdateHandler = this.pendingThreadUpdateHandlers.get(
           threadInfo.id,
         );
         pendingThreadUpdateHandler?.(threadInfo);
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
 
     // Branching to appease `flow`.
     const newThreadInfo = threadInfo.minimallyEncoded
       ? {
           ...threadInfo,
           id: newThreadID,
         }
       : {
           ...threadInfo,
           id: newThreadID,
         };
 
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   };
 
   startThreadCreation(
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage({
         threadID: messageInfo.threadID,
         localID,
         text: messageInfo.text,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   shouldEncryptMedia(
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   sendMultimediaMessage = async (
     selections: $ReadOnlyArray<NativeMediaSelection>,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
     const localMessageID = this.props.nextLocalID;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const uploadFileInputs = [],
-      media = [];
+      media: Array<Media> = [];
     for (const selection of selections) {
       const localMediaID = getNextLocalUploadID();
       let ids;
       if (
         selection.step === 'photo_library' ||
         selection.step === 'photo_capture' ||
         selection.step === 'photo_paste'
       ) {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'photo',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           thumbHash: null,
         });
         ids = { type: 'photo', localMediaID };
       }
       const localThumbnailID = getNextLocalUploadID();
       if (selection.step === 'video_library') {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'video',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           loop: false,
           thumbnailID: localThumbnailID,
           thumbnailURI: selection.uri,
           thumbnailThumbHash: null,
         });
         ids = { type: 'video', localMediaID, localThumbnailID };
       }
       invariant(ids, `unexpected MediaSelection ${selection.step}`);
       uploadFileInputs.push({ selection, ids });
     }
 
-    const pendingUploads = {};
+    const pendingUploads: MessagePendingUploads = {};
     for (const uploadFileInput of uploadFileInputs) {
       const { localMediaID } = uploadFileInput.ids;
       pendingUploads[localMediaID] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (uploadFileInput.ids.type === 'video') {
         const { localThumbnailID } = uploadFileInput.ids;
         pendingUploads[localThumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
 
     this.setState(
       prevState => {
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [localMessageID]: pendingUploads,
           },
         };
       },
       () => {
         const creatorID = this.props.viewerID;
         invariant(creatorID, 'need viewer ID in order to send a message');
         const messageInfo = createMediaMessageInfo(
           {
             localID: localMessageID,
             threadID: threadInfo.id,
             creatorID,
             media,
           },
           { forceMultimediaMessageType: this.shouldEncryptMedia(threadInfo) },
         );
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput, threadInfo),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ): Promise<?string> {
     const { ids, selection } = uploadFileInput;
     const { localMediaID } = ids;
     const start = selection.sendTime;
     const steps: Array<MediaMissionStep> = [selection];
-    let encryptionSteps = [];
+    let encryptionSteps: $ReadOnlyArray<MediaMissionStep> = [];
     let serverID;
     let userTime;
     let errorMessage;
-    let reportPromise;
+    let reportPromise: ?Promise<$ReadOnlyArray<MediaMissionStep>>;
     const filesToDispose = [];
 
     const onUploadFinished = async (result: MediaMissionResult) => {
       if (!this.props.mediaReportsEnabled) {
         return errorMessage;
       }
       if (reportPromise) {
         const finalSteps = await reportPromise;
         steps.push(...finalSteps);
         steps.push(...encryptionSteps);
       }
       const totalTime = Date.now() - start;
       userTime = userTime ? userTime : totalTime;
       this.queueMediaMissionReport(
         { localID: localMediaID, localMessageID, serverID },
         { steps, result, totalTime, userTime },
       );
       return errorMessage;
     };
     const onUploadFailed = (mediaID: string, message: string) => {
       errorMessage = message;
       this.handleUploadFailure(localMessageID, mediaID);
       userTime = Date.now() - start;
     };
 
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localMediaID, 'transcoding', percent);
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(selection, {
         hasWiFi: this.props.hasWiFi,
         finalFileHeaderCheck: this.props.staffCanSee,
         onTranscodingProgress,
       });
       reportPromise = processMediaReturn.reportPromise;
       const processResult = await processMediaReturn.resultPromise;
       if (!processResult.success) {
         const message =
           processResult.reason === 'video_too_long'
             ? `can't do vids longer than ${videoDurationLimit}min`
             : 'processing failed';
         onUploadFailed(localMediaID, message);
         return await onUploadFinished(processResult);
       }
       if (processResult.shouldDisposePath) {
         filesToDispose.push(processResult.shouldDisposePath);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     if (this.shouldEncryptMedia(threadInfo)) {
       const encryptionStart = Date.now();
       try {
         const { result: encryptionResult, ...encryptionReturn } =
           await encryptMedia(processedMedia);
         encryptionSteps = encryptionReturn.steps;
         if (!encryptionResult.success) {
           onUploadFailed(localMediaID, encryptionResult.reason);
           return await onUploadFinished(encryptionResult);
         }
         if (encryptionResult.shouldDisposePath) {
           filesToDispose.push(encryptionResult.shouldDisposePath);
         }
         processedMedia = encryptionResult;
       } catch (e) {
         onUploadFailed(localMediaID, 'encryption failed');
         return await onUploadFinished({
           success: false,
           reason: 'encryption_exception',
           time: Date.now() - encryptionStart,
           exceptionMessage: getMessageForException(e),
         });
       }
     }
 
     const { uploadURI, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       const uploadPromises = [];
       if (
         this.useBlobServiceUploads &&
         (processedMedia.mediaType === 'encrypted_photo' ||
           processedMedia.mediaType === 'encrypted_video')
       ) {
         uploadPromises.push(
           this.props.blobServiceUpload({
             uploadInput: {
               blobInput: {
                 type: 'uri',
                 uri: uploadURI,
                 filename: filename,
                 mimeType: mime,
               },
               blobHash: processedMedia.blobHash,
               encryptionKey: processedMedia.encryptionKey,
               dimensions: processedMedia.dimensions,
               thumbHash:
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             keyserverOrThreadID: threadInfo.id,
             callbacks: {
               blobServiceUploadHandler,
               onProgress: (percent: number) => {
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 );
               },
             },
           }),
         );
 
         if (processedMedia.mediaType === 'encrypted_video') {
           uploadPromises.push(
             this.props.blobServiceUpload({
               uploadInput: {
                 blobInput: {
                   type: 'uri',
                   uri: processedMedia.uploadThumbnailURI,
                   filename: replaceExtension(`thumb${filename}`, 'jpg'),
                   mimeType: 'image/jpeg',
                 },
                 blobHash: processedMedia.thumbnailBlobHash,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 loop: false,
                 dimensions: processedMedia.dimensions,
                 thumbHash: processedMedia.thumbHash,
               },
               keyserverOrThreadID: threadInfo.id,
               callbacks: {
                 blobServiceUploadHandler,
               },
             }),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       } else {
         uploadPromises.push(
           this.props.uploadMultimedia(
             { uri: uploadURI, name: filename, type: mime },
             {
               ...processedMedia.dimensions,
               loop:
                 processedMedia.mediaType === 'video' ||
                 processedMedia.mediaType === 'encrypted_video'
                   ? processedMedia.loop
                   : undefined,
               encryptionKey: processedMedia.encryptionKey,
               thumbHash:
                 processedMedia.mediaType === 'photo' ||
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             {
               onProgress: (percent: number) =>
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 ),
               uploadBlob: this.uploadBlob,
             },
           ),
         );
 
         if (
           processedMedia.mediaType === 'video' ||
           processedMedia.mediaType === 'encrypted_video'
         ) {
           uploadPromises.push(
             this.props.uploadMultimedia(
               {
                 uri: processedMedia.uploadThumbnailURI,
                 name: replaceExtension(`thumb${filename}`, 'jpg'),
                 type: 'image/jpeg',
               },
               {
                 ...processedMedia.dimensions,
                 loop: false,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 thumbHash: processedMedia.thumbHash,
               },
               {
                 uploadBlob: this.uploadBlob,
               },
             ),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       }
       mediaMissionResult = { success: true };
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       onUploadFailed(localMediaID, 'upload failed');
       mediaMissionResult = {
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       };
     }
 
     if (
       ((processedMedia.mediaType === 'photo' ||
         processedMedia.mediaType === 'encrypted_photo') &&
         uploadResult) ||
       ((processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video') &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { encryptionKey } = processedMedia;
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       const mediaSourcePayload =
         processedMedia.mediaType === 'encrypted_photo' ||
         processedMedia.mediaType === 'encrypted_video'
           ? {
               type: processedMedia.mediaType,
               blobURI: uri,
               encryptionKey,
             }
           : {
               type: uploadResult.mediaType,
               uri,
             };
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           ...mediaSourcePayload,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (
         processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video'
       ) {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         const { thumbnailEncryptionKey, thumbHash: thumbnailThumbHash } =
           processedMedia;
 
         if (processedMedia.mediaType === 'encrypted_video') {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailBlobURI: thumbnailURI,
               thumbnailEncryptionKey,
               thumbnailThumbHash,
             },
           };
         } else {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailURI,
               thumbnailThumbHash,
             },
           };
         }
       } else {
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbHash: processedMedia.thumbHash,
           },
         };
       }
 
       // When we dispatch this action, it updates Redux and triggers the
       // componentDidUpdate in this class. componentDidUpdate will handle
       // calling dispatchMultimediaMessageAction once all the uploads are
       // complete, and does not wait until this function concludes.
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: updateMediaPayload,
       });
       userTime = Date.now() - start;
     }
 
     const processSteps = await reportPromise;
     reportPromise = null;
     steps.push(...processSteps);
     steps.push(...encryptionSteps);
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: filename,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
       hasWiFi,
     });
 
     const cleanupPromises = [];
 
     if (filesToDispose.length > 0) {
       // If processMedia needed to do any transcoding before upload, we dispose
       // of the resultant temporary file here. Since the transcoded temporary
       // file is only used for upload, we can dispose of it after processMedia
       // (reportPromise) and the upload are complete
       filesToDispose.forEach(shouldDisposePath => {
         cleanupPromises.push(
           (async () => {
             const disposeStep = await disposeTempFile(shouldDisposePath);
             steps.push(disposeStep);
           })(),
         );
       });
     }
 
     // if there's a thumbnail we'll temporarily unlink it here
     // instead of in media-utils, will be changed in later diffs
     if (processedMedia.mediaType === 'video') {
       const { uploadThumbnailURI } = processedMedia;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: thumbnailPath } =
             await this.waitForCaptureURIUnload(uploadThumbnailURI);
           steps.push(...clearSteps);
           if (!thumbnailPath) {
             return;
           }
           const disposeStep = await disposeTempFile(thumbnailPath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     if (selection.captureTime || selection.step === 'photo_paste') {
       // If we are uploading a newly captured photo, we dispose of the original
       // file here. Note that we try to save photo captures to the camera roll
       // if we have permission. Even if we fail, this temporary file isn't
       // visible to the user, so there's no point in keeping it around. Since
       // the initial URI is used in rendering paths, we have to wait for it to
       // be replaced with the remote URI before we can dispose. Check out the
       // Multimedia component to see how the URIs get switched out.
       const captureURI = selection.uri;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: capturePath } =
             await this.waitForCaptureURIUnload(captureURI);
           steps.push(...clearSteps);
           if (!capturePath) {
             return;
           }
           const disposeStep = await disposeTempFile(capturePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     await Promise.all(cleanupPromises);
 
     return await onUploadFinished(mediaMissionResult);
   }
 
   setProgress(
     localMessageID: string,
     localUploadID: string,
     processingStep: MultimediaProcessingStep,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const pendingUploads = prevState.pendingUploads[localMessageID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newOutOfHundred = Math.floor(progressPercent * 100);
       const oldOutOfHundred = Math.floor(pendingUpload.progressPercent * 100);
       if (newOutOfHundred === oldOutOfHundred) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
           processingStep,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: newPendingUploads,
         },
       };
     });
   }
 
   uploadBlob = async (
     url: string,
     cookie: ?string,
     sessionID: ?string,
     input: { +[key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ): Promise<CallServerEndpointResponse> => {
     invariant(
       cookie &&
         input.multimedia &&
         Array.isArray(input.multimedia) &&
         input.multimedia.length === 1 &&
         input.multimedia[0] &&
         typeof input.multimedia[0] === 'object',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
     const { uri, name, type } = input.multimedia[0];
     invariant(
       typeof uri === 'string' &&
         typeof name === 'string' &&
         typeof type === 'string',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
 
-    const parameters = {};
+    const parameters: { [key: string]: mixed } = {};
     parameters.cookie = cookie;
     parameters.filename = name;
 
     for (const key in input) {
       if (
         key === 'multimedia' ||
         key === 'cookie' ||
         key === 'sessionID' ||
         key === 'filename'
       ) {
         continue;
       }
       const value = input[key];
       invariant(
         typeof value === 'string',
         'blobUpload calls can only handle string values for non-multimedia keys',
       );
       parameters[key] = value;
     }
 
     let path = uri;
     if (Platform.OS === 'android') {
       const resolvedPath = pathFromURI(uri);
       if (resolvedPath) {
         path = resolvedPath;
       }
     }
     const uploadTask = FileSystem.createUploadTask(
       url,
       path,
       {
         uploadType: FileSystem.FileSystemUploadType.MULTIPART,
         fieldName: 'multimedia',
         headers: {
           Accept: 'application/json',
         },
         parameters,
       },
       uploadProgress => {
         if (options && options.onProgress) {
           const { totalByteSent, totalBytesExpectedToSend } = uploadProgress;
           options.onProgress(totalByteSent / totalBytesExpectedToSend);
         }
       },
     );
     if (options && options.abortHandler) {
       options.abortHandler(() => uploadTask.cancelAsync());
     }
     try {
       const response = await uploadTask.uploadAsync();
       return JSON.parse(response.body);
     } catch (e) {
       throw new Error(
         `Failed to upload blob: ${
           getMessageForException(e) ?? 'unknown error'
         }`,
       );
     }
   };
 
   handleUploadFailure(localMessageID: string, localUploadID: string) {
     this.setState(prevState => {
       const uploads = prevState.pendingUploads[localMessageID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReport(
     ids: { localID: string, localMessageID: string, serverID: ?string },
     mediaMission: MediaMission,
   ) {
     const report: ClientMediaMissionReportCreationRequest = {
       type: reportTypes.MEDIA_MISSION,
       time: Date.now(),
       platformDetails: getConfig().platformDetails,
       mediaMission,
       uploadServerID: ids.serverID,
       uploadLocalID: ids.localID,
       messageLocalID: ids.localMessageID,
       id: generateReportID(),
     };
     this.props.dispatch({
       type: queueReportsActionType,
       payload: {
         reports: [report],
       },
     });
   }
 
   messageHasUploadFailure = (localMessageID: string) => {
     const pendingUploads = this.state.pendingUploads[localMessageID];
     if (!pendingUploads) {
       return false;
     }
     return values(pendingUploads).some(upload => upload.failed);
   };
 
   editInputMessage = (params: EditInputBarMessageParameters) => {
     this.editInputBarCallbacks.forEach(addEditInputBarCallback =>
       addEditInputBarCallback(params),
     );
   };
 
   addEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks.push(callbackEditInputBar);
   };
 
   removeEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks = this.editInputBarCallbacks.filter(
       candidate => candidate !== callbackEditInputBar,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
       parentThreadInfo,
     );
   };
 
   retryMultimediaMessage = async (
     rawMessageInfo: RawMultimediaMessageInfo,
     localMessageID: string,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => {
     const pendingUploads = this.state.pendingUploads[localMessageID] ?? {};
 
     const now = Date.now();
 
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const updateMedia = <T: Media>(media: $ReadOnlyArray<T>): T[] =>
       media.map(singleMedia => {
         invariant(
           singleMedia.type === 'photo' || singleMedia.type === 'video',
           'Retry selection must be unencrypted',
         );
 
         let updatedMedia = singleMedia;
 
         const oldMediaID = updatedMedia.id;
         if (
           // not complete
           isLocalUploadID(oldMediaID) &&
           // not still ongoing
           (!pendingUploads[oldMediaID] || pendingUploads[oldMediaID].failed)
         ) {
           // If we have an incomplete upload that isn't in pendingUploads, that
           // indicates the app has restarted. We'll reassign a new localID to
           // avoid collisions. Note that this isn't necessary for the message ID
           // since the localID reducer prevents collisions there
           const mediaID = pendingUploads[oldMediaID]
             ? oldMediaID
             : getNextLocalUploadID();
           if (updatedMedia.type === 'photo') {
             updatedMedia = {
               type: 'photo',
               ...updatedMedia,
               id: mediaID,
             };
           } else {
             updatedMedia = {
               type: 'video',
               ...updatedMedia,
               id: mediaID,
             };
           }
         }
 
         if (updatedMedia.type === 'video') {
           const oldThumbnailID = updatedMedia.thumbnailID;
           invariant(oldThumbnailID, 'oldThumbnailID not null or undefined');
           if (
             // not complete
             isLocalUploadID(oldThumbnailID) &&
             // not still ongoing
             (!pendingUploads[oldThumbnailID] ||
               pendingUploads[oldThumbnailID].failed)
           ) {
             const thumbnailID = pendingUploads[oldThumbnailID]
               ? oldThumbnailID
               : getNextLocalUploadID();
             updatedMedia = {
               ...updatedMedia,
               thumbnailID,
             };
           }
         }
 
         if (updatedMedia === singleMedia) {
           return singleMedia;
         }
 
         const oldSelection = updatedMedia.localMediaSelection;
         invariant(
           oldSelection,
           'localMediaSelection should be set on locally created Media',
         );
         const retries = oldSelection.retries ? oldSelection.retries + 1 : 1;
 
         // We switch for Flow
         let selection;
         if (oldSelection.step === 'photo_capture') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_library') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_paste') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else {
           selection = { ...oldSelection, sendTime: now, retries };
         }
 
         if (updatedMedia.type === 'photo') {
           return {
             type: 'photo',
             ...updatedMedia,
             localMediaSelection: selection,
           };
         }
         return {
           type: 'video',
           ...updatedMedia,
           localMediaSelection: selection,
         };
       });
 
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawMediaMessageInfo);
     } else if (rawMessageInfo.type === messageTypes.IMAGES) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawImagesMessageInfo);
     } else {
       invariant(false, `rawMessageInfo ${localMessageID} should be multimedia`);
     }
 
     const incompleteMedia: Media[] = [];
     for (const singleMedia of newRawMessageInfo.media) {
       if (isLocalUploadID(singleMedia.id)) {
         incompleteMedia.push(singleMedia);
       }
     }
     if (incompleteMedia.length === 0) {
       this.dispatchMultimediaMessageAction(newRawMessageInfo);
       this.setState(prevState => ({
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {},
         },
       }));
       return;
     }
 
     const retryMedia = incompleteMedia.filter(
       ({ id }) => !pendingUploads[id] || pendingUploads[id].failed,
     );
     if (retryMedia.length === 0) {
       // All media are already in the process of being uploaded
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     // We clear out the failed status on individual media here,
     // which makes the UI show pending status instead of error messages
     for (const singleMedia of retryMedia) {
       pendingUploads[singleMedia.id] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (singleMedia.type === 'video') {
         const { thumbnailID } = singleMedia;
         invariant(thumbnailID, 'thumbnailID not null or undefined');
         pendingUploads[thumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
     this.setState(prevState => ({
       pendingUploads: {
         ...prevState.pendingUploads,
         [localMessageID]: pendingUploads,
       },
     }));
 
     const uploadFileInputs = retryMedia.map(singleMedia => {
       invariant(
         singleMedia.localMediaSelection,
         'localMediaSelection should be set on locally created Media',
       );
 
       let ids;
       if (singleMedia.type === 'photo') {
         ids = { type: 'photo', localMediaID: singleMedia.id };
       } else {
         invariant(
           singleMedia.thumbnailID,
           'singleMedia.thumbnailID should be set for videos',
         );
         ids = {
           type: 'video',
           localMediaID: singleMedia.id,
           localThumbnailID: singleMedia.thumbnailID,
         };
       }
 
       return {
         selection: singleMedia.localMediaSelection,
         ids,
       };
     });
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   retryMessage = async (
     localMessageID: string,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo, parentThreadInfo);
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       await this.retryMultimediaMessage(
         rawMessageInfo,
         localMessageID,
         threadInfo,
       );
     }
   };
 
   registerSendCallback = (callback: () => void) => {
     this.sendCallbacks.push(callback);
   };
 
   unregisterSendCallback = (callback: () => void) => {
     this.sendCallbacks = this.sendCallbacks.filter(
       candidate => candidate !== callback,
     );
   };
 
   reportURIDisplayed = (uri: string, loaded: boolean) => {
     const prevActiveURI = this.activeURIs.get(uri);
     const curCount = prevActiveURI && prevActiveURI.count;
     const prevCount = curCount ? curCount : 0;
     const count = loaded ? prevCount + 1 : prevCount - 1;
     const prevOnClear = prevActiveURI && prevActiveURI.onClear;
     const onClear = prevOnClear ? prevOnClear : [];
     const activeURI = { count, onClear };
     if (count) {
       this.activeURIs.set(uri, activeURI);
       return;
     }
     this.activeURIs.delete(uri);
     for (const callback of onClear) {
       callback();
     }
   };
 
   waitForCaptureURIUnload(uri: string) {
     const start = Date.now();
     const path = pathFromURI(uri);
     if (!path) {
       return Promise.resolve({
         result: null,
         steps: [
           {
             step: 'wait_for_capture_uri_unload',
             success: false,
             time: Date.now() - start,
             uri,
           },
         ],
       });
     }
 
     const getResult = () => ({
       result: path,
       steps: [
         {
           step: 'wait_for_capture_uri_unload',
           success: true,
           time: Date.now() - start,
           uri,
         },
       ],
     });
 
     const activeURI = this.activeURIs.get(uri);
     if (!activeURI) {
       return Promise.resolve(getResult());
     }
 
     return new Promise(resolve => {
       const finish = () => resolve(getResult());
       const newActiveURI = {
         ...activeURI,
         onClear: [...activeURI.onClear, finish],
       };
       this.activeURIs.set(uri, newActiveURI);
     });
   }
 
   setPendingThreadUpdateHandler = (
     threadID: string,
     pendingThreadUpdateHandler: ?(
       ThreadInfo | MinimallyEncodedThreadInfo,
     ) => mixed,
   ) => {
     if (!pendingThreadUpdateHandler) {
       this.pendingThreadUpdateHandlers.delete(threadID);
     } else {
       this.pendingThreadUpdateHandlers.set(
         threadID,
         pendingThreadUpdateHandler,
       );
     }
   };
 
   render() {
     const inputState = this.inputStateSelector(this.state);
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const mediaCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendMultimediaMessageActionTypes,
 );
 const textCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendTextMessageActionTypes,
 );
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(
     props: BaseProps,
   ) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useNextLocalID();
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const ongoingMessageCreation = useSelector(
       state =>
         combineLoadingStatuses(
           mediaCreationLoadingStatusSelector(state),
           textCreationLoadingStatusSelector(state),
         ) === 'loading',
     );
     const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
     const calendarQuery = useCalendarQuery();
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callBlobServiceUpload = useBlobServiceUpload();
     const callSendMultimediaMessage = useSendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
     const callNewThread = useNewThread();
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         viewerID={viewerID}
         nextLocalID={nextLocalID}
         messageStoreMessages={messageStoreMessages}
         ongoingMessageCreation={ongoingMessageCreation}
         hasWiFi={hasWiFi}
         mediaReportsEnabled={mediaReportsEnabled}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         staffCanSee={staffCanSee}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/native/media/blob-utils.js b/native/media/blob-utils.js
index 20f7cd50b..9403097d8 100644
--- a/native/media/blob-utils.js
+++ b/native/media/blob-utils.js
@@ -1,149 +1,149 @@
 // @flow
 
 import base64 from 'base-64';
 import invariant from 'invariant';
 
 import {
   fileInfoFromData,
   bytesNeededForFileTypeCheck,
 } from 'lib/media/file-utils.js';
 import type {
   MediaMissionStep,
   MediaMissionFailure,
 } from 'lib/types/media-types.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 
 import { getFetchableURI } from './identifier-utils.js';
 
 function blobToDataURI(blob: Blob): Promise<string> {
   const fileReader = new FileReader();
   return new Promise((resolve, reject) => {
     fileReader.onerror = error => {
       fileReader.abort();
       reject(error);
     };
     fileReader.onload = () => {
       invariant(
         typeof fileReader.result === 'string',
         'FileReader.readAsDataURL should result in string',
       );
       resolve(fileReader.result);
     };
     fileReader.readAsDataURL(blob);
   });
 }
 
 const base64CharsNeeded = 4 * Math.ceil(bytesNeededForFileTypeCheck / 3);
 
 function dataURIToIntArray(dataURI: string): Uint8Array {
   const uri = dataURI.replace(/\r?\n/g, '');
 
   const firstComma = uri.indexOf(',');
   if (firstComma <= 4) {
     throw new TypeError('malformed data-URI');
   }
 
   const meta = uri.substring(5, firstComma).split(';');
   const base64Encoded = meta.some(metum => metum === 'base64');
 
   let data = unescape(uri.substr(firstComma + 1, base64CharsNeeded));
   if (base64Encoded) {
     data = base64.decode(data);
   }
 
   return stringToIntArray(data);
 }
 
 function stringToIntArray(str: string): Uint8Array {
   const array = new Uint8Array(str.length);
   for (let i = 0; i < str.length; i++) {
     array[i] = str.charCodeAt(i);
   }
   return array;
 }
 
 type FetchBlobResult = {
   success: true,
   base64: string,
   mime: string,
 };
 async function fetchBlob(inputURI: string): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: MediaMissionFailure | FetchBlobResult,
 }> {
   const uri = getFetchableURI(inputURI);
   const steps: Array<MediaMissionStep> = [];
 
   let blob, fetchExceptionMessage;
   const fetchStart = Date.now();
   try {
     const response = await fetch(uri);
     blob = await response.blob();
   } catch (e) {
     fetchExceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'fetch_blob',
     success: !!blob,
     exceptionMessage: fetchExceptionMessage,
     time: Date.now() - fetchStart,
     inputURI,
     uri,
     size: blob && blob.size,
     mime: blob && blob.type,
   });
   if (!blob) {
     return { result: { success: false, reason: 'fetch_failed' }, steps };
   }
 
   let dataURI, dataURIExceptionMessage;
   const dataURIStart = Date.now();
   try {
     dataURI = await blobToDataURI(blob);
   } catch (e) {
     dataURIExceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'data_uri_from_blob',
     success: !!dataURI,
     exceptionMessage: dataURIExceptionMessage,
     time: Date.now() - dataURIStart,
     first255Chars: dataURI && dataURI.substring(0, 255),
   });
   if (!dataURI) {
     return { result: { success: false, reason: 'data_uri_failed' }, steps };
   }
 
   const firstComma = dataURI.indexOf(',');
   invariant(firstComma > 4, 'malformed data-URI');
   const base64String = dataURI.substring(firstComma + 1);
 
-  let mime = blob.type;
+  let mime: ?string = blob.type;
   if (!mime) {
     let mimeCheckExceptionMessage;
     const mimeCheckStart = Date.now();
     try {
       const intArray = dataURIToIntArray(dataURI);
       ({ mime } = fileInfoFromData(intArray));
     } catch (e) {
       mimeCheckExceptionMessage = getMessageForException(e);
     }
     steps.push({
       step: 'mime_check',
       success: !!mime,
       exceptionMessage: mimeCheckExceptionMessage,
       time: Date.now() - mimeCheckStart,
       mime,
     });
   }
 
   if (!mime) {
     return {
       result: { success: false, reason: 'mime_check_failed', mime },
       steps,
     };
   }
   return { result: { success: true, base64: base64String, mime }, steps };
 }
 
 export { stringToIntArray, fetchBlob };
diff --git a/native/media/ffmpeg.js b/native/media/ffmpeg.js
index 6a09ffc92..04355220a 100644
--- a/native/media/ffmpeg.js
+++ b/native/media/ffmpeg.js
@@ -1,167 +1,167 @@
 // @flow
 
 import { RNFFmpeg, RNFFprobe, RNFFmpegConfig } from 'react-native-ffmpeg';
 
 import { getHasMultipleFramesProbeCommand } from 'lib/media/video-utils.js';
 import type {
   Dimensions,
   FFmpegStatistics,
   VideoInfo,
 } from 'lib/types/media-types.js';
 
 const maxSimultaneousCalls = {
   process: 1,
   probe: 1,
 };
 
 type CallCounter = typeof maxSimultaneousCalls;
 type QueuedCommandType = $Keys<CallCounter>;
 type QueuedCommand = {
   type: QueuedCommandType,
   runCommand: () => Promise<void>,
 };
 
 class FFmpeg {
   queue: QueuedCommand[] = [];
   currentCalls: CallCounter = { process: 0, probe: 0 };
 
   queueCommand<R>(
     type: QueuedCommandType,
     wrappedCommand: () => Promise<R>,
   ): Promise<R> {
     return new Promise((resolve, reject) => {
       const runCommand = async () => {
         try {
           const result = await wrappedCommand();
           this.currentCalls[type]--;
           this.possiblyRunCommands();
           resolve(result);
         } catch (e) {
           reject(e);
         }
       };
       this.queue.push({ type, runCommand });
       this.possiblyRunCommands();
     });
   }
 
   possiblyRunCommands() {
-    let openSlots = {};
+    let openSlots: { [string]: number } = {};
     for (const type in this.currentCalls) {
       const currentCalls = this.currentCalls[type];
       const maxCalls = maxSimultaneousCalls[type];
       const callsLeft = maxCalls - currentCalls;
       if (!callsLeft) {
         return;
       } else if (currentCalls) {
         openSlots = { [type]: callsLeft };
         break;
       } else {
         openSlots[type] = callsLeft;
       }
     }
 
     const toDefer = [],
       toRun = [];
     for (const command of this.queue) {
       const type: string = command.type;
       if (openSlots[type]) {
         openSlots = { [type]: openSlots[type] - 1 };
         this.currentCalls[type]++;
         toRun.push(command);
       } else {
         toDefer.push(command);
       }
     }
 
     this.queue = toDefer;
     toRun.forEach(({ runCommand }) => runCommand());
   }
 
   transcodeVideo(
     ffmpegCommand: string,
     inputVideoDuration: number,
     onTranscodingProgress?: (percent: number) => void,
   ): Promise<{ rc: number, lastStats: ?FFmpegStatistics }> {
     const duration = inputVideoDuration > 0 ? inputVideoDuration : 0.001;
     const wrappedCommand = async () => {
       RNFFmpegConfig.resetStatistics();
       let lastStats;
       if (onTranscodingProgress) {
         RNFFmpegConfig.enableStatisticsCallback(
           (statisticsData: FFmpegStatistics) => {
             lastStats = statisticsData;
             const { time } = statisticsData;
             onTranscodingProgress(time / 1000 / duration);
           },
         );
       }
       const ffmpegResult = await RNFFmpeg.execute(ffmpegCommand);
       return { ...ffmpegResult, lastStats };
     };
     return this.queueCommand('process', wrappedCommand);
   }
 
   generateThumbnail(videoPath: string, outputPath: string): Promise<number> {
     const wrappedCommand = () =>
       FFmpeg.innerGenerateThumbnail(videoPath, outputPath);
     return this.queueCommand('process', wrappedCommand);
   }
 
   static async innerGenerateThumbnail(
     videoPath: string,
     outputPath: string,
   ): Promise<number> {
     const thumbnailCommand = `-i ${videoPath} -frames 1 -f singlejpeg ${outputPath}`;
     const { rc } = await RNFFmpeg.execute(thumbnailCommand);
     return rc;
   }
 
   getVideoInfo(path: string): Promise<VideoInfo> {
     const wrappedCommand = () => FFmpeg.innerGetVideoInfo(path);
     return this.queueCommand('probe', wrappedCommand);
   }
 
   static async innerGetVideoInfo(path: string): Promise<VideoInfo> {
     const info = await RNFFprobe.getMediaInformation(path);
     const videoStreamInfo = FFmpeg.getVideoStreamInfo(info);
     const codec = videoStreamInfo?.codec;
     const dimensions = videoStreamInfo && videoStreamInfo.dimensions;
     const format = info.format.split(',');
     const duration = info.duration / 1000;
     return { codec, format, dimensions, duration };
   }
 
   static getVideoStreamInfo(
     info: Object,
   ): ?{ +codec: string, +dimensions: Dimensions } {
     if (!info.streams) {
       return null;
     }
     for (const stream of info.streams) {
       if (stream.type === 'video') {
         const codec: string = stream.codec;
         const width: number = stream.width;
         const height: number = stream.height;
         return { codec, dimensions: { width, height } };
       }
     }
     return null;
   }
 
   hasMultipleFrames(path: string): Promise<boolean> {
     const wrappedCommand = () => FFmpeg.innerHasMultipleFrames(path);
     return this.queueCommand('probe', wrappedCommand);
   }
 
   static async innerHasMultipleFrames(path: string): Promise<boolean> {
     await RNFFprobe.execute(getHasMultipleFramesProbeCommand(path));
     const probeOutput = await RNFFmpegConfig.getLastCommandOutput();
     const numFrames = parseInt(probeOutput.lastCommandOutput);
     return numFrames > 1;
   }
 }
 
 const ffmpeg: FFmpeg = new FFmpeg();
 
 export { ffmpeg };
diff --git a/native/navigation/navigation-utils.js b/native/navigation/navigation-utils.js
index 0c87cd377..3f94d5c5e 100644
--- a/native/navigation/navigation-utils.js
+++ b/native/navigation/navigation-utils.js
@@ -1,179 +1,179 @@
 // @flow
 
 import type {
   PossiblyStaleNavigationState,
   PossiblyStaleRoute,
   StaleLeafRoute,
   ScreenParams,
 } from '@react-navigation/core';
 import invariant from 'invariant';
 
 import {
   ComposeSubchannelRouteName,
   AppRouteName,
   threadRoutes,
 } from './route-names.js';
 
 function getStateFromNavigatorRoute(
   route: PossiblyStaleRoute<>,
 ): PossiblyStaleNavigationState {
   const key = route.key ? route.key : `unkeyed ${route.name}`;
   invariant(route.state, `expecting Route for ${key} to be NavigationState`);
   return route.state;
 }
 
 function getThreadIDFromParams(params: ?ScreenParams): string {
   invariant(
     params &&
       params.threadInfo &&
       typeof params.threadInfo === 'object' &&
       params.threadInfo.id &&
       typeof params.threadInfo.id === 'string',
     "there's no way in react-navigation/Flow to type this",
   );
   return params.threadInfo.id;
 }
 
 function getParentThreadIDFromParams(params: ?ScreenParams): ?string {
   if (!params) {
     return undefined;
   }
   const { parentThreadInfo } = params;
   if (!parentThreadInfo) {
     return undefined;
   }
   invariant(
     typeof parentThreadInfo === 'object' &&
       parentThreadInfo.id &&
       typeof parentThreadInfo.id === 'string',
     "there's no way in react-navigation/Flow to type this",
   );
   return parentThreadInfo.id;
 }
 
 function getThreadIDFromRoute(
   route: PossiblyStaleRoute<>,
   routes?: $ReadOnlyArray<string> = threadRoutes,
 ): ?string {
   if (!routes.includes(route.name)) {
     return null;
   }
   if (route.name === ComposeSubchannelRouteName) {
     return getParentThreadIDFromParams(route.params);
   }
   return getThreadIDFromParams(route.params);
 }
 
 function currentRouteRecurse(route: PossiblyStaleRoute<>): StaleLeafRoute<> {
   if (!route.state) {
     return route;
   }
   const state = getStateFromNavigatorRoute(route);
   return currentRouteRecurse(state.routes[state.index]);
 }
 
 function currentLeafRoute(
   state: PossiblyStaleNavigationState,
 ): StaleLeafRoute<> {
   return currentRouteRecurse(state.routes[state.index]);
 }
 
 function findRouteIndexWithKey(
   state: PossiblyStaleNavigationState,
   key: string,
 ): ?number {
   for (let i = 0; i < state.routes.length; i++) {
     const route = state.routes[i];
     if (route.key === key) {
       return i;
     }
   }
   return null;
 }
 
 // This function walks from the back of the stack and calls filterFunc on each
 // screen until the stack is exhausted or filterFunc returns "break". A screen
 // will be removed if and only if filterFunc returns "remove" (not "break").
 function removeScreensFromStack<
   Route,
   State: { +routes: $ReadOnlyArray<Route>, +index: number, ... },
 >(
   state: State,
   filterFunc: (route: Route) => 'keep' | 'remove' | 'break',
 ): State {
-  const newRoutes = [];
+  const newRoutes: Array<Route> = [];
   let newIndex = state.index;
   let screenRemoved = false;
   let breakActivated = false;
   for (let i = state.routes.length - 1; i >= 0; i--) {
     const route = state.routes[i];
     if (breakActivated) {
       newRoutes.unshift(route);
       continue;
     }
     const result = filterFunc(route);
     if (result === 'break') {
       breakActivated = true;
     }
     if (breakActivated || result === 'keep') {
       newRoutes.unshift(route);
       continue;
     }
     screenRemoved = true;
     if (newIndex >= i) {
       invariant(
         newIndex !== 0,
         'Attempting to remove current route and all before it',
       );
       newIndex--;
     }
   }
   if (!screenRemoved) {
     return state;
   }
   return {
     ...state,
     index: newIndex,
     routes: newRoutes,
   };
 }
 
 function validNavState(state: PossiblyStaleNavigationState): boolean {
   if (state.routes.length === 0) {
     return false;
   }
   const [firstRoute] = state.routes;
   if (firstRoute.name !== AppRouteName) {
     return false;
   }
   return true;
 }
 
 function getChildRouteFromNavigatorRoute(
   parentRoute: PossiblyStaleRoute<>,
   childRouteName: string,
 ): ?PossiblyStaleRoute<> {
   if (!parentRoute.state) {
     return null;
   }
   const parentState = parentRoute.state;
   const childRoute = parentState.routes.find(
     route => route.name === childRouteName,
   );
   invariant(
     childRoute,
     `parentRoute should contain route for ${childRouteName}`,
   );
   return childRoute;
 }
 
 export {
   getStateFromNavigatorRoute,
   getThreadIDFromParams,
   getThreadIDFromRoute,
   currentLeafRoute,
   findRouteIndexWithKey,
   removeScreensFromStack,
   validNavState,
   getChildRouteFromNavigatorRoute,
 };
diff --git a/native/profile/appearance-preferences.react.js b/native/profile/appearance-preferences.react.js
index 4612b1e0e..340eb9ad8 100644
--- a/native/profile/appearance-preferences.react.js
+++ b/native/profile/appearance-preferences.react.js
@@ -1,163 +1,163 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { useUpdateThemePreference } from 'lib/hooks/theme.js';
 import type {
   GlobalThemeInfo,
   GlobalThemePreference,
 } from 'lib/types/theme-types.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import { osCanTheme } from '../themes/theme-utils.js';
 
 const CheckIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 const unboundStyles = {
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   option: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 2,
   },
 };
 
 type OptionText = {
   themePreference: GlobalThemePreference,
   text: string,
 };
 const optionTexts: OptionText[] = [
   { themePreference: 'light', text: 'Light' },
   { themePreference: 'dark', text: 'Dark' },
 ];
 if (osCanTheme) {
   optionTexts.push({
     themePreference: 'system',
     text: 'Follow system preferences',
   });
 }
 
 type Props = {
   +navigation: ProfileNavigationProp<'AppearancePreferences'>,
   +route: NavigationRoute<'AppearancePreferences'>,
   +globalThemeInfo: GlobalThemeInfo,
   +updateThemePreference: (themePreference: GlobalThemePreference) => mixed,
   +styles: typeof unboundStyles,
   +colors: Colors,
 };
 class AppearancePreferences extends React.PureComponent<Props> {
   render() {
     const { panelIosHighlightUnderlay: underlay } = this.props.colors;
 
-    const options = [];
+    const options: Array<React.Node> = [];
     for (let i = 0; i < optionTexts.length; i++) {
       const { themePreference, text } = optionTexts[i];
       const icon =
         themePreference === this.props.globalThemeInfo.preference ? (
           <CheckIcon />
         ) : null;
       options.push(
         <Button
           onPress={() => this.props.updateThemePreference(themePreference)}
           style={this.props.styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={underlay}
           iosActiveOpacity={0.85}
           key={`button_${themePreference}`}
         >
           <Text style={this.props.styles.option}>{text}</Text>
           {icon}
         </Button>,
       );
       if (i + 1 < optionTexts.length) {
         options.push(
           <View style={this.props.styles.hr} key={`hr_${themePreference}`} />,
         );
       }
     }
 
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <Text style={this.props.styles.header}>APP THEME</Text>
         <View style={this.props.styles.section}>{options}</View>
       </ScrollView>
     );
   }
 }
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'AppearancePreferences'>,
   +route: NavigationRoute<'AppearancePreferences'>,
 };
 const ConnectedAppearancePreferences: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedAppearancePreferences(
     props: BaseProps,
   ) {
     const globalThemeInfo = useSelector(state => state.globalThemeInfo);
     const updateThemePreference = useUpdateThemePreference();
 
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     return (
       <AppearancePreferences
         {...props}
         globalThemeInfo={globalThemeInfo}
         updateThemePreference={updateThemePreference}
         styles={styles}
         colors={colors}
       />
     );
   });
 
 export default ConnectedAppearancePreferences;
diff --git a/native/profile/dev-tools.react.js b/native/profile/dev-tools.react.js
index 5ca52bc69..8efa7c7e2 100644
--- a/native/profile/dev-tools.react.js
+++ b/native/profile/dev-tools.react.js
@@ -1,260 +1,260 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { urlPrefixSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { setURLPrefix } from 'lib/utils/url-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { commCoreModule } from '../native-modules.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { CustomServerModalRouteName } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles, type Colors } from '../themes/colors.js';
 import { wipeAndExit } from '../utils/crash-utils.js';
 import { checkForMissingNatDevHostname } from '../utils/dev-hostname.js';
 import { nodeServerOptions } from '../utils/url-utils.js';
 
 const ServerIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   customServerLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   redText: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   serverContainer: {
     flex: 1,
   },
   serverText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   slightlyPaddedSection: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 2,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'DevTools'>,
   +route: NavigationRoute<'DevTools'>,
 };
 type Props = {
   ...BaseProps,
   +urlPrefix: string,
   +customServer: ?string,
   +colors: Colors,
   +styles: typeof unboundStyles,
   +dispatch: Dispatch,
 };
 class DevTools extends React.PureComponent<Props> {
   render() {
     const { panelIosHighlightUnderlay: underlay } = this.props.colors;
 
-    const serverButtons = [];
+    const serverButtons: Array<React.Node> = [];
     for (const server of nodeServerOptions) {
       const icon = server === this.props.urlPrefix ? <ServerIcon /> : null;
       serverButtons.push(
         <Button
           onPress={() => this.onSelectServer(server)}
           style={this.props.styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={underlay}
           iosActiveOpacity={0.85}
           key={`server${server}`}
         >
           <Text style={this.props.styles.serverText}>{server}</Text>
           {icon}
         </Button>,
       );
       serverButtons.push(
         <View style={this.props.styles.hr} key={`hr${server}`} />,
       );
     }
     const customServerLabel = this.props.customServer ? (
       <Text>
         <Text style={this.props.styles.customServerLabel}>{'custom: '}</Text>
         <Text style={this.props.styles.serverText}>
           {this.props.customServer}
         </Text>
       </Text>
     ) : (
       <Text
         style={[
           this.props.styles.customServerLabel,
           this.props.styles.serverContainer,
         ]}
       >
         custom
       </Text>
     );
     const customServerIcon =
       this.props.customServer === this.props.urlPrefix ? <ServerIcon /> : null;
     serverButtons.push(
       <Button
         onPress={this.onSelectCustomServer}
         style={this.props.styles.row}
         iosFormat="highlight"
         iosHighlightUnderlayColor={underlay}
         iosActiveOpacity={0.85}
         key="customServer"
       >
         {customServerLabel}
         {customServerIcon}
       </Button>,
     );
 
     return (
       <View style={this.props.styles.container}>
         <ScrollView
           contentContainerStyle={this.props.styles.scrollViewContentContainer}
           style={this.props.styles.scrollView}
         >
           <View style={this.props.styles.slightlyPaddedSection}>
             <Button
               onPress={this.onPressCrash}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>Trigger a crash</Text>
             </Button>
             <View style={this.props.styles.hr} />
             <Button
               onPress={this.onPressKill}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>Kill the app</Text>
             </Button>
             <View style={this.props.styles.hr} />
             <Button
               onPress={this.onPressWipe}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>
                 Wipe state and kill app
               </Text>
             </Button>
           </View>
           <Text style={this.props.styles.header}>SERVER</Text>
           <View style={this.props.styles.slightlyPaddedSection}>
             {serverButtons}
           </View>
         </ScrollView>
       </View>
     );
   }
 
   onPressCrash = () => {
     throw new Error('User triggered crash through dev menu!');
   };
 
   onPressKill = () => {
     commCoreModule.terminate();
   };
 
   onPressWipe = async () => {
     await wipeAndExit();
   };
 
   onSelectServer = (server: string) => {
     if (server !== this.props.urlPrefix) {
       this.props.dispatch({
         type: setURLPrefix,
         payload: server,
       });
     }
   };
 
   onSelectCustomServer = () => {
     checkForMissingNatDevHostname();
     this.props.navigation.navigate(CustomServerModalRouteName, {
       presentedFrom: this.props.route.key,
     });
   };
 }
 
 const ConnectedDevTools: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedDevTools(props: BaseProps) {
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const customServer = useSelector(state => state.customServer);
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatch = useDispatch();
 
     return (
       <DevTools
         {...props}
         urlPrefix={urlPrefix}
         customServer={customServer}
         colors={colors}
         styles={styles}
         dispatch={dispatch}
       />
     );
   },
 );
 
 export default ConnectedDevTools;
diff --git a/native/push/push-handler.react.js b/native/push/push-handler.react.js
index d0424627d..42da8955b 100644
--- a/native/push/push-handler.react.js
+++ b/native/push/push-handler.react.js
@@ -1,738 +1,738 @@
 // @flow
 
 import * as Haptics from 'expo-haptics';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, LogBox } from 'react-native';
 import { Notification as InAppNotification } from 'react-native-in-app-message';
 
 import type {
   DeviceTokens,
   SetDeviceTokenActionPayload,
 } from 'lib/actions/device-actions.js';
 import {
   setDeviceTokenActionTypes,
   useSetDeviceToken,
   useSetDeviceTokenFanout,
 } from 'lib/actions/device-actions.js';
 import { saveMessagesActionType } from 'lib/actions/message-actions.js';
 import {
   updatesCurrentAsOfSelector,
   connectionSelector,
   deviceTokensSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import {
   unreadCount,
   threadInfoSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { mergePrefixIntoBody } from 'lib/shared/notif-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { type ConnectionInfo } from 'lib/types/socket-types.js';
 import type { GlobalTheme } from 'lib/types/theme-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   convertNotificationMessageInfoToNewIDSchema,
   convertNonPendingIDToNewSchema,
 } from 'lib/utils/migration-utils.js';
 import {
   type NotifPermissionAlertInfo,
   recordNotifPermissionAlertActionType,
   shouldSkipPushPermissionAlert,
 } from 'lib/utils/push-alerts.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import {
   parseAndroidMessage,
   androidNotificationChannelID,
   handleAndroidMessage,
   getCommAndroidNotificationsEventEmitter,
   type AndroidMessage,
   CommAndroidNotifications,
 } from './android.js';
 import {
   CommIOSNotification,
   type CoreIOSNotificationData,
   type CoreIOSNotificationDataWithRequestIdentifier,
 } from './comm-ios-notification.js';
 import InAppNotif from './in-app-notif.react.js';
 import {
   requestIOSPushPermissions,
   iosPushPermissionResponseReceived,
   CommIOSNotifications,
   getCommIOSNotificationsEventEmitter,
 } from './ios.js';
 import {
   type MessageListParams,
   useNavigateToThread,
 } from '../chat/message-list-types.js';
 import {
   addLifecycleListener,
   getCurrentLifecycleState,
 } from '../lifecycle/lifecycle.js';
 import { replaceWithThreadActionType } from '../navigation/action-types.js';
 import { activeMessageListSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { RootContext, type RootContextType } from '../root-context.js';
 import type { EventSubscription } from '../types/react-native.js';
 import Alert from '../utils/alert.js';
 
 LogBox.ignoreLogs([
   // react-native-in-app-message
   'ForceTouchGestureHandler is not available',
 ]);
 
 type BaseProps = {
   +navigation: RootNavigationProp<'App'>,
 };
 type Props = {
   ...BaseProps,
   // Navigation state
   +activeThread: ?string,
   // Redux state
   +unreadCount: number,
   +deviceTokens: {
     +[keyserverID: string]: ?string,
   },
   +threadInfos: { +[id: string]: ThreadInfo },
   +notifPermissionAlertInfo: NotifPermissionAlertInfo,
   +connection: ConnectionInfo,
   +updatesCurrentAsOf: number,
   +activeTheme: ?GlobalTheme,
   +loggedIn: boolean,
   +navigateToThread: (params: MessageListParams) => void,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +setDeviceToken: (
     input: DeviceTokens,
   ) => Promise<SetDeviceTokenActionPayload>,
   +setDeviceTokenFanout: (
     deviceToken: ?string,
   ) => Promise<SetDeviceTokenActionPayload>,
   // withRootContext
   +rootContext: ?RootContextType,
 };
 type State = {
   +inAppNotifProps: ?{
     +customComponent: React.Node,
     +blurType: ?('xlight' | 'dark'),
     +onPress: () => void,
   },
 };
 
 class PushHandler extends React.PureComponent<Props, State> {
   state: State = {
     inAppNotifProps: null,
   };
   currentState: ?string = getCurrentLifecycleState();
   appStarted = 0;
   androidNotificationsEventSubscriptions: Array<EventSubscription> = [];
   androidNotificationsPermissionPromise: ?Promise<boolean> = undefined;
   initialAndroidNotifHandled = false;
   openThreadOnceReceived: Set<string> = new Set();
   lifecycleSubscription: ?EventSubscription;
   iosNotificationEventSubscriptions: Array<EventSubscription> = [];
 
   componentDidMount() {
     this.appStarted = Date.now();
     this.lifecycleSubscription = addLifecycleListener(
       this.handleAppStateChange,
     );
     this.onForeground();
     if (Platform.OS === 'ios') {
       const commIOSNotificationsEventEmitter =
         getCommIOSNotificationsEventEmitter();
       this.iosNotificationEventSubscriptions.push(
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .REMOTE_NOTIFICATIONS_REGISTERED_EVENT,
           registration =>
             this.registerPushPermissions(registration?.deviceToken),
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .REMOTE_NOTIFICATIONS_REGISTRATION_FAILED_EVENT,
           this.failedToRegisterPushPermissionsIOS,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .NOTIFICATION_RECEIVED_FOREGROUND_EVENT,
           this.iosForegroundNotificationReceived,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants().NOTIFICATION_OPENED_EVENT,
           this.iosNotificationOpened,
         ),
         commIOSNotificationsEventEmitter.addListener(
           CommIOSNotifications.getConstants()
             .NOTIFICATION_RECEIVED_BACKGROUND_EVENT,
           this.iosBackgroundNotificationReceived,
         ),
       );
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.createChannel(
         androidNotificationChannelID,
         'Default',
         CommAndroidNotifications.getConstants().NOTIFICATIONS_IMPORTANCE_HIGH,
         'Comm notifications channel',
       );
       const commAndroidNotificationsEventEmitter =
         getCommAndroidNotificationsEventEmitter();
       this.androidNotificationsEventSubscriptions.push(
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_TOKEN,
           this.handleAndroidDeviceToken,
         ),
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_MESSAGE,
           this.androidMessageReceived,
         ),
         commAndroidNotificationsEventEmitter.addListener(
           CommAndroidNotifications.getConstants()
             .COMM_ANDROID_NOTIFICATIONS_NOTIFICATION_OPENED,
           this.androidNotificationOpened,
         ),
       );
     }
 
     if (this.props.connection.status === 'connected') {
       this.updateBadgeCount();
     }
   }
 
   componentWillUnmount() {
     if (this.lifecycleSubscription) {
       this.lifecycleSubscription.remove();
     }
     if (Platform.OS === 'ios') {
       for (const iosNotificationEventSubscription of this
         .iosNotificationEventSubscriptions) {
         iosNotificationEventSubscription.remove();
       }
     } else if (Platform.OS === 'android') {
       for (const androidNotificationsEventSubscription of this
         .androidNotificationsEventSubscriptions) {
         androidNotificationsEventSubscription.remove();
       }
       this.androidNotificationsEventSubscriptions = [];
     }
   }
 
   handleAppStateChange = (nextState: ?string) => {
     if (!nextState || nextState === 'unknown') {
       return;
     }
     const lastState = this.currentState;
     this.currentState = nextState;
     if (lastState === 'background' && nextState === 'active') {
       this.onForeground();
       this.clearNotifsOfThread();
     }
   };
 
   onForeground() {
     if (this.props.loggedIn) {
       this.ensurePushNotifsEnabled();
     } else {
       // We do this in case there was a crash, so we can clear deviceToken from
       // any other cookies it might be set for
-      const deviceTokensMap = {};
+      const deviceTokensMap: { [string]: string } = {};
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         if (deviceToken) {
           deviceTokensMap[keyserverID] = deviceToken;
         }
       }
       this.setDeviceToken(deviceTokensMap);
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.activeThread !== prevProps.activeThread) {
       this.clearNotifsOfThread();
     }
 
     if (
       this.props.connection.status === 'connected' &&
       (prevProps.connection.status !== 'connected' ||
         this.props.unreadCount !== prevProps.unreadCount)
     ) {
       this.updateBadgeCount();
     }
 
     for (const threadID of this.openThreadOnceReceived) {
       const threadInfo = this.props.threadInfos[threadID];
       if (threadInfo) {
         this.navigateToThread(threadInfo, false);
         this.openThreadOnceReceived.clear();
         break;
       }
     }
 
     if (this.props.loggedIn && !prevProps.loggedIn) {
       this.ensurePushNotifsEnabled();
     } else {
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         const prevDeviceToken = prevProps.deviceTokens[keyserverID];
         if (!deviceToken && prevDeviceToken) {
           this.ensurePushNotifsEnabled();
           break;
         }
       }
     }
 
     if (!this.props.loggedIn && prevProps.loggedIn) {
       this.clearAllNotifs();
       this.resetBadgeCount();
     }
 
     if (
       this.state.inAppNotifProps &&
       this.state.inAppNotifProps !== prevState.inAppNotifProps
     ) {
       Haptics.notificationAsync();
       InAppNotification.show();
     }
   }
 
   updateBadgeCount() {
     const curUnreadCount = this.props.unreadCount;
     if (Platform.OS === 'ios') {
       CommIOSNotifications.setBadgesCount(curUnreadCount);
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.setBadge(curUnreadCount);
     }
   }
 
   resetBadgeCount() {
     if (Platform.OS === 'ios') {
       CommIOSNotifications.setBadgesCount(0);
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.setBadge(0);
     }
   }
 
   clearAllNotifs() {
     if (Platform.OS === 'ios') {
       CommIOSNotifications.removeAllDeliveredNotifications();
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.removeAllDeliveredNotifications();
     }
   }
 
   clearNotifsOfThread() {
     const { activeThread } = this.props;
     if (!activeThread) {
       return;
     }
     if (Platform.OS === 'ios') {
       CommIOSNotifications.getDeliveredNotifications(notifications =>
         PushHandler.clearDeliveredIOSNotificationsForThread(
           activeThread,
           notifications,
         ),
       );
     } else if (Platform.OS === 'android') {
       CommAndroidNotifications.removeAllActiveNotificationsForThread(
         activeThread,
       );
     }
   }
 
   static clearDeliveredIOSNotificationsForThread(
     threadID: string,
     notifications: $ReadOnlyArray<CoreIOSNotificationDataWithRequestIdentifier>,
   ) {
     const identifiersToClear = [];
     for (const notification of notifications) {
       if (notification.threadID === threadID) {
         identifiersToClear.push(notification.identifier);
       }
     }
     if (identifiersToClear) {
       CommIOSNotifications.removeDeliveredNotifications(identifiersToClear);
     }
   }
 
   async ensurePushNotifsEnabled() {
     if (!this.props.loggedIn) {
       return;
     }
     if (Platform.OS === 'ios') {
       let missingDeviceToken = false;
       for (const keyserverID in this.props.deviceTokens) {
         const deviceToken = this.props.deviceTokens[keyserverID];
         if (deviceToken === null || deviceToken === undefined) {
           missingDeviceToken = true;
           break;
         }
       }
       await requestIOSPushPermissions(missingDeviceToken);
     } else if (Platform.OS === 'android') {
       await this.ensureAndroidPushNotifsEnabled();
     }
   }
 
   async ensureAndroidPushNotifsEnabled() {
     const permissionPromisesResult = await Promise.all([
       CommAndroidNotifications.hasPermission(),
       CommAndroidNotifications.canRequestNotificationsPermissionFromUser(),
     ]);
 
     let [hasPermission] = permissionPromisesResult;
     const [, canRequestPermission] = permissionPromisesResult;
 
     if (!hasPermission && canRequestPermission) {
       const permissionResponse = await (async () => {
         // We issue a call to sleep to match iOS behavior where prompt
         // doesn't appear immediately but after logged-out modal disappears
         await sleep(10);
         await this.requestAndroidNotificationsPermission();
       })();
       hasPermission = permissionResponse;
     }
 
     if (!hasPermission) {
       this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
       return;
     }
 
     try {
       const fcmToken = await CommAndroidNotifications.getToken();
       await this.handleAndroidDeviceToken(fcmToken);
     } catch (e) {
       this.failedToRegisterPushPermissionsAndroid(!canRequestPermission);
     }
   }
 
   requestAndroidNotificationsPermission = () => {
     if (!this.androidNotificationsPermissionPromise) {
       this.androidNotificationsPermissionPromise = (async () => {
         const notifPermission =
           await CommAndroidNotifications.requestNotificationsPermission();
         this.androidNotificationsPermissionPromise = undefined;
         return notifPermission;
       })();
     }
     return this.androidNotificationsPermissionPromise;
   };
 
   handleAndroidDeviceToken = async (deviceToken: string) => {
     this.registerPushPermissions(deviceToken);
     await this.handleInitialAndroidNotification();
   };
 
   async handleInitialAndroidNotification() {
     if (this.initialAndroidNotifHandled) {
       return;
     }
     this.initialAndroidNotifHandled = true;
     const initialNotifThreadID =
       await CommAndroidNotifications.getInitialNotificationThreadID();
     if (initialNotifThreadID) {
       await this.androidNotificationOpened(initialNotifThreadID);
     }
   }
 
   registerPushPermissions = (deviceToken: ?string) => {
     const deviceType = Platform.OS;
     if (deviceType !== 'android' && deviceType !== 'ios') {
       return;
     }
     if (deviceType === 'ios') {
       iosPushPermissionResponseReceived();
     }
-    const deviceTokensMap = {};
+    const deviceTokensMap: { [string]: ?string } = {};
     for (const keyserverID in this.props.deviceTokens) {
       const keyserverDeviceToken = this.props.deviceTokens[keyserverID];
       if (deviceToken !== keyserverDeviceToken) {
         deviceTokensMap[keyserverID] = deviceToken;
       }
     }
     this.setDeviceToken(deviceTokensMap);
   };
 
   setDeviceToken(deviceTokens: DeviceTokens) {
     this.props.dispatchActionPromise(
       setDeviceTokenActionTypes,
       this.props.setDeviceToken(deviceTokens),
     );
   }
 
   setAllDeviceTokensNull = () => {
     this.props.dispatchActionPromise(
       setDeviceTokenActionTypes,
       this.props.setDeviceTokenFanout(null),
     );
   };
 
   failedToRegisterPushPermissionsIOS = () => {
     this.setAllDeviceTokensNull();
     if (!this.props.loggedIn) {
       return;
     }
     iosPushPermissionResponseReceived();
   };
 
   failedToRegisterPushPermissionsAndroid = (
     shouldShowAlertOnAndroid: boolean,
   ) => {
     this.setAllDeviceTokensNull();
     if (!this.props.loggedIn) {
       return;
     }
     if (shouldShowAlertOnAndroid) {
       this.showNotifAlertOnAndroid();
     }
   };
 
   showNotifAlertOnAndroid() {
     const alertInfo = this.props.notifPermissionAlertInfo;
     if (shouldSkipPushPermissionAlert(alertInfo)) {
       return;
     }
     this.props.dispatch({
       type: recordNotifPermissionAlertActionType,
       payload: { time: Date.now() },
     });
 
     Alert.alert(
       'Unable to initialize notifs!',
       'Please check your network connection, make sure Google Play ' +
         'services are installed and enabled, and confirm that your Google ' +
         'Play credentials are valid in the Google Play Store.',
       undefined,
       { cancelable: true },
     );
   }
 
   navigateToThread(threadInfo: ThreadInfo, clearChatRoutes: boolean) {
     if (clearChatRoutes) {
       this.props.navigation.dispatch({
         type: replaceWithThreadActionType,
         payload: { threadInfo },
       });
     } else {
       this.props.navigateToThread({ threadInfo });
     }
   }
 
   onPressNotificationForThread(threadID: string, clearChatRoutes: boolean) {
     const threadInfo = this.props.threadInfos[threadID];
     if (threadInfo) {
       this.navigateToThread(threadInfo, clearChatRoutes);
     } else {
       this.openThreadOnceReceived.add(threadID);
     }
   }
 
   saveMessageInfos(rawMessageInfos: ?$ReadOnlyArray<RawMessageInfo>) {
     if (!rawMessageInfos) {
       return;
     }
     const { updatesCurrentAsOf } = this.props;
     this.props.dispatch({
       type: saveMessagesActionType,
       payload: { rawMessageInfos, updatesCurrentAsOf },
     });
   }
 
   iosForegroundNotificationReceived = (
     rawNotification: CoreIOSNotificationData,
   ) => {
     const notification = new CommIOSNotification(rawNotification);
     if (Date.now() < this.appStarted + 1500) {
       // On iOS, when the app is opened from a notif press, for some reason this
       // callback gets triggered before iosNotificationOpened. In fact this
       // callback shouldn't be triggered at all. To avoid weirdness we are
       // ignoring any foreground notification received within the first second
       // of the app being started, since they are most likely to be erroneous.
       notification.finish(
         CommIOSNotifications.getConstants().FETCH_RESULT_NO_DATA,
       );
       return;
     }
     const threadID = notification.getData().threadID;
     const messageInfos = notification.getData().messageInfos;
     this.saveMessageInfos(messageInfos);
 
     let title = notification.getData().title;
     let body = notification.getData().body;
 
     if (title && body) {
       ({ title, body } = mergePrefixIntoBody({ title, body }));
     } else {
       body = notification.getMessage();
     }
 
     if (body) {
       this.showInAppNotification(threadID, body, title);
     } else {
       console.log(
         'Non-rescind foreground notification without alert received!',
       );
     }
     notification.finish(
       CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
     );
   };
 
   iosBackgroundNotificationReceived = backgroundData => {
     const convertedMessageInfos = backgroundData.messageInfosArray
       .flatMap(convertNotificationMessageInfoToNewIDSchema)
       .filter(Boolean);
 
     if (!convertedMessageInfos.length) {
       return;
     }
 
     this.saveMessageInfos(convertedMessageInfos);
   };
 
   onPushNotifBootsApp() {
     if (
       this.props.rootContext &&
       this.props.rootContext.detectUnsupervisedBackground
     ) {
       this.props.rootContext.detectUnsupervisedBackground(false);
     }
   }
 
   iosNotificationOpened = (rawNotification: CoreIOSNotificationData) => {
     const notification = new CommIOSNotification(rawNotification);
     this.onPushNotifBootsApp();
     const threadID = notification.getData().threadID;
     const messageInfos = notification.getData().messageInfos;
     this.saveMessageInfos(messageInfos);
     this.onPressNotificationForThread(threadID, true);
     notification.finish(
       CommIOSNotifications.getConstants().FETCH_RESULT_NEW_DATA,
     );
   };
 
   showInAppNotification(threadID: string, message: string, title?: ?string) {
     if (threadID === this.props.activeThread) {
       return;
     }
     this.setState({
       inAppNotifProps: {
         customComponent: (
           <InAppNotif
             title={title}
             message={message}
             activeTheme={this.props.activeTheme}
           />
         ),
         blurType: this.props.activeTheme === 'dark' ? 'xlight' : 'dark',
         onPress: () => {
           InAppNotification.hide();
           this.onPressNotificationForThread(threadID, false);
         },
       },
     });
   }
 
   androidNotificationOpened = async (threadID: string) => {
     const convertedThreadID = convertNonPendingIDToNewSchema(
       threadID,
       ashoatKeyserverID,
     );
     this.onPushNotifBootsApp();
     this.onPressNotificationForThread(convertedThreadID, true);
   };
 
   androidMessageReceived = async (message: AndroidMessage) => {
     const parsedMessage = parseAndroidMessage(message);
     this.onPushNotifBootsApp();
 
     const { messageInfos } = parsedMessage;
     this.saveMessageInfos(messageInfos);
 
     handleAndroidMessage(
       parsedMessage,
       this.props.updatesCurrentAsOf,
       this.handleAndroidNotificationIfActive,
     );
   };
 
   handleAndroidNotificationIfActive = (
     threadID: string,
     texts: { body: string, title: ?string },
   ) => {
     if (this.currentState !== 'active') {
       return false;
     }
     this.showInAppNotification(threadID, texts.body, texts.title);
     return true;
   };
 
   render() {
     return (
       <InAppNotification
         {...this.state.inAppNotifProps}
         hideStatusBar={false}
       />
     );
   }
 }
 
 const ConnectedPushHandler: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedPushHandler(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const activeThread = activeMessageListSelector(navContext);
     const boundUnreadCount = useSelector(unreadCount);
     const deviceTokens = useSelector(deviceTokensSelector);
     const threadInfos = useSelector(threadInfoSelector);
     const notifPermissionAlertInfo = useSelector(
       state => state.notifPermissionAlertInfo,
     );
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const updatesCurrentAsOf = useSelector(
       updatesCurrentAsOfSelector(ashoatKeyserverID),
     );
     const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
     const loggedIn = useSelector(isLoggedIn);
     const navigateToThread = useNavigateToThread();
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callSetDeviceToken = useSetDeviceToken();
     const callSetDeviceTokenFanout = useSetDeviceTokenFanout();
     const rootContext = React.useContext(RootContext);
     return (
       <PushHandler
         {...props}
         activeThread={activeThread}
         unreadCount={boundUnreadCount}
         deviceTokens={deviceTokens}
         threadInfos={threadInfos}
         notifPermissionAlertInfo={notifPermissionAlertInfo}
         connection={connection}
         updatesCurrentAsOf={updatesCurrentAsOf}
         activeTheme={activeTheme}
         loggedIn={loggedIn}
         navigateToThread={navigateToThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         setDeviceToken={callSetDeviceToken}
         setDeviceTokenFanout={callSetDeviceTokenFanout}
         rootContext={rootContext}
       />
     );
   });
 
 export default ConnectedPushHandler;
diff --git a/native/redux/dimensions-updater.react.js b/native/redux/dimensions-updater.react.js
index 31a3d30e5..e8b00a4ed 100644
--- a/native/redux/dimensions-updater.react.js
+++ b/native/redux/dimensions-updater.react.js
@@ -1,111 +1,112 @@
 // @flow
 
 import * as React from 'react';
 import {
   initialWindowMetrics,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 
 import type { Dimensions } from 'lib/types/media-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { updateDimensionsActiveType } from './action-types.js';
 import { useSelector } from './redux-utils.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
   rnsacThinksAndroidKeyboardResizesFrame,
 } from '../keyboard/keyboard.js';
 
 type BaseDimensionsInfo = {
   ...Dimensions,
   +topInset: number,
   +bottomInset: number,
 };
 export type DimensionsInfo = {
   ...BaseDimensionsInfo,
   +tabBarHeight: number,
   +rotated: boolean,
 };
 
 type Metrics = {
   +frame: { +x: number, +y: number, +width: number, +height: number },
   +insets: { +top: number, +left: number, +right: number, +bottom: number },
 };
 function dimensionsUpdateFromMetrics(metrics: ?Metrics): BaseDimensionsInfo {
   if (!metrics) {
     // This happens when the app gets booted to run a background task
     return { height: 0, width: 0, topInset: 0, bottomInset: 0 };
   }
   return {
     height: metrics.frame.height,
     width: metrics.frame.width,
     topInset: metrics.insets.top,
     bottomInset: metrics.insets.bottom,
   };
 }
 
 const defaultDimensionsInfo = {
   ...(dimensionsUpdateFromMetrics(initialWindowMetrics): BaseDimensionsInfo),
   tabBarHeight: 50,
   rotated: false,
 };
 const defaultIsPortrait =
   defaultDimensionsInfo.height >= defaultDimensionsInfo.width;
 
 function DimensionsUpdater(): null {
   const dimensions = useSelector(state => state.dimensions);
   const dispatch = useDispatch();
 
   const frame = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
 
   const keyboardShowingRef = React.useRef();
   const keyboardShow = React.useCallback(() => {
     keyboardShowingRef.current = true;
   }, []);
   const keyboardDismiss = React.useCallback(() => {
     keyboardShowingRef.current = false;
   }, []);
   React.useEffect(() => {
     if (!rnsacThinksAndroidKeyboardResizesFrame) {
       return undefined;
     }
     const showListener = addKeyboardShowListener(keyboardShow);
     const dismissListener = addKeyboardDismissListener(keyboardDismiss);
     return () => {
       removeKeyboardListener(showListener);
       removeKeyboardListener(dismissListener);
     };
   }, [keyboardShow, keyboardDismiss]);
   const keyboardShowing = keyboardShowingRef.current;
 
   React.useEffect(() => {
     if (keyboardShowing) {
       return;
     }
-    let updates = dimensionsUpdateFromMetrics({ frame, insets });
+    let updates: Partial<$ReadOnly<{ ...DimensionsInfo }>> =
+      dimensionsUpdateFromMetrics({ frame, insets });
     if (updates.height && updates.width && updates.height !== updates.width) {
       updates = {
         ...updates,
         rotated: updates.width > updates.height === defaultIsPortrait,
       };
     }
     for (const key in updates) {
       if (updates[key] === dimensions[key]) {
         continue;
       }
       dispatch({
         type: updateDimensionsActiveType,
         payload: updates,
       });
       return;
     }
   }, [keyboardShowing, dimensions, dispatch, frame, insets]);
 
   return null;
 }
 
 export { defaultDimensionsInfo, DimensionsUpdater };
diff --git a/native/redux/edit-thread-permission-migration.js b/native/redux/edit-thread-permission-migration.js
index 5a7dfa5c2..cf1424905 100644
--- a/native/redux/edit-thread-permission-migration.js
+++ b/native/redux/edit-thread-permission-migration.js
@@ -1,96 +1,96 @@
 // @flow
 
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type {
   MemberInfo,
   ThreadCurrentUserInfo,
   RawThreadInfo,
   RoleInfo,
   RawThreadInfos,
 } from 'lib/types/thread-types.js';
 
 function addDetailedThreadEditPermissionsToUser<
   T: MemberInfo | ThreadCurrentUserInfo,
 >(threadInfo: RawThreadInfo, member: T, threadID: string): T {
   let newPermissions = null;
   if (threadInfo.type === threadTypes.PRIVATE) {
     newPermissions = {
       ...member.permissions,
       edit_thread_color: { value: true, source: threadID },
       edit_thread_description: { value: true, source: threadID },
     };
   } else if (member.permissions['edit_thread']) {
     newPermissions = {
       ...member.permissions,
       edit_thread_color: member.permissions['edit_thread'],
       edit_thread_description: member.permissions['edit_thread'],
     };
   }
 
   return newPermissions
     ? {
         ...member,
         permissions: newPermissions,
       }
     : member;
 }
 
 function addDetailedThreadEditPermissionsToRole(
   role: RoleInfo,
   threadType: number,
 ): RoleInfo {
   let updatedPermissions = null;
   if (role.permissions['edit_thread']) {
     updatedPermissions = {
       ...role.permissions,
       edit_thread_color: role.permissions['edit_thread'],
       edit_thread_description: role.permissions['edit_thread'],
     };
   } else if (threadType === threadTypes.PRIVATE) {
     updatedPermissions = {
       ...role.permissions,
       edit_thread_color: true,
       edit_thread_description: true,
     };
   }
   return updatedPermissions
     ? { ...role, permissions: updatedPermissions }
     : role;
 }
 
 function migrateThreadStoreForEditThreadPermissions(threadInfos: {
   +[id: string]: RawThreadInfo,
 }): RawThreadInfos {
-  const newThreadInfos = {};
+  const newThreadInfos: { [string]: RawThreadInfo } = {};
   for (const threadID in threadInfos) {
     const threadInfo: RawThreadInfo = threadInfos[threadID];
     const updatedMembers = threadInfo.members.map(member =>
       addDetailedThreadEditPermissionsToUser(threadInfo, member, threadID),
     );
 
     const updatedCurrentUser = addDetailedThreadEditPermissionsToUser(
       threadInfo,
       threadInfo.currentUser,
       threadID,
     );
 
-    const updatedRoles = {};
+    const updatedRoles: { [string]: RoleInfo } = {};
     for (const roleID in threadInfo.roles) {
       updatedRoles[roleID] = addDetailedThreadEditPermissionsToRole(
         threadInfo.roles[roleID],
         threadInfo.type,
       );
     }
 
     const newThreadInfo = {
       ...threadInfo,
       members: updatedMembers,
       currentUser: updatedCurrentUser,
       roles: updatedRoles,
     };
     newThreadInfos[threadID] = newThreadInfo;
   }
   return newThreadInfos;
 }
 
 export { migrateThreadStoreForEditThreadPermissions };
diff --git a/native/redux/manage-pins-permission-migration.js b/native/redux/manage-pins-permission-migration.js
index f30024c18..49cd60fcd 100644
--- a/native/redux/manage-pins-permission-migration.js
+++ b/native/redux/manage-pins-permission-migration.js
@@ -1,90 +1,90 @@
 // @flow
 
 import type {
   RawThreadInfo,
   MemberInfo,
   ThreadCurrentUserInfo,
   RoleInfo,
   RawThreadInfos,
 } from 'lib/types/thread-types.js';
 
 type ThreadStoreThreadInfos = RawThreadInfos;
 type TargetMemberInfo = MemberInfo | ThreadCurrentUserInfo;
 
 const adminRoleName = 'Admins';
 
 function addManagePinsThreadPermissionToUser(
   threadInfo: RawThreadInfo,
   member: TargetMemberInfo,
   threadID: string,
 ): TargetMemberInfo {
   const isAdmin =
     member.role && threadInfo.roles[member.role].name === adminRoleName;
   let newPermissionsForMember;
   if (isAdmin) {
     newPermissionsForMember = {
       ...member.permissions,
       manage_pins: { value: true, source: threadID },
     };
   }
 
   return newPermissionsForMember
     ? {
         ...member,
         permissions: newPermissionsForMember,
       }
     : member;
 }
 
 function addManagePinsThreadPermissionToRole(role: RoleInfo): RoleInfo {
   const isAdminRole = role.name === adminRoleName;
   let updatedPermissions;
 
   if (isAdminRole) {
     updatedPermissions = {
       ...role.permissions,
       manage_pins: true,
       descendant_manage_pins: true,
     };
   }
 
   return updatedPermissions
     ? { ...role, permissions: updatedPermissions }
     : role;
 }
 
 function persistMigrationForManagePinsThreadPermission(
   threadInfos: ThreadStoreThreadInfos,
 ): ThreadStoreThreadInfos {
-  const newThreadInfos = {};
+  const newThreadInfos: { [string]: RawThreadInfo } = {};
   for (const threadID in threadInfos) {
     const threadInfo: RawThreadInfo = threadInfos[threadID];
     const updatedMembers = threadInfo.members.map(member =>
       addManagePinsThreadPermissionToUser(threadInfo, member, threadID),
     );
 
     const updatedCurrentUser = addManagePinsThreadPermissionToUser(
       threadInfo,
       threadInfo.currentUser,
       threadID,
     );
 
-    const updatedRoles = {};
+    const updatedRoles: { [string]: RoleInfo } = {};
     for (const roleID in threadInfo.roles) {
       updatedRoles[roleID] = addManagePinsThreadPermissionToRole(
         threadInfo.roles[roleID],
       );
     }
 
     const updatedThreadInfo = {
       ...threadInfo,
       members: updatedMembers,
       currentUser: updatedCurrentUser,
       roles: updatedRoles,
     };
     newThreadInfos[threadID] = updatedThreadInfo;
   }
   return newThreadInfos;
 }
 
 export { persistMigrationForManagePinsThreadPermission };
diff --git a/native/redux/persist.js b/native/redux/persist.js
index f9af67817..b2479f155 100644
--- a/native/redux/persist.js
+++ b/native/redux/persist.js
@@ -1,1098 +1,1101 @@
 // @flow
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import invariant from 'invariant';
 import { Platform } from 'react-native';
 import Orientation from 'react-native-orientation-locker';
 import { createTransform } from 'redux-persist';
 import type { Transform } from 'redux-persist/es/types.js';
 
 import {
   convertEntryStoreToNewIDSchema,
   convertInviteLinksStoreToNewIDSchema,
   convertMessageStoreToNewIDSchema,
   convertRawMessageInfoToNewIDSchema,
   convertCalendarFilterToNewIDSchema,
   convertConnectionInfoToNewIDSchema,
 } from 'lib/_generated/migration-utils.js';
 import {
   type ClientDBMessageStoreOperation,
   messageStoreOpsHandlers,
 } from 'lib/ops/message-store-ops.js';
 import {
   type ReportStoreOperation,
   type ClientDBReportStoreOperation,
   convertReportsToReplaceReportOps,
   reportStoreOpsHandlers,
 } from 'lib/ops/report-store-ops.js';
 import type { ClientDBThreadStoreOperation } from 'lib/ops/thread-store-ops.js';
 import { threadStoreOpsHandlers } from 'lib/ops/thread-store-ops.js';
 import {
   type ClientDBUserStoreOperation,
   type UserStoreOperation,
   convertUserInfosToReplaceUserOps,
   userStoreOpsHandlers,
 } from 'lib/ops/user-store-ops.js';
 import { highestLocalIDSelector } from 'lib/selectors/local-id-selectors.js';
 import { createAsyncMigrate } from 'lib/shared/create-async-migrate.js';
 import { inconsistencyResponsesToReports } from 'lib/shared/report-utils.js';
 import {
   getContainingThreadID,
   getCommunity,
 } from 'lib/shared/thread-utils.js';
 import {
   DEPRECATED_unshimMessageStore,
   unshimFunc,
 } from 'lib/shared/unshim-utils.js';
 import { defaultEnabledApps } from 'lib/types/enabled-apps.js';
 import { defaultCalendarQuery } from 'lib/types/entry-types.js';
 import { defaultCalendarFilters } from 'lib/types/filter-types.js';
 import type {
   KeyserverStore,
   KeyserverInfo,
 } from 'lib/types/keyserver-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type LocalMessageInfo,
   type MessageStore,
   type MessageStoreThreads,
 } from 'lib/types/message-types.js';
 import type {
   ReportStore,
   ClientReportCreationRequest,
 } from 'lib/types/report-types.js';
 import {
   defaultConnectionInfo,
   type ConnectionInfo,
 } from 'lib/types/socket-types.js';
 import { defaultGlobalThemeInfo } from 'lib/types/theme-types.js';
-import type { ClientDBThreadInfo } from 'lib/types/thread-types.js';
+import type {
+  ClientDBThreadInfo,
+  RawThreadInfo,
+} from 'lib/types/thread-types.js';
 import {
   translateClientDBMessageInfoToRawMessageInfo,
   translateRawMessageInfoToClientDBMessageInfo,
 } from 'lib/utils/message-ops-utils.js';
 import {
   generateIDSchemaMigrationOpsForDrafts,
   convertMessageStoreThreadsToNewIDSchema,
   convertThreadStoreThreadInfosToNewIDSchema,
 } from 'lib/utils/migration-utils.js';
 import { defaultNotifPermissionAlertInfo } from 'lib/utils/push-alerts.js';
 import {
   convertClientDBThreadInfoToRawThreadInfo,
   convertRawThreadInfoToClientDBThreadInfo,
 } from 'lib/utils/thread-ops-utils.js';
 import { getUUID } from 'lib/utils/uuid.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import {
   updateClientDBThreadStoreThreadInfos,
   createUpdateDBOpsForThreadStoreThreadInfos,
   createUpdateDBOpsForMessageStoreMessages,
   createUpdateDBOpsForMessageStoreThreads,
 } from './client-db-utils.js';
 import { defaultState } from './default-state.js';
 import { migrateThreadStoreForEditThreadPermissions } from './edit-thread-permission-migration.js';
 import { persistMigrationForManagePinsThreadPermission } from './manage-pins-permission-migration.js';
 import { persistMigrationToRemoveSelectRolePermissions } from './remove-select-role-permissions.js';
 import type { AppState } from './state-types.js';
 import { unshimClientDB } from './unshim-utils.js';
 import { updateRolesAndPermissions } from './update-roles-and-permissions.js';
 import { commCoreModule } from '../native-modules.js';
 import { defaultDeviceCameraInfo } from '../types/camera.js';
 import { isTaskCancelledError } from '../utils/error-handling.js';
 import { defaultURLPrefix } from '../utils/url-utils.js';
 
 const migrations = {
   [1]: (state: AppState) => ({
     ...state,
     notifPermissionAlertInfo: defaultNotifPermissionAlertInfo,
   }),
   [2]: (state: AppState) => ({
     ...state,
     messageSentFromRoute: [],
   }),
   [3]: state => ({
     currentUserInfo: state.currentUserInfo,
     entryStore: state.entryStore,
     threadInfos: state.threadInfos,
     userInfos: state.userInfos,
     messageStore: {
       ...state.messageStore,
       currentAsOf: state.currentAsOf,
     },
     updatesCurrentAsOf: state.currentAsOf,
     cookie: state.cookie,
     deviceToken: state.deviceToken,
     urlPrefix: state.urlPrefix,
     customServer: state.customServer,
     notifPermissionAlertInfo: state.notifPermissionAlertInfo,
     messageSentFromRoute: state.messageSentFromRoute,
     _persist: state._persist,
   }),
   [4]: (state: AppState) => ({
     ...state,
     pingTimestamps: undefined,
     activeServerRequests: undefined,
   }),
   [5]: (state: AppState) => ({
     ...state,
     calendarFilters: defaultCalendarFilters,
   }),
   [6]: state => ({
     ...state,
     threadInfos: undefined,
     threadStore: {
       threadInfos: state.threadInfos,
       inconsistencyResponses: [],
     },
   }),
   [7]: state => ({
     ...state,
     lastUserInteraction: undefined,
     sessionID: undefined,
     entryStore: {
       ...state.entryStore,
       inconsistencyResponses: [],
     },
   }),
   [8]: (state: AppState) => ({
     ...state,
     pingTimestamps: undefined,
     activeServerRequests: undefined,
     connection: {
       ...defaultConnectionInfo,
       actualizedCalendarQuery: defaultCalendarQuery(Platform.OS),
     },
     watchedThreadIDs: [],
     entryStore: {
       ...state.entryStore,
       actualizedCalendarQuery: undefined,
     },
   }),
   [9]: state => ({
     ...state,
     connection: {
       ...state.connection,
       lateResponses: [],
     },
   }),
   [10]: state => ({
     ...state,
     nextLocalID: highestLocalIDSelector(state) + 1,
     connection: {
       ...state.connection,
       showDisconnectedBar: false,
     },
     messageStore: {
       ...state.messageStore,
       local: {},
     },
   }),
   [11]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.IMAGES,
     ]),
   }),
   [12]: (state: AppState) => ({
     ...state,
     globalThemeInfo: defaultGlobalThemeInfo,
   }),
   [13]: (state: AppState) => ({
     ...state,
     deviceCameraInfo: defaultDeviceCameraInfo,
     deviceOrientation: Orientation.getInitialOrientation(),
   }),
   [14]: (state: AppState) => state,
   [15]: state => ({
     ...state,
     threadStore: {
       ...state.threadStore,
       inconsistencyReports: inconsistencyResponsesToReports(
         state.threadStore.inconsistencyResponses,
       ),
       inconsistencyResponses: undefined,
     },
     entryStore: {
       ...state.entryStore,
       inconsistencyReports: inconsistencyResponsesToReports(
         state.entryStore.inconsistencyResponses,
       ),
       inconsistencyResponses: undefined,
     },
     queuedReports: [],
   }),
   [16]: state => {
     const result = {
       ...state,
       messageSentFromRoute: undefined,
       dataLoaded: !!state.currentUserInfo && !state.currentUserInfo.anonymous,
     };
     if (state.navInfo) {
       result.navInfo = {
         ...state.navInfo,
         navigationState: undefined,
       };
     }
     return result;
   },
   [17]: state => ({
     ...state,
     userInfos: undefined,
     userStore: {
       userInfos: state.userInfos,
       inconsistencyResponses: [],
     },
   }),
   [18]: state => ({
     ...state,
     userStore: {
       userInfos: state.userStore.userInfos,
       inconsistencyReports: [],
     },
   }),
   [19]: state => {
-    const threadInfos = {};
+    const threadInfos: { [string]: RawThreadInfo } = {};
     for (const threadID in state.threadStore.threadInfos) {
       const threadInfo = state.threadStore.threadInfos[threadID];
       const { visibilityRules, ...rest } = threadInfo;
       threadInfos[threadID] = rest;
     }
     return {
       ...state,
       threadStore: {
         ...state.threadStore,
         threadInfos,
       },
     };
   },
   [20]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.UPDATE_RELATIONSHIP,
     ]),
   }),
   [21]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.CREATE_SIDEBAR,
       messageTypes.SIDEBAR_SOURCE,
     ]),
   }),
   [22]: state => {
     for (const key in state.drafts) {
       const value = state.drafts[key];
       try {
         commCoreModule.updateDraft(key, value);
       } catch (e) {
         if (!isTaskCancelledError(e)) {
           throw e;
         }
       }
     }
     return {
       ...state,
       drafts: undefined,
     };
   },
   [23]: state => ({
     ...state,
     globalThemeInfo: defaultGlobalThemeInfo,
   }),
   [24]: state => ({
     ...state,
     enabledApps: defaultEnabledApps,
   }),
   [25]: state => ({
     ...state,
     crashReportsEnabled: __DEV__,
   }),
   [26]: state => {
     const { currentUserInfo } = state;
     if (currentUserInfo.anonymous) {
       return state;
     }
     return {
       ...state,
       crashReportsEnabled: undefined,
       currentUserInfo: {
         id: currentUserInfo.id,
         username: currentUserInfo.username,
       },
       enabledReports: {
         crashReports: __DEV__,
         inconsistencyReports: __DEV__,
         mediaReports: __DEV__,
       },
     };
   },
   [27]: state => ({
     ...state,
     queuedReports: undefined,
     enabledReports: undefined,
     threadStore: {
       ...state.threadStore,
       inconsistencyReports: undefined,
     },
     entryStore: {
       ...state.entryStore,
       inconsistencyReports: undefined,
     },
     reportStore: {
       enabledReports: {
         crashReports: __DEV__,
         inconsistencyReports: __DEV__,
         mediaReports: __DEV__,
       },
       queuedReports: [
         ...state.entryStore.inconsistencyReports,
         ...state.threadStore.inconsistencyReports,
         ...state.queuedReports,
       ],
     },
   }),
   [28]: state => {
-    const threadParentToChildren = {};
+    const threadParentToChildren: { [string]: string[] } = {};
     for (const threadID in state.threadStore.threadInfos) {
       const threadInfo = state.threadStore.threadInfos[threadID];
       const parentThreadInfo = threadInfo.parentThreadID
         ? state.threadStore.threadInfos[threadInfo.parentThreadID]
         : null;
       const parentIndex = parentThreadInfo ? parentThreadInfo.id : '-1';
       if (!threadParentToChildren[parentIndex]) {
         threadParentToChildren[parentIndex] = [];
       }
       threadParentToChildren[parentIndex].push(threadID);
     }
 
     const rootIDs = threadParentToChildren['-1'];
     if (!rootIDs) {
       // This should never happen, but if it somehow does we'll let the state
       // check mechanism resolve it...
       return state;
     }
 
-    const threadInfos = {};
+    const threadInfos: { [string]: RawThreadInfo } = {};
     const stack = [...rootIDs];
     while (stack.length > 0) {
       const threadID = stack.shift();
       const threadInfo = state.threadStore.threadInfos[threadID];
       const parentThreadInfo = threadInfo.parentThreadID
         ? threadInfos[threadInfo.parentThreadID]
         : null;
       threadInfos[threadID] = {
         ...threadInfo,
         containingThreadID: getContainingThreadID(
           parentThreadInfo,
           threadInfo.type,
         ),
         community: getCommunity(parentThreadInfo),
       };
       const children = threadParentToChildren[threadID];
       if (children) {
         stack.push(...children);
       }
     }
     return { ...state, threadStore: { ...state.threadStore, threadInfos } };
   },
   [29]: (state: AppState) => {
     const updatedThreadInfos = migrateThreadStoreForEditThreadPermissions(
       state.threadStore.threadInfos,
     );
 
     return {
       ...state,
       threadStore: {
         ...state.threadStore,
         threadInfos: updatedThreadInfos,
       },
     };
   },
   [30]: (state: AppState) => {
     const threadInfos = state.threadStore.threadInfos;
     const operations = [
       {
         type: 'remove_all',
       },
       ...Object.keys(threadInfos).map((id: string) => ({
         type: 'replace',
         payload: { id, threadInfo: threadInfos[id] },
       })),
     ];
     try {
       commCoreModule.processThreadStoreOperationsSync(
         threadStoreOpsHandlers.convertOpsToClientDBOps(operations),
       );
     } catch (exception) {
       console.log(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [31]: (state: AppState) => {
     const messages = state.messageStore.messages;
     const operations: $ReadOnlyArray<ClientDBMessageStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...Object.keys(messages).map((id: string) => ({
         type: 'replace',
         payload: translateRawMessageInfoToClientDBMessageInfo(messages[id]),
       })),
     ];
     try {
       commCoreModule.processMessageStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [32]: (state: AppState) => unshimClientDB(state, [messageTypes.MULTIMEDIA]),
   [33]: (state: AppState) => unshimClientDB(state, [messageTypes.REACTION]),
   [34]: state => {
     const { threadIDsToNotifIDs, ...stateSansThreadIDsToNotifIDs } = state;
     return stateSansThreadIDsToNotifIDs;
   },
   [35]: (state: AppState) => unshimClientDB(state, [messageTypes.MULTIMEDIA]),
   [36]: (state: AppState) => {
     // 1. Get threads and messages from SQLite `threads` and `messages` tables.
     const clientDBThreadInfos = commCoreModule.getAllThreadsSync();
     const clientDBMessageInfos = commCoreModule.getAllMessagesSync();
 
     // 2. Translate `ClientDBThreadInfo`s to `RawThreadInfo`s and
     //    `ClientDBMessageInfo`s to `RawMessageInfo`s.
     const rawThreadInfos = clientDBThreadInfos.map(
       convertClientDBThreadInfoToRawThreadInfo,
     );
     const rawMessageInfos = clientDBMessageInfos.map(
       translateClientDBMessageInfoToRawMessageInfo,
     );
 
     // 3. Unshim translated `RawMessageInfos` to get the TOGGLE_PIN messages
     const unshimmedRawMessageInfos = rawMessageInfos.map(messageInfo =>
       unshimFunc(messageInfo, new Set([messageTypes.TOGGLE_PIN])),
     );
 
     // 4. Filter out non-TOGGLE_PIN messages
     const filteredRawMessageInfos = unshimmedRawMessageInfos.filter(
       messageInfo => messageInfo.type === messageTypes.TOGGLE_PIN,
     );
 
     // 5. We want only the last TOGGLE_PIN message for each message ID,
     // so 'pin', 'unpin', 'pin' don't count as 3 pins, but only 1.
     const lastMessageIDToRawMessageInfoMap = new Map();
     for (const messageInfo of filteredRawMessageInfos) {
       const { targetMessageID } = messageInfo;
       lastMessageIDToRawMessageInfoMap.set(targetMessageID, messageInfo);
     }
     const lastMessageIDToRawMessageInfos = Array.from(
       lastMessageIDToRawMessageInfoMap.values(),
     );
 
     // 6. Create a Map of threadIDs to pinnedCount
     const threadIDsToPinnedCount = new Map();
     for (const messageInfo of lastMessageIDToRawMessageInfos) {
       const { threadID, type } = messageInfo;
       if (type === messageTypes.TOGGLE_PIN) {
         const pinnedCount = threadIDsToPinnedCount.get(threadID) || 0;
         threadIDsToPinnedCount.set(threadID, pinnedCount + 1);
       }
     }
 
     // 7. Include a pinnedCount for each rawThreadInfo
     const rawThreadInfosWithPinnedCount = rawThreadInfos.map(threadInfo => ({
       ...threadInfo,
       pinnedCount: threadIDsToPinnedCount.get(threadInfo.id) || 0,
     }));
 
     // 8. Convert rawThreadInfos to a map of threadID to threadInfo
     const threadIDToThreadInfo = rawThreadInfosWithPinnedCount.reduce(
       (acc, threadInfo) => {
         acc[threadInfo.id] = threadInfo;
         return acc;
       },
       {},
     );
 
     // 9. Add threadPermission to each threadInfo
     const rawThreadInfosWithThreadPermission =
       persistMigrationForManagePinsThreadPermission(threadIDToThreadInfo);
 
     // 10. Convert the new threadInfos back into an array
     const rawThreadInfosWithCountAndPermission = Object.keys(
       rawThreadInfosWithThreadPermission,
     ).map(id => rawThreadInfosWithThreadPermission[id]);
 
     // 11. Translate `RawThreadInfo`s to `ClientDBThreadInfo`s.
     const convertedClientDBThreadInfos =
       rawThreadInfosWithCountAndPermission.map(
         convertRawThreadInfoToClientDBThreadInfo,
       );
 
     // 12. Construct `ClientDBThreadStoreOperation`s to clear SQLite `threads`
     //    table and repopulate with `ClientDBThreadInfo`s.
     const operations: $ReadOnlyArray<ClientDBThreadStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...convertedClientDBThreadInfos.map((thread: ClientDBThreadInfo) => ({
         type: 'replace',
         payload: thread,
       })),
     ];
 
     // 13. Try processing `ClientDBThreadStoreOperation`s and log out if
     //    `processThreadStoreOperationsSync(...)` throws an exception.
     try {
       commCoreModule.processThreadStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [37]: state => {
     const operations = messageStoreOpsHandlers.convertOpsToClientDBOps([
       {
         type: 'remove_all_threads',
       },
       {
         type: 'replace_threads',
         payload: { threads: state.messageStore.threads },
       },
     ]);
 
     try {
       commCoreModule.processMessageStoreOperationsSync(operations);
     } catch (exception) {
       console.error(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [38]: state =>
     updateClientDBThreadStoreThreadInfos(state, updateRolesAndPermissions),
   [39]: (state: AppState) => unshimClientDB(state, [messageTypes.EDIT_MESSAGE]),
   [40]: state =>
     updateClientDBThreadStoreThreadInfos(state, updateRolesAndPermissions),
   [41]: (state: AppState) => {
     const queuedReports = state.reportStore.queuedReports.map(report => ({
       ...report,
       id: getUUID(),
     }));
     return {
       ...state,
       reportStore: { ...state.reportStore, queuedReports },
     };
   },
   [42]: (state: AppState) => {
     const reportStoreOperations: $ReadOnlyArray<ReportStoreOperation> = [
       { type: 'remove_all_reports' },
       ...convertReportsToReplaceReportOps(state.reportStore.queuedReports),
     ];
     const dbOperations: $ReadOnlyArray<ClientDBReportStoreOperation> =
       reportStoreOpsHandlers.convertOpsToClientDBOps(reportStoreOperations);
 
     try {
       commCoreModule.processReportStoreOperationsSync(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [43]: async state => {
     const { messages, drafts, threads, messageStoreThreads } =
       await commCoreModule.getClientDBStore();
 
     const messageStoreThreadsOperations =
       createUpdateDBOpsForMessageStoreThreads(
         messageStoreThreads,
         convertMessageStoreThreadsToNewIDSchema,
       );
 
     const messageStoreMessagesOperations =
       createUpdateDBOpsForMessageStoreMessages(messages, messageInfos =>
         messageInfos.map(convertRawMessageInfoToNewIDSchema),
       );
 
     const threadOperations = createUpdateDBOpsForThreadStoreThreadInfos(
       threads,
       convertThreadStoreThreadInfosToNewIDSchema,
     );
 
     const draftOperations = generateIDSchemaMigrationOpsForDrafts(drafts);
 
     try {
       await Promise.all([
         commCoreModule.processMessageStoreOperations([
           ...messageStoreMessagesOperations,
           ...messageStoreThreadsOperations,
         ]),
         commCoreModule.processThreadStoreOperations(threadOperations),
         commCoreModule.processDraftStoreOperations(draftOperations),
       ]);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     const inviteLinksStore =
       state.inviteLinksStore ?? defaultState.inviteLinksStore;
 
     return {
       ...state,
       entryStore: convertEntryStoreToNewIDSchema(state.entryStore),
       messageStore: convertMessageStoreToNewIDSchema(state.messageStore),
       calendarFilters: state.calendarFilters.map(
         convertCalendarFilterToNewIDSchema,
       ),
       connection: convertConnectionInfoToNewIDSchema(state.connection),
       watchedThreadIDs: state.watchedThreadIDs.map(
         id => `${ashoatKeyserverID}|${id}`,
       ),
       inviteLinksStore: convertInviteLinksStoreToNewIDSchema(inviteLinksStore),
     };
   },
   [44]: async state => {
     const { cookie, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: { keyserverInfos: { [ashoatKeyserverID]: { cookie } } },
     };
   },
   [45]: async state => {
     const { updatesCurrentAsOf, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             updatesCurrentAsOf,
           },
         },
       },
     };
   },
   [46]: async state => {
     const { currentAsOf } = state.messageStore;
 
     return {
       ...state,
       messageStore: {
         ...state.messageStore,
         currentAsOf: { [ashoatKeyserverID]: currentAsOf },
       },
     };
   },
   [47]: async state => {
     const { urlPrefix, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             urlPrefix,
           },
         },
       },
     };
   },
   [48]: async state => {
     const { connection, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             connection,
           },
         },
       },
     };
   },
   [49]: async state => {
     const { keyserverStore, ...rest } = state;
 
     const { connection, ...keyserverRest } =
       keyserverStore.keyserverInfos[ashoatKeyserverID];
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverRest,
           },
         },
       },
       connection,
     };
   },
   [50]: async state => {
     const { connection, ...rest } = state;
     const { actualizedCalendarQuery, ...connectionRest } = connection;
 
     return {
       ...rest,
       connection: connectionRest,
       actualizedCalendarQuery,
     };
   },
   [51]: async state => {
     const { lastCommunicatedPlatformDetails, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             lastCommunicatedPlatformDetails,
           },
         },
       },
     };
   },
   [52]: async state => ({
     ...state,
     integrityStore: {
       threadHashes: {},
       threadHashingStatus: 'data_not_loaded',
     },
   }),
   [53]: state => {
     if (!state.userStore.inconsistencyReports) {
       return state;
     }
     const reportStoreOperations = convertReportsToReplaceReportOps(
       state.userStore.inconsistencyReports,
     );
     const dbOperations: $ReadOnlyArray<ClientDBReportStoreOperation> =
       reportStoreOpsHandlers.convertOpsToClientDBOps(reportStoreOperations);
     try {
       commCoreModule.processReportStoreOperationsSync(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
 
     const { inconsistencyReports, ...newUserStore } = state.userStore;
     const queuedReports = reportStoreOpsHandlers.processStoreOperations(
       state.reportStore.queuedReports,
       reportStoreOperations,
     );
     return {
       ...state,
       userStore: newUserStore,
       reportStore: {
         ...state.reportStore,
         queuedReports,
       },
     };
   },
   [54]: state => {
     let updatedMessageStoreThreads: MessageStoreThreads = {};
     for (const threadID: string in state.messageStore.threads) {
       const { lastNavigatedTo, lastPruned, ...rest } =
         state.messageStore.threads[threadID];
 
       updatedMessageStoreThreads = {
         ...updatedMessageStoreThreads,
         [threadID]: rest,
       };
     }
 
     return {
       ...state,
       messageStore: {
         ...state.messageStore,
         threads: updatedMessageStoreThreads,
       },
     };
   },
   [55]: async state =>
     __DEV__
       ? {
           ...state,
           keyserverStore: {
             ...state.keyserverStore,
             keyserverInfos: {
               ...state.keyserverStore.keyserverInfos,
               [ashoatKeyserverID]: {
                 ...state.keyserverStore.keyserverInfos[ashoatKeyserverID],
                 urlPrefix: defaultURLPrefix,
               },
             },
           },
         }
       : state,
   [56]: state => {
     const { deviceToken, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             deviceToken,
           },
         },
       },
     };
   },
   [57]: async state => {
     const {
       // eslint-disable-next-line no-unused-vars
       connection,
       keyserverStore: { keyserverInfos },
       ...rest
     } = state;
-    const newKeyserverInfos = {};
+    const newKeyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in keyserverInfos) {
       newKeyserverInfos[key] = {
         ...keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
       };
     }
     return {
       ...rest,
       keyserverStore: {
         ...state.keyserverStore,
         keyserverInfos: newKeyserverInfos,
       },
     };
   },
   [58]: async (state: AppState) => {
     const userStoreOperations: $ReadOnlyArray<UserStoreOperation> = [
       { type: 'remove_all_users' },
       ...convertUserInfosToReplaceUserOps(state.userStore.userInfos),
     ];
     const dbOperations: $ReadOnlyArray<ClientDBUserStoreOperation> =
       userStoreOpsHandlers.convertOpsToClientDBOps(userStoreOperations);
 
     try {
       await commCoreModule.processUserStoreOperations(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [59]: state => {
     const clientDBThreadInfos = commCoreModule.getAllThreadsSync();
     const rawThreadInfos = clientDBThreadInfos.map(
       convertClientDBThreadInfoToRawThreadInfo,
     );
     const rawThreadInfosObject = rawThreadInfos.reduce((acc, threadInfo) => {
       acc[threadInfo.id] = threadInfo;
       return acc;
     }, {});
 
     const migratedRawThreadInfos =
       persistMigrationToRemoveSelectRolePermissions(rawThreadInfosObject);
 
     const migratedThreadInfosArray = Object.keys(migratedRawThreadInfos).map(
       id => migratedRawThreadInfos[id],
     );
     const convertedClientDBThreadInfos = migratedThreadInfosArray.map(
       convertRawThreadInfoToClientDBThreadInfo,
     );
     const operations: $ReadOnlyArray<ClientDBThreadStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...convertedClientDBThreadInfos.map((thread: ClientDBThreadInfo) => ({
         type: 'replace',
         payload: thread,
       })),
     ];
 
     try {
       commCoreModule.processThreadStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [60]: state =>
     updateClientDBThreadStoreThreadInfos(state, updateRolesAndPermissions),
 };
 
 // After migration 31, we'll no longer want to persist `messageStore.messages`
 // via redux-persist. However, we DO want to continue persisting everything in
 // `messageStore` EXCEPT for `messages`. The `blacklist` property in
 // `persistConfig` allows us to specify top-level keys that shouldn't be
 // persisted. However, we aren't able to specify nested keys in `blacklist`.
 // As a result, if we want to prevent nested keys from being persisted we'll
 // need to use `createTransform(...)` to specify an `inbound` function that
 // allows us to modify the `state` object before it's passed through
 // `JSON.stringify(...)` and written to disk. We specify the keys for which
 // this transformation should be executed in the `whitelist` property of the
 // `config` object that's passed to `createTransform(...)`.
 // eslint-disable-next-line no-unused-vars
 type PersistedMessageStore = {
   +local: { +[id: string]: LocalMessageInfo },
   +currentAsOf: { +[keyserverID: string]: number },
 };
 const messageStoreMessagesBlocklistTransform: Transform = createTransform(
   (state: MessageStore): PersistedMessageStore => {
     const { messages, threads, ...messageStoreSansMessages } = state;
     return { ...messageStoreSansMessages };
   },
   (state: MessageStore): MessageStore => {
     // We typically expect `messageStore.messages` to be `undefined` because
     // messages are persisted in the SQLite `messages` table rather than via
     // `redux-persist`. In this case we want to set `messageStore.messages`
     // to {} so we don't run into issues with `messageStore.messages` being
     // `undefined` (https://phab.comm.dev/D5545).
     //
     // However, in the case that a user is upgrading from a client where
     // `persistConfig.version` < 31, we expect `messageStore.messages` to
     // contain messages stored via `redux-persist` that we need in order
     // to correctly populate the SQLite `messages` table in migration 31
     // (https://phab.comm.dev/D2600).
     //
     // However, because `messageStoreMessagesBlocklistTransform` modifies
     // `messageStore` before migrations are run, we need to make sure we aren't
     // inadvertently clearing `messageStore.messages` (by setting to {}) before
     // messages are stored in SQLite (https://linear.app/comm/issue/ENG-2377).
     return {
       ...state,
       threads: state.threads ?? {},
       messages: state.messages ?? {},
     };
   },
   { whitelist: ['messageStore'] },
 );
 
 type PersistedReportStore = $Diff<
   ReportStore,
   { +queuedReports: $ReadOnlyArray<ClientReportCreationRequest> },
 >;
 const reportStoreTransform: Transform = createTransform(
   (state: ReportStore): PersistedReportStore => {
     return { enabledReports: state.enabledReports };
   },
   (state: PersistedReportStore): ReportStore => {
     return { ...state, queuedReports: [] };
   },
   { whitelist: ['reportStore'] },
 );
 
 type PersistedKeyserverInfo = $Diff<
   KeyserverInfo,
   { +connection: ConnectionInfo },
 >;
 type PersistedKeyserverStore = {
   +keyserverInfos: { +[key: string]: PersistedKeyserverInfo },
 };
 const keyserverStoreTransform: Transform = createTransform(
   (state: KeyserverStore): PersistedKeyserverStore => {
-    const keyserverInfos = {};
+    const keyserverInfos: { [string]: PersistedKeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       const { connection, ...rest } = state.keyserverInfos[key];
       keyserverInfos[key] = rest;
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   (state: PersistedKeyserverStore): KeyserverStore => {
-    const keyserverInfos = {};
+    const keyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       keyserverInfos[key] = {
         ...state.keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
       };
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   { whitelist: ['keyserverStore'] },
 );
 
 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
   blacklist: [
     'loadingStatuses',
     'lifecycleState',
     'dimensions',
     'draftStore',
     'connectivity',
     'deviceOrientation',
     'frozen',
     'threadStore',
     'storeLoaded',
     'connection',
   ],
   debug: __DEV__,
   version: 60,
   transforms: [
     messageStoreMessagesBlocklistTransform,
     reportStoreTransform,
     keyserverStoreTransform,
   ],
   migrate: (createAsyncMigrate(migrations, { debug: __DEV__ }): any),
   timeout: ((__DEV__ ? 0 : undefined): number | void),
 };
 
 const codeVersion: number = commCoreModule.getCodeVersion();
 
 // This local exists to avoid a circular dependency where redux-setup needs to
 // import all the navigation and screen stuff, but some of those screens want to
 // access the persistor to purge its state.
 let storedPersistor = null;
 function setPersistor(persistor: *) {
   storedPersistor = persistor;
 }
 function getPersistor(): empty {
   invariant(storedPersistor, 'should be set');
   return storedPersistor;
 }
 
 export { persistConfig, codeVersion, setPersistor, getPersistor };
diff --git a/native/redux/redux-setup.js b/native/redux/redux-setup.js
index d8f45b45d..435997160 100644
--- a/native/redux/redux-setup.js
+++ b/native/redux/redux-setup.js
@@ -1,386 +1,388 @@
 // @flow
 
 import { AppState as NativeAppState, Alert } from 'react-native';
 import { createStore, applyMiddleware, type Store, compose } from 'redux';
 import { persistStore, persistReducer } from 'redux-persist';
 import thunk from 'redux-thunk';
 
 import { setClientDBStoreActionType } from 'lib/actions/client-db-store-actions.js';
 import { siweAuthActionTypes } from 'lib/actions/siwe-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
 } from 'lib/actions/user-actions.js';
 import type { ThreadStoreOperation } from 'lib/ops/thread-store-ops.js';
 import { threadStoreOpsHandlers } from 'lib/ops/thread-store-ops.js';
 import baseReducer from 'lib/reducers/master-reducer.js';
 import {
   invalidSessionDowngrade,
   invalidSessionRecovery,
 } from 'lib/shared/session-utils.js';
 import { isStaff } from 'lib/shared/staff-utils.js';
 import type { Dispatch, BaseAction } from 'lib/types/redux-types.js';
 import { rehydrateActionType } from 'lib/types/redux-types.js';
 import type { SetSessionPayload } from 'lib/types/session-types.js';
 import { reduxLoggerMiddleware } from 'lib/utils/action-logger.js';
 import { setNewSessionActionType } from 'lib/utils/action-utils.js';
 
 import {
   updateDimensionsActiveType,
   updateConnectivityActiveType,
   updateDeviceCameraInfoActionType,
   updateDeviceOrientationActionType,
   backgroundActionTypes,
   setReduxStateActionType,
   setStoreLoadedActionType,
   type Action,
   setLocalSettingsActionType,
 } from './action-types.js';
 import { defaultState } from './default-state.js';
 import { remoteReduxDevServerConfig } from './dev-tools.js';
 import { persistConfig, setPersistor } from './persist.js';
 import { onStateDifference } from './redux-debug-utils.js';
 import { processDBStoreOperations } from './redux-utils.js';
 import type { AppState } from './state-types.js';
 import { getGlobalNavContext } from '../navigation/icky-global.js';
 import { activeMessageListSelector } from '../navigation/nav-selectors.js';
 import reactotron from '../reactotron.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import { isStaffRelease } from '../utils/staff-utils.js';
 import { setCustomServer, getDevServerHostname } from '../utils/url-utils.js';
 
 function reducer(state: AppState = defaultState, action: Action) {
   if (action.type === setReduxStateActionType) {
     return action.payload.state;
   }
 
   // We want to alert staff/developers if there's a difference between the keys
   // we expect to see REHYDRATED and the keys that are actually REHYDRATED.
   // Context: https://linear.app/comm/issue/ENG-2127/
   if (
     action.type === rehydrateActionType &&
     (__DEV__ ||
       isStaffRelease ||
       (state.currentUserInfo &&
         state.currentUserInfo.id &&
         isStaff(state.currentUserInfo.id)))
   ) {
     // 1. Construct set of keys expected to be REHYDRATED
-    const defaultKeys = Object.keys(defaultState);
+    const defaultKeys: $ReadOnlyArray<string> = Object.keys(defaultState);
     const expectedKeys = defaultKeys.filter(
       each => !persistConfig.blacklist.includes(each),
     );
     const expectedKeysSet = new Set(expectedKeys);
 
     // 2. Construct set of keys actually REHYDRATED
-    const rehydratedKeys = Object.keys(action.payload ?? {});
+    const rehydratedKeys: $ReadOnlyArray<string> = Object.keys(
+      action.payload ?? {},
+    );
     const rehydratedKeysSet = new Set(rehydratedKeys);
 
     // 3. Determine the difference between the two sets
     const expectedKeysNotRehydrated = expectedKeys.filter(
       each => !rehydratedKeysSet.has(each),
     );
     const rehydratedKeysNotExpected = rehydratedKeys.filter(
       each => !expectedKeysSet.has(each),
     );
 
     // 4. Display alerts with the differences between the two sets
     if (expectedKeysNotRehydrated.length > 0) {
       Alert.alert(
         `EXPECTED KEYS NOT REHYDRATED: ${JSON.stringify(
           expectedKeysNotRehydrated,
         )}`,
       );
     }
     if (rehydratedKeysNotExpected.length > 0) {
       Alert.alert(
         `REHYDRATED KEYS NOT EXPECTED: ${JSON.stringify(
           rehydratedKeysNotExpected,
         )}`,
       );
     }
   }
 
   if (
     (action.type === setNewSessionActionType &&
       invalidSessionDowngrade(
         state,
         action.payload.sessionChange.currentUserInfo,
         action.payload.preRequestUserState,
       )) ||
     (action.type === logOutActionTypes.success &&
       invalidSessionDowngrade(
         state,
         action.payload.currentUserInfo,
         action.payload.preRequestUserState,
       )) ||
     (action.type === deleteAccountActionTypes.success &&
       invalidSessionDowngrade(
         state,
         action.payload.currentUserInfo,
         action.payload.preRequestUserState,
       ))
   ) {
     return state;
   }
   if (
     (action.type === setNewSessionActionType &&
       action.payload.sessionChange.currentUserInfo &&
       invalidSessionRecovery(
         state,
         action.payload.sessionChange.currentUserInfo,
         action.payload.logInActionSource,
       )) ||
     ((action.type === logInActionTypes.success ||
       action.type === siweAuthActionTypes.success) &&
       invalidSessionRecovery(
         state,
         action.payload.currentUserInfo,
         action.payload.logInActionSource,
       ))
   ) {
     return state;
   }
 
   if (action.type === setCustomServer) {
     return {
       ...state,
       customServer: action.payload,
     };
   } else if (action.type === updateDimensionsActiveType) {
     return {
       ...state,
       dimensions: {
         ...state.dimensions,
         ...action.payload,
       },
     };
   } else if (action.type === updateConnectivityActiveType) {
     return {
       ...state,
       connectivity: action.payload,
     };
   } else if (action.type === updateDeviceCameraInfoActionType) {
     return {
       ...state,
       deviceCameraInfo: {
         ...state.deviceCameraInfo,
         ...action.payload,
       },
     };
   } else if (action.type === updateDeviceOrientationActionType) {
     return {
       ...state,
       deviceOrientation: action.payload,
     };
   } else if (action.type === setLocalSettingsActionType) {
     return {
       ...state,
       localSettings: { ...state.localSettings, ...action.payload },
     };
   } else if (
     action.type === logOutActionTypes.started ||
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success
   ) {
     state = {
       ...state,
       localSettings: {
         isBackupEnabled: false,
       },
     };
   }
 
   if (action.type === setNewSessionActionType) {
     sessionInvalidationAlert(action.payload);
   }
   if (action.type === setStoreLoadedActionType) {
     return {
       ...state,
       storeLoaded: true,
     };
   }
   if (action.type === setClientDBStoreActionType) {
     state = {
       ...state,
       storeLoaded: true,
     };
     const currentLoggedInUserID = state.currentUserInfo?.anonymous
       ? undefined
       : state.currentUserInfo?.id;
     const actionCurrentLoggedInUserID = action.payload.currentUserID;
     if (
       !currentLoggedInUserID ||
       !actionCurrentLoggedInUserID ||
       actionCurrentLoggedInUserID !== currentLoggedInUserID
     ) {
       // If user is logged out now, was logged out at the time action was
       // dispatched or their ID changed between action dispatch and a
       // call to reducer we ignore the SQLite data since it is not valid
       return state;
     }
   }
 
   const baseReducerResult = baseReducer(
     state,
     (action: BaseAction),
     onStateDifference,
   );
   state = baseReducerResult.state;
 
   const { storeOperations } = baseReducerResult;
   const {
     draftStoreOperations,
     threadStoreOperations,
     messageStoreOperations,
     reportStoreOperations,
     userStoreOperations,
   } = storeOperations;
 
   const fixUnreadActiveThreadResult = fixUnreadActiveThread(state, action);
   state = fixUnreadActiveThreadResult.state;
 
   const threadStoreOperationsWithUnreadFix = [
     ...threadStoreOperations,
     ...fixUnreadActiveThreadResult.threadStoreOperations,
   ];
 
   processDBStoreOperations({
     draftStoreOperations,
     messageStoreOperations,
     threadStoreOperations: threadStoreOperationsWithUnreadFix,
     reportStoreOperations,
     userStoreOperations,
   });
 
   return state;
 }
 
 function sessionInvalidationAlert(payload: SetSessionPayload) {
   if (
     !payload.sessionChange.cookieInvalidated ||
     !payload.preRequestUserState ||
     !payload.preRequestUserState.currentUserInfo ||
     payload.preRequestUserState.currentUserInfo.anonymous
   ) {
     return;
   }
   if (payload.error === 'client_version_unsupported') {
     Alert.alert(
       AppOutOfDateAlertDetails.title,
       AppOutOfDateAlertDetails.message,
       [{ text: 'OK' }],
       {
         cancelable: true,
       },
     );
   } else {
     Alert.alert(
       'Session invalidated',
       'We’re sorry, but your session was invalidated by the server. ' +
         'Please log in again.',
       [{ text: 'OK' }],
       { cancelable: true },
     );
   }
 }
 
 // Makes sure a currently focused thread is never unread. Note that we consider
 // a backgrounded NativeAppState to actually be active if it last changed to
 // inactive more than 10 seconds ago. This is because there is a delay when
 // NativeAppState is updating in response to a foreground, and actions don't get
 // processed more than 10 seconds after a backgrounding anyways. However we
 // don't consider this for action types that can be expected to happen while the
 // app is backgrounded.
 type FixUnreadActiveThreadResult = {
   +state: AppState,
   +threadStoreOperations: $ReadOnlyArray<ThreadStoreOperation>,
 };
 
 function fixUnreadActiveThread(
   state: AppState,
   action: *,
 ): FixUnreadActiveThreadResult {
   const navContext = getGlobalNavContext();
   const activeThread = activeMessageListSelector(navContext);
   if (
     !activeThread ||
     !state.threadStore.threadInfos[activeThread]?.currentUser.unread ||
     (NativeAppState.currentState !== 'active' &&
       (appLastBecameInactive + 10000 >= Date.now() ||
         backgroundActionTypes.has(action.type)))
   ) {
     return { state, threadStoreOperations: [] };
   }
 
   const updatedActiveThreadInfo = {
     ...state.threadStore.threadInfos[activeThread],
     currentUser: {
       ...state.threadStore.threadInfos[activeThread].currentUser,
       unread: false,
     },
   };
 
   const threadStoreOperations = [
     {
       type: 'replace',
       payload: {
         id: activeThread,
         threadInfo: updatedActiveThreadInfo,
       },
     },
   ];
 
   const updatedThreadStore = threadStoreOpsHandlers.processStoreOperations(
     state.threadStore,
     threadStoreOperations,
   );
 
   return {
     state: { ...state, threadStore: updatedThreadStore },
     threadStoreOperations,
   };
 }
 
 let appLastBecameInactive = 0;
 
 function appBecameInactive() {
   appLastBecameInactive = Date.now();
 }
 
 const middleware = applyMiddleware(thunk, reduxLoggerMiddleware);
 
 let composeFunc = compose;
 if (__DEV__ && global.HermesInternal) {
   const { composeWithDevTools } = require('remote-redux-devtools/src/index.js');
   composeFunc = composeWithDevTools({
     name: 'Redux',
     hostname: getDevServerHostname(),
     ...remoteReduxDevServerConfig,
   });
 } else if (global.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
   composeFunc = global.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
     name: 'Redux',
   });
 }
 
 let enhancers;
 if (reactotron) {
   enhancers = composeFunc(middleware, reactotron.createEnhancer());
 } else {
   enhancers = composeFunc(middleware);
 }
 
 const store: Store<AppState, *> = createStore(
   persistReducer(persistConfig, reducer),
   defaultState,
   enhancers,
 );
 const persistor = persistStore(store);
 setPersistor(persistor);
 
 const unsafeDispatch: any = store.dispatch;
 const dispatch: Dispatch = unsafeDispatch;
 
 export { store, dispatch, appBecameInactive };
diff --git a/native/redux/remove-select-role-permissions.js b/native/redux/remove-select-role-permissions.js
index 908aa6703..109946224 100644
--- a/native/redux/remove-select-role-permissions.js
+++ b/native/redux/remove-select-role-permissions.js
@@ -1,45 +1,49 @@
 // @flow
 
-import type { RawThreadInfos } from 'lib/types/thread-types.js';
+import type {
+  RawThreadInfos,
+  RawThreadInfo,
+  RoleInfo,
+} from 'lib/types/thread-types.js';
 import { permissionsToRemoveInMigration } from 'lib/utils/migration-utils.js';
 
 function persistMigrationToRemoveSelectRolePermissions(
   rawThreadInfos: RawThreadInfos,
 ): RawThreadInfos {
   // This is to handle the client being logged out and not having any threads
   // to provide here. In this case, we want the migration to still succeed
   // so we early return an empty object.
   if (!rawThreadInfos) {
     return {};
   }
 
-  const updatedThreadInfos = {};
+  const updatedThreadInfos: { [string]: RawThreadInfo } = {};
   for (const threadID in rawThreadInfos) {
     const threadInfo = rawThreadInfos[threadID];
     const { roles } = threadInfo;
 
-    const updatedRoles = {};
+    const updatedRoles: { [string]: RoleInfo } = {};
     for (const roleID in roles) {
       const role = roles[roleID];
       const { permissions: rolePermissions } = role;
-      const updatedPermissions = {};
+      const updatedPermissions: { [string]: boolean } = {};
       for (const permission in rolePermissions) {
         if (!permissionsToRemoveInMigration.includes(permission)) {
           updatedPermissions[permission] = rolePermissions[permission];
         }
       }
       updatedRoles[roleID] = { ...role, permissions: updatedPermissions };
     }
 
     const updatedThreadInfo = {
       ...threadInfo,
       roles: updatedRoles,
     };
 
     updatedThreadInfos[threadID] = updatedThreadInfo;
   }
 
   return updatedThreadInfos;
 }
 
 export { persistMigrationToRemoveSelectRolePermissions };
diff --git a/native/redux/update-roles-and-permissions.js b/native/redux/update-roles-and-permissions.js
index e51ab258b..05e30cb7f 100644
--- a/native/redux/update-roles-and-permissions.js
+++ b/native/redux/update-roles-and-permissions.js
@@ -1,162 +1,164 @@
 // @flow
 
 import {
   getAllThreadPermissions,
   getRolePermissionBlobs,
   makePermissionsBlob,
   makePermissionsForChildrenBlob,
 } from 'lib/permissions/thread-permissions.js';
 import type { ThreadPermissionsBlob } from 'lib/types/thread-permission-types.js';
 import type {
   RawThreadInfo,
   ThreadStoreThreadInfos,
   MemberInfo,
 } from 'lib/types/thread-types.js';
 import { values } from 'lib/utils/objects.js';
 
 type ThreadTraversalNode = {
   +threadID: string,
   +children: ?$ReadOnlyArray<ThreadTraversalNode>,
 };
 
 function constructThreadTraversalNodes(
   threadStoreInfos: ThreadStoreThreadInfos,
 ): $ReadOnlyArray<$ReadOnly<ThreadTraversalNode>> {
-  const parentThreadMap = {};
+  const parentThreadMap: { [string]: Array<string> } = {};
 
   for (const threadInfo of values(threadStoreInfos)) {
     const parentThreadID = threadInfo.parentThreadID ?? 'root';
     parentThreadMap[parentThreadID] = [
       ...(parentThreadMap[parentThreadID] ?? []),
       threadInfo.id,
     ];
   }
 
   const constructNodes = nodeID => ({
     threadID: nodeID,
     children: parentThreadMap[nodeID]?.map(constructNodes) ?? null,
   });
 
   if (!parentThreadMap['root']) {
     return [];
   }
 
   return parentThreadMap['root'].map(constructNodes);
 }
 
 type MemberToThreadPermissionsFromParent = {
   +[member: string]: ?ThreadPermissionsBlob,
 };
 
 function updateRolesAndPermissions(
   threadStoreInfos: ThreadStoreThreadInfos,
 ): ThreadStoreThreadInfos {
   const updatedThreadStoreInfos = { ...threadStoreInfos };
 
   const recursivelyUpdateRoles = (node: $ReadOnly<ThreadTraversalNode>) => {
     const threadInfo: RawThreadInfo = updatedThreadStoreInfos[node.threadID];
     const computedRolePermissionBlobs = getRolePermissionBlobs(threadInfo.type);
 
     const roles = { ...threadInfo.roles };
     for (const roleID of Object.keys(roles)) {
       roles[roleID] = {
         ...roles[roleID],
         permissions: computedRolePermissionBlobs[roles[roleID].name],
       };
     }
     updatedThreadStoreInfos[node.threadID] = {
       ...threadInfo,
       roles,
     };
 
     return node.children?.map(recursivelyUpdateRoles);
   };
 
   const recursivelyUpdatePermissions = (
     node: $ReadOnly<ThreadTraversalNode>,
     memberToThreadPermissionsFromParent: ?MemberToThreadPermissionsFromParent,
   ) => {
     const threadInfo: RawThreadInfo = updatedThreadStoreInfos[node.threadID];
 
     const updatedMembers = [];
-    const memberToThreadPermissionsForChildren = {};
+    const memberToThreadPermissionsForChildren: {
+      [string]: ?ThreadPermissionsBlob,
+    } = {};
     for (const member: MemberInfo of threadInfo.members) {
       const { id, role } = member;
 
       const rolePermissions = role ? threadInfo.roles[role].permissions : null;
       const permissionsFromParent = memberToThreadPermissionsFromParent?.[id];
 
       const computedPermissions = makePermissionsBlob(
         rolePermissions,
         permissionsFromParent,
         threadInfo.id,
         threadInfo.type,
       );
 
       updatedMembers.push({
         ...member,
         permissions: getAllThreadPermissions(
           computedPermissions,
           threadInfo.id,
         ),
       });
 
       memberToThreadPermissionsForChildren[member.id] =
         makePermissionsForChildrenBlob(computedPermissions);
     }
 
     updatedThreadStoreInfos[node.threadID] = {
       ...threadInfo,
       members: updatedMembers,
     };
 
     return node.children?.map(child =>
       recursivelyUpdatePermissions(child, memberToThreadPermissionsForChildren),
     );
   };
 
   const recursivelyUpdateCurrentMemberPermissions = (
     node: $ReadOnly<ThreadTraversalNode>,
     permissionsFromParent: ?ThreadPermissionsBlob,
   ) => {
     const threadInfo: RawThreadInfo = updatedThreadStoreInfos[node.threadID];
     const { currentUser, roles } = threadInfo;
     const { role } = currentUser;
 
     const rolePermissions = role ? roles[role].permissions : null;
     const computedPermissions = makePermissionsBlob(
       rolePermissions,
       permissionsFromParent,
       threadInfo.id,
       threadInfo.type,
     );
 
     updatedThreadStoreInfos[node.threadID] = {
       ...threadInfo,
       currentUser: {
         ...currentUser,
         permissions: getAllThreadPermissions(
           computedPermissions,
           threadInfo.id,
         ),
       },
     };
 
     return node.children?.map(child =>
       recursivelyUpdateCurrentMemberPermissions(
         child,
         makePermissionsForChildrenBlob(computedPermissions),
       ),
     );
   };
 
   const rootNodes = constructThreadTraversalNodes(updatedThreadStoreInfos);
   rootNodes.forEach(recursivelyUpdateRoles);
   rootNodes.forEach(node => recursivelyUpdatePermissions(node, null));
   rootNodes.forEach(node =>
     recursivelyUpdateCurrentMemberPermissions(node, null),
   );
   return updatedThreadStoreInfos;
 }
 
 export { updateRolesAndPermissions };
diff --git a/native/themes/colors.js b/native/themes/colors.js
index c923c534d..72ea3daee 100644
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -1,393 +1,393 @@
 // @flow
 
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { createSelector } from 'reselect';
 
 import type { GlobalTheme } from 'lib/types/theme-types.js';
 
 import { selectBackgroundIsDark } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { AppState } from '../redux/state-types.js';
 
 const designSystemColors = Object.freeze({
   shadesWhite100: '#ffffff',
   shadesWhite90: '#f5f5f5',
   shadesWhite80: '#ebebeb',
   shadesWhite70: '#e0e0e0',
   shadesWhite60: '#cccccc',
 
   shadesBlack95: '#0a0a0a',
   shadesBlack90: '#191919',
   shadesBlack85: '#1f1f1f',
   shadesBlack75: '#404040',
   shadesBlack60: '#666666',
   shadesBlack50: '#808080',
 
   violetDark100: '#7e57c2',
   violetDark80: '#6d49ab',
   violetDark60: '#563894',
   violetDark40: '#44297a',
   violetDark20: '#331f5c',
 
   violetLight100: '#ae94db',
   violetLight80: '#b9a4df',
   violetLight60: '#d3c6ec',
   violetLight40: '#e8e0f5',
   violetLight20: '#f3f0fa',
 
   successLight10: '#d5f6e3',
   successLight50: '#6cdf9c',
   successPrimary: '#00c853',
   successDark50: '#029841',
   successDark90: '#034920',
 
   errorLight10: '#feebe6',
   errorLight50: '#f9947b',
   errorPrimary: '#f53100',
   errorDark50: '#b62602',
   errorDark90: '#4f1203',
 
   spoilerColor: '#33332c',
 });
 
 const light = Object.freeze({
   blockQuoteBackground: designSystemColors.shadesWhite70,
   blockQuoteBorder: designSystemColors.shadesWhite60,
   codeBackground: designSystemColors.shadesWhite70,
   disabledButton: designSystemColors.shadesWhite70,
   disabledButtonText: designSystemColors.shadesBlack50,
   disconnectedBarBackground: designSystemColors.shadesWhite90,
   editButton: '#A4A4A2',
   floatingButtonBackground: '#999999',
   floatingButtonLabel: designSystemColors.shadesWhite80,
   headerChevron: designSystemColors.shadesBlack95,
   inlineEngagementBackground: designSystemColors.shadesWhite70,
   inlineEngagementLabel: designSystemColors.shadesBlack95,
   link: designSystemColors.violetDark100,
   listBackground: designSystemColors.shadesWhite100,
   listBackgroundLabel: designSystemColors.shadesBlack95,
   listBackgroundSecondaryLabel: '#444444',
   listBackgroundTernaryLabel: '#999999',
   listChatBubble: '#F1F0F5',
   listForegroundLabel: designSystemColors.shadesBlack95,
   listForegroundSecondaryLabel: '#333333',
   listForegroundTertiaryLabel: designSystemColors.shadesBlack60,
   listInputBackground: designSystemColors.shadesWhite90,
   listInputBar: '#E2E2E2',
   listInputButton: '#8E8D92',
   listIosHighlightUnderlay: '#DDDDDDDD',
   listSearchBackground: designSystemColors.shadesWhite90,
   listSearchIcon: '#8E8D92',
   listSeparatorLabel: designSystemColors.shadesBlack60,
   modalBackground: designSystemColors.shadesWhite80,
   modalBackgroundLabel: '#333333',
   modalBackgroundSecondaryLabel: '#AAAAAA',
   modalButton: '#BBBBBB',
   modalButtonLabel: designSystemColors.shadesBlack95,
   modalContrastBackground: designSystemColors.shadesBlack95,
   modalContrastForegroundLabel: designSystemColors.shadesWhite100,
   modalContrastOpacity: 0.7,
   modalForeground: designSystemColors.shadesWhite100,
   modalForegroundBorder: designSystemColors.shadesWhite60,
   modalForegroundLabel: designSystemColors.shadesBlack95,
   modalForegroundSecondaryLabel: '#888888',
   modalForegroundTertiaryLabel: '#AAAAAA',
   modalIosHighlightUnderlay: '#CCCCCCDD',
   modalSubtext: designSystemColors.shadesWhite60,
   modalSubtextLabel: designSystemColors.shadesBlack60,
   modalInputBackground: designSystemColors.shadesWhite60,
   modalInputForeground: designSystemColors.shadesWhite90,
   modalKnob: designSystemColors.shadesWhite90,
   modalAccentBackground: designSystemColors.shadesWhite90,
   navigationCard: designSystemColors.shadesWhite100,
   navigationChevron: designSystemColors.shadesWhite60,
   panelBackground: designSystemColors.shadesWhite90,
   panelBackgroundLabel: '#888888',
   panelButton: designSystemColors.shadesWhite70,
   panelForeground: designSystemColors.shadesWhite100,
   panelForegroundBorder: designSystemColors.shadesWhite60,
   panelForegroundLabel: designSystemColors.shadesBlack95,
   panelForegroundSecondaryLabel: '#333333',
   panelForegroundTertiaryLabel: '#888888',
   panelInputBackground: designSystemColors.shadesWhite60,
   panelInputSecondaryForeground: designSystemColors.shadesBlack50,
   panelIosHighlightUnderlay: '#EBEBEBDD',
   panelSecondaryForeground: designSystemColors.shadesWhite80,
   panelSecondaryForegroundBorder: designSystemColors.shadesWhite70,
   panelSeparator: designSystemColors.shadesWhite60,
   purpleLink: designSystemColors.violetDark100,
   purpleButton: designSystemColors.violetDark100,
   reactionSelectionPopoverItemBackground: designSystemColors.shadesBlack75,
   redText: designSystemColors.errorPrimary,
   spoiler: designSystemColors.spoilerColor,
   tabBarAccent: designSystemColors.violetDark100,
   tabBarBackground: designSystemColors.shadesWhite90,
   tabBarActiveTintColor: designSystemColors.violetDark100,
   vibrantGreenButton: designSystemColors.successPrimary,
   vibrantRedButton: designSystemColors.errorPrimary,
   whiteText: designSystemColors.shadesWhite100,
   tooltipBackground: designSystemColors.shadesWhite70,
   logInSpacer: '#FFFFFF33',
   siweButton: designSystemColors.shadesWhite100,
   siweButtonText: designSystemColors.shadesBlack85,
   drawerExpandButton: designSystemColors.shadesBlack50,
   drawerExpandButtonDisabled: designSystemColors.shadesWhite60,
   drawerItemLabelLevel0: designSystemColors.shadesBlack95,
   drawerItemLabelLevel1: designSystemColors.shadesBlack95,
   drawerItemLabelLevel2: designSystemColors.shadesBlack85,
   drawerOpenCommunityBackground: designSystemColors.shadesWhite90,
   drawerBackground: designSystemColors.shadesWhite100,
   subthreadsModalClose: designSystemColors.shadesBlack50,
   subthreadsModalBackground: designSystemColors.shadesWhite80,
   subthreadsModalSearch: '#00000008',
   messageLabel: designSystemColors.shadesBlack95,
   modalSeparator: designSystemColors.shadesWhite60,
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesBlack95,
   inviteLinkButtonBackground: designSystemColors.shadesWhite60,
   greenIndicatorInner: designSystemColors.successPrimary,
   greenIndicatorOuter: designSystemColors.successDark50,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark50,
 });
 export type Colors = $Exact<typeof light>;
 
 const dark: Colors = Object.freeze({
   blockQuoteBackground: '#A9A9A9',
   blockQuoteBorder: designSystemColors.shadesBlack50,
   codeBackground: designSystemColors.shadesBlack95,
   disabledButton: designSystemColors.shadesBlack75,
   disabledButtonText: designSystemColors.shadesBlack50,
   disconnectedBarBackground: designSystemColors.shadesBlack85,
   editButton: designSystemColors.shadesBlack60,
   floatingButtonBackground: designSystemColors.shadesBlack60,
   floatingButtonLabel: designSystemColors.shadesWhite100,
   headerChevron: designSystemColors.shadesWhite100,
   inlineEngagementBackground: designSystemColors.shadesBlack60,
   inlineEngagementLabel: designSystemColors.shadesWhite100,
   link: designSystemColors.violetLight100,
   listBackground: designSystemColors.shadesBlack95,
   listBackgroundLabel: designSystemColors.shadesWhite60,
   listBackgroundSecondaryLabel: '#BBBBBB',
   listBackgroundTernaryLabel: designSystemColors.shadesBlack50,
   listChatBubble: '#26252A',
   listForegroundLabel: designSystemColors.shadesWhite100,
   listForegroundSecondaryLabel: designSystemColors.shadesWhite60,
   listForegroundTertiaryLabel: designSystemColors.shadesBlack50,
   listInputBackground: designSystemColors.shadesBlack85,
   listInputBar: designSystemColors.shadesBlack60,
   listInputButton: designSystemColors.shadesWhite60,
   listIosHighlightUnderlay: '#BBBBBB88',
   listSearchBackground: designSystemColors.shadesBlack85,
   listSearchIcon: designSystemColors.shadesWhite60,
   listSeparatorLabel: designSystemColors.shadesWhite80,
   modalBackground: designSystemColors.shadesBlack95,
   modalBackgroundLabel: designSystemColors.shadesWhite60,
   modalBackgroundSecondaryLabel: designSystemColors.shadesBlack60,
   modalButton: designSystemColors.shadesBlack60,
   modalButtonLabel: designSystemColors.shadesWhite100,
   modalContrastBackground: designSystemColors.shadesWhite100,
   modalContrastForegroundLabel: designSystemColors.shadesBlack95,
   modalContrastOpacity: 0.85,
   modalForeground: designSystemColors.shadesBlack85,
   modalForegroundBorder: designSystemColors.shadesBlack85,
   modalForegroundLabel: designSystemColors.shadesWhite100,
   modalForegroundSecondaryLabel: '#AAAAAA',
   modalForegroundTertiaryLabel: designSystemColors.shadesBlack60,
   modalIosHighlightUnderlay: '#AAAAAA88',
   modalSubtext: designSystemColors.shadesBlack75,
   modalSubtextLabel: '#AAAAAA',
   modalInputBackground: designSystemColors.shadesBlack75,
   modalInputForeground: designSystemColors.shadesBlack50,
   modalKnob: designSystemColors.shadesWhite90,
   modalAccentBackground: designSystemColors.shadesBlack90,
   navigationCard: '#2A2A2A',
   navigationChevron: designSystemColors.shadesBlack60,
   panelBackground: designSystemColors.shadesBlack95,
   panelBackgroundLabel: designSystemColors.shadesWhite60,
   panelButton: designSystemColors.shadesBlack60,
   panelForeground: designSystemColors.shadesBlack85,
   panelForegroundBorder: '#2C2C2E',
   panelForegroundLabel: designSystemColors.shadesWhite100,
   panelForegroundSecondaryLabel: designSystemColors.shadesWhite60,
   panelForegroundTertiaryLabel: '#AAAAAA',
   panelInputBackground: designSystemColors.shadesBlack75,
   panelInputSecondaryForeground: designSystemColors.shadesBlack50,
   panelIosHighlightUnderlay: '#313035',
   panelSecondaryForeground: designSystemColors.shadesBlack75,
   panelSecondaryForegroundBorder: designSystemColors.shadesBlack60,
   panelSeparator: designSystemColors.shadesBlack75,
   purpleLink: designSystemColors.violetLight100,
   purpleButton: designSystemColors.violetDark100,
   reactionSelectionPopoverItemBackground: designSystemColors.shadesBlack75,
   redText: designSystemColors.errorPrimary,
   spoiler: designSystemColors.spoilerColor,
   tabBarAccent: designSystemColors.violetLight100,
   tabBarBackground: designSystemColors.shadesBlack95,
   tabBarActiveTintColor: designSystemColors.violetLight100,
   vibrantGreenButton: designSystemColors.successPrimary,
   vibrantRedButton: designSystemColors.errorPrimary,
   whiteText: designSystemColors.shadesWhite100,
   tooltipBackground: designSystemColors.shadesBlack85,
   logInSpacer: '#FFFFFF33',
   siweButton: designSystemColors.shadesWhite100,
   siweButtonText: designSystemColors.shadesBlack85,
   drawerExpandButton: designSystemColors.shadesBlack50,
   drawerExpandButtonDisabled: designSystemColors.shadesBlack75,
   drawerItemLabelLevel0: designSystemColors.shadesWhite60,
   drawerItemLabelLevel1: designSystemColors.shadesWhite60,
   drawerItemLabelLevel2: designSystemColors.shadesWhite90,
   drawerOpenCommunityBackground: designSystemColors.shadesBlack90,
   drawerBackground: designSystemColors.shadesBlack85,
   subthreadsModalClose: designSystemColors.shadesBlack50,
   subthreadsModalBackground: designSystemColors.shadesBlack85,
   subthreadsModalSearch: '#FFFFFF04',
   typeaheadTooltipBackground: '#1F1F1f',
   typeaheadTooltipBorder: designSystemColors.shadesBlack75,
   typeaheadTooltipText: 'white',
   messageLabel: designSystemColors.shadesWhite60,
   modalSeparator: designSystemColors.shadesBlack75,
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesWhite80,
   inviteLinkButtonBackground: designSystemColors.shadesBlack75,
   greenIndicatorInner: designSystemColors.successPrimary,
   greenIndicatorOuter: designSystemColors.successDark90,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark90,
 });
 const colors = { light, dark };
 
 const colorsSelector: (state: AppState) => Colors = createSelector(
   (state: AppState) => state.globalThemeInfo.activeTheme,
   (theme: ?GlobalTheme) => {
     const explicitTheme = theme ? theme : 'light';
     return colors[explicitTheme];
   },
 );
 
 const magicStrings = new Set();
 for (const theme in colors) {
   for (const magicString in colors[theme]) {
     magicStrings.add(magicString);
   }
 }
 
 type Styles = { [name: string]: { [field: string]: mixed } };
 
 type ReplaceField = (input: any) => any;
 export type StyleSheetOf<S: Styles> = $ObjMap<S, ReplaceField>;
 
 function stylesFromColors<IS: Styles>(
   obj: IS,
   themeColors: Colors,
 ): StyleSheetOf<IS> {
-  const result = {};
+  const result: Styles = {};
   for (const key in obj) {
     const style = obj[key];
     const filledInStyle = { ...style };
     for (const styleKey in style) {
       const styleValue = style[styleKey];
       if (typeof styleValue !== 'string') {
         continue;
       }
       if (magicStrings.has(styleValue)) {
         const mapped = themeColors[styleValue];
         if (mapped) {
           filledInStyle[styleKey] = mapped;
         }
       }
     }
     result[key] = filledInStyle;
   }
   return StyleSheet.create(result);
 }
 
 function styleSelector<IS: Styles>(
   obj: IS,
 ): (state: AppState) => StyleSheetOf<IS> {
   return createSelector(colorsSelector, (themeColors: Colors) =>
     stylesFromColors(obj, themeColors),
   );
 }
 
 function useStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const ourColors = useColors();
   return React.useMemo(
     () => stylesFromColors(obj, ourColors),
     [obj, ourColors],
   );
 }
 
 function useOverlayStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const navContext = React.useContext(NavContext);
   const navigationState = navContext && navContext.state;
 
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
 
   const backgroundIsDark = React.useMemo(
     () => selectBackgroundIsDark(navigationState, theme),
     [navigationState, theme],
   );
   const syntheticTheme = backgroundIsDark ? 'dark' : 'light';
 
   return React.useMemo(
     () => stylesFromColors(obj, colors[syntheticTheme]),
     [obj, syntheticTheme],
   );
 }
 
 function useColors(): Colors {
   return useSelector(colorsSelector);
 }
 
 function getStylesForTheme<IS: Styles>(
   obj: IS,
   theme: GlobalTheme,
 ): StyleSheetOf<IS> {
   return stylesFromColors(obj, colors[theme]);
 }
 
 export type IndicatorStyle = 'white' | 'black';
 function useIndicatorStyle(): IndicatorStyle {
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
   return theme && theme === 'dark' ? 'white' : 'black';
 }
 const indicatorStyleSelector: (state: AppState) => IndicatorStyle =
   createSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
     (theme: ?GlobalTheme) => {
       return theme && theme === 'dark' ? 'white' : 'black';
     },
   );
 
 export type KeyboardAppearance = 'default' | 'light' | 'dark';
 const keyboardAppearanceSelector: (state: AppState) => KeyboardAppearance =
   createSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
     (theme: ?GlobalTheme) => {
       return theme && theme === 'dark' ? 'dark' : 'light';
     },
   );
 
 function useKeyboardAppearance(): KeyboardAppearance {
   return useSelector(keyboardAppearanceSelector);
 }
 
 export {
   colors,
   colorsSelector,
   styleSelector,
   useStyles,
   useOverlayStyles,
   useColors,
   getStylesForTheme,
   useIndicatorStyle,
   indicatorStyleSelector,
   useKeyboardAppearance,
 };
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
index bee88e03e..c2d2636a7 100644
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -1,592 +1,592 @@
 // @flow
 
 import type { RouteProp } from '@react-navigation/core';
 import * as Haptics from 'expo-haptics';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   TouchableWithoutFeedback,
   Platform,
   Keyboard,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import {
   TooltipContextProvider,
   TooltipContext,
   type TooltipContextType,
 } from './tooltip-context.react.js';
 import BaseTooltipItem, {
   type TooltipItemBaseProps,
 } from './tooltip-item.react.js';
 import { ChatContext, type ChatContextType } from '../chat/chat-context.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { TooltipModalParamList } from '../navigation/route-names.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import {
   type VerticalBounds,
   type LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { LayoutEvent } from '../types/react-native.js';
 import { AnimatedView } from '../types/styles.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const unboundStyles = {
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   container: {
     flex: 1,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
   icon: {
     color: 'modalForegroundLabel',
   },
   itemContainer: {
     alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     padding: 10,
   },
   itemContainerFixed: {
     flexDirection: 'column',
   },
   items: {
     backgroundColor: 'tooltipBackground',
     borderRadius: 5,
     overflow: 'hidden',
   },
   itemsFixed: {
     flex: 1,
     flexDirection: 'row',
   },
   triangleDown: {
     borderBottomColor: 'transparent',
     borderBottomWidth: 0,
     borderLeftColor: 'transparent',
     borderLeftWidth: 10,
     borderRightColor: 'transparent',
     borderRightWidth: 10,
     borderStyle: 'solid',
     borderTopColor: 'tooltipBackground',
     borderTopWidth: 10,
     height: 10,
     top: Platform.OS === 'android' ? -1 : 0,
     width: 10,
   },
   triangleUp: {
     borderBottomColor: 'tooltipBackground',
     borderBottomWidth: 10,
     borderLeftColor: 'transparent',
     borderLeftWidth: 10,
     borderRightColor: 'transparent',
     borderRightWidth: 10,
     borderStyle: 'solid',
     borderTopColor: 'transparent',
     borderTopWidth: 0,
     bottom: Platform.OS === 'android' ? -1 : 0,
     height: 10,
     width: 10,
   },
 };
 
 export type TooltipParams<CustomProps> = {
   ...CustomProps,
   +presentedFrom: string,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +tooltipLocation?: 'above' | 'below' | 'fixed',
   +margin?: number,
   +visibleEntryIDs?: $ReadOnlyArray<string>,
   +chatInputBarHeight?: number,
   +hideTooltip?: boolean,
 };
 export type TooltipRoute<RouteName: $Keys<TooltipModalParamList>> = RouteProp<
   TooltipModalParamList,
   RouteName,
 >;
 
 export type BaseTooltipProps<RouteName> = {
   +navigation: AppNavigationProp<RouteName>,
   +route: TooltipRoute<RouteName>,
 };
 type ButtonProps<Base> = {
   ...Base,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 type TooltipProps<Base> = {
   ...Base,
   // Redux state
   +dimensions: DimensionsInfo,
   +overlayContext: ?OverlayContextType,
   +chatContext: ?ChatContextType,
   +styles: typeof unboundStyles,
   +tooltipContext: TooltipContextType,
   +closeTooltip: () => mixed,
   +boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
 };
 
 export type TooltipMenuProps<RouteName> = {
   ...BaseTooltipProps<RouteName>,
   +tooltipItem: React.ComponentType<TooltipItemBaseProps>,
 };
 
 function createTooltip<
   RouteName: $Keys<TooltipModalParamList>,
   BaseTooltipPropsType: BaseTooltipProps<RouteName> = BaseTooltipProps<RouteName>,
 >(
   ButtonComponent: React.ComponentType<ButtonProps<BaseTooltipPropsType>>,
   MenuComponent: React.ComponentType<TooltipMenuProps<RouteName>>,
 ): React.ComponentType<BaseTooltipPropsType> {
   class Tooltip extends React.PureComponent<
     TooltipProps<BaseTooltipPropsType>,
   > {
     backdropOpacity: Node;
     tooltipContainerOpacity: Node;
     tooltipVerticalAbove: Node;
     tooltipVerticalBelow: Node;
     tooltipHorizontalOffset: Value = new Value(0);
     tooltipHorizontal: Node;
     tooltipScale: Node;
     fixedTooltipVertical: Node;
 
     constructor(props: TooltipProps<BaseTooltipPropsType>) {
       super(props);
 
       const { overlayContext } = props;
       invariant(overlayContext, 'Tooltip should have OverlayContext');
       const { position } = overlayContext;
 
       this.backdropOpacity = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [0, 0.7],
         extrapolate: Extrapolate.CLAMP,
       });
       this.tooltipContainerOpacity = interpolateNode(position, {
         inputRange: [0, 0.1],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       });
 
       const { margin } = this;
       this.tooltipVerticalAbove = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [margin + this.tooltipHeight / 2, 0],
         extrapolate: Extrapolate.CLAMP,
       });
       this.tooltipVerticalBelow = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [-margin - this.tooltipHeight / 2, 0],
         extrapolate: Extrapolate.CLAMP,
       });
 
       const invertedPosition = add(1, multiply(-1, position));
 
       this.tooltipHorizontal = multiply(
         invertedPosition,
         this.tooltipHorizontalOffset,
       );
 
       this.tooltipScale = interpolateNode(position, {
         inputRange: [0, 0.2, 0.8, 1],
         outputRange: [0, 0, 1, 1],
         extrapolate: Extrapolate.CLAMP,
       });
 
       this.fixedTooltipVertical = multiply(
         invertedPosition,
         props.dimensions.height,
       );
     }
 
     componentDidMount() {
       Haptics.impactAsync();
     }
 
     get tooltipHeight(): number {
       if (this.props.route.params.tooltipLocation === 'fixed') {
         return fixedTooltipHeight;
       } else {
         return tooltipHeight(this.props.tooltipContext.getNumVisibleEntries());
       }
     }
 
     get tooltipLocation(): 'above' | 'below' | 'fixed' {
       const { params } = this.props.route;
       const { tooltipLocation } = params;
       if (tooltipLocation) {
         return tooltipLocation;
       }
 
       const { initialCoordinates, verticalBounds } = params;
       const { y, height } = initialCoordinates;
       const contentTop = y;
       const contentBottom = y + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const { margin, tooltipHeight: curTooltipHeight } = this;
       const fullHeight = curTooltipHeight + margin;
       if (
         contentBottom + fullHeight > boundsBottom &&
         contentTop - fullHeight > boundsTop
       ) {
         return 'above';
       }
 
       return 'below';
     }
 
     get opacityStyle() {
       return {
         ...this.props.styles.backdrop,
         opacity: this.backdropOpacity,
       };
     }
 
     get contentContainerStyle() {
       const { verticalBounds } = this.props.route.params;
       const fullScreenHeight = this.props.dimensions.height;
       const top = verticalBounds.y;
       const bottom =
         fullScreenHeight - verticalBounds.y - verticalBounds.height;
       return {
         ...this.props.styles.contentContainer,
         marginTop: top,
         marginBottom: bottom,
       };
     }
 
     get buttonStyle() {
       const { params } = this.props.route;
       const { initialCoordinates, verticalBounds } = params;
       const { x, y, width, height } = initialCoordinates;
       return {
         width: Math.ceil(width),
         height: Math.ceil(height),
         marginTop: y - verticalBounds.y,
         marginLeft: x,
       };
     }
 
     get margin() {
       const customMargin = this.props.route.params.margin;
       return customMargin !== null && customMargin !== undefined
         ? customMargin
         : 20;
     }
 
     get tooltipContainerStyle() {
       const { dimensions, route } = this.props;
       const { initialCoordinates, verticalBounds, chatInputBarHeight } =
         route.params;
       const { x, y, width, height } = initialCoordinates;
       const { margin, tooltipLocation } = this;
 
       const style = {};
       style.position = 'absolute';
       style.alignItems = 'center';
       style.opacity = this.tooltipContainerOpacity;
 
       if (tooltipLocation !== 'fixed') {
         style.transform = [{ translateX: this.tooltipHorizontal }];
       }
 
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
       if (extraLeftSpace < extraRightSpace) {
         style.left = 0;
         style.minWidth = width + 2 * extraLeftSpace;
       } else {
         style.right = 0;
         style.minWidth = width + 2 * extraRightSpace;
       }
 
       const inputBarHeight = chatInputBarHeight ?? 0;
 
       if (tooltipLocation === 'fixed') {
         const padding = 8;
 
         style.minWidth = dimensions.width - 16;
         style.left = 8;
         style.right = 8;
         style.bottom =
           dimensions.height -
           verticalBounds.height -
           verticalBounds.y -
           inputBarHeight +
           padding;
         style.transform = [{ translateY: this.fixedTooltipVertical }];
       } else if (tooltipLocation === 'above') {
         style.bottom =
           dimensions.height - Math.max(y, verticalBounds.y) + margin;
         style.transform.push({ translateY: this.tooltipVerticalAbove });
       } else {
         style.top =
           Math.min(y + height, verticalBounds.y + verticalBounds.height) +
           margin;
         style.transform.push({ translateY: this.tooltipVerticalBelow });
       }
 
       if (tooltipLocation !== 'fixed') {
         style.transform.push({ scale: this.tooltipScale });
       }
 
       return style;
     }
 
     render() {
       const {
         dimensions,
         overlayContext,
         chatContext,
         styles,
         tooltipContext,
         closeTooltip,
         boundTooltipItem,
         ...navAndRouteForFlow
       } = this.props;
 
-      const tooltipContainerStyle = [styles.itemContainer];
+      const tooltipContainerStyle: Array<ViewStyle> = [styles.itemContainer];
 
       if (this.tooltipLocation === 'fixed') {
         tooltipContainerStyle.push(styles.itemContainerFixed);
       }
 
-      const items = [
+      const items: Array<React.Node> = [
         <MenuComponent
           {...navAndRouteForFlow}
           tooltipItem={this.getTooltipItem()}
           key="menu"
         />,
       ];
 
       if (this.props.tooltipContext.shouldShowMore()) {
         items.push(
           <BaseTooltipItem
             id="more"
             text="More"
             onPress={this.onPressMore}
             renderIcon={this.renderMoreIcon}
             containerStyle={tooltipContainerStyle}
             key="more"
           />,
         );
       }
 
       let triangleStyle;
       const { route } = this.props;
       const { initialCoordinates } = route.params;
       const { x, width } = initialCoordinates;
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
       if (extraLeftSpace < extraRightSpace) {
         triangleStyle = {
           alignSelf: 'flex-start',
           left: extraLeftSpace + (width - 20) / 2,
         };
       } else {
         triangleStyle = {
           alignSelf: 'flex-end',
           right: extraRightSpace + (width - 20) / 2,
         };
       }
 
       let triangleDown = null;
       let triangleUp = null;
       const { tooltipLocation } = this;
       if (tooltipLocation === 'above') {
         triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
       } else if (tooltipLocation === 'below') {
         triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
       }
 
       invariant(overlayContext, 'Tooltip should have OverlayContext');
       const { position } = overlayContext;
       const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
 
       const buttonProps: ButtonProps<BaseTooltipPropsType> = {
         ...navAndRouteForFlow,
         progress: position,
         isOpeningSidebar,
       };
 
       const itemsStyles = [styles.items, styles.itemsFixed];
 
       let tooltip = null;
 
       if (this.tooltipLocation !== 'fixed') {
         tooltip = (
           <AnimatedView
             style={this.tooltipContainerStyle}
             onLayout={this.onTooltipContainerLayout}
           >
             {triangleUp}
             <View style={styles.items}>{items}</View>
             {triangleDown}
           </AnimatedView>
         );
       } else if (
         this.tooltipLocation === 'fixed' &&
         !this.props.route.params.hideTooltip
       ) {
         tooltip = (
           <AnimatedView style={this.tooltipContainerStyle}>
             <View style={itemsStyles}>{items}</View>
           </AnimatedView>
         );
       }
 
       return (
         <TouchableWithoutFeedback onPress={this.props.closeTooltip}>
           <View style={styles.container}>
             <AnimatedView style={this.opacityStyle} />
             <View style={this.contentContainerStyle}>
               <View style={this.buttonStyle}>
                 <ButtonComponent {...buttonProps} />
               </View>
             </View>
             {tooltip}
           </View>
         </TouchableWithoutFeedback>
       );
     }
 
     getTooltipItem() {
       const BoundTooltipItem = this.props.boundTooltipItem;
       return BoundTooltipItem;
     }
 
     onPressMore = () => {
       Keyboard.dismiss();
       this.props.tooltipContext.showActionSheet();
     };
 
     renderMoreIcon = () => {
       const { styles } = this.props;
       return (
         <SWMansionIcon name="menu-vertical" style={styles.icon} size={16} />
       );
     };
 
     onTooltipContainerLayout = (event: LayoutEvent) => {
       const { route, dimensions } = this.props;
       const { x, width } = route.params.initialCoordinates;
 
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
 
       const actualWidth = event.nativeEvent.layout.width;
       if (extraLeftSpace < extraRightSpace) {
         const minWidth = width + 2 * extraLeftSpace;
         this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2);
       } else {
         const minWidth = width + 2 * extraRightSpace;
         this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
       }
     };
   }
   function ConnectedTooltip(props) {
     const dimensions = useSelector(state => state.dimensions);
     const overlayContext = React.useContext(OverlayContext);
     const chatContext = React.useContext(ChatContext);
 
     const { params } = props.route;
     const { tooltipLocation } = params;
     const isFixed = tooltipLocation === 'fixed';
 
     const { hideTooltip, ...rest } = props;
 
     const { goBackOnce } = props.navigation;
     const closeTooltip = React.useCallback(() => {
       goBackOnce();
       if (isFixed) {
         hideTooltip();
       }
     }, [isFixed, hideTooltip, goBackOnce]);
 
     const styles = useStyles(unboundStyles);
     const boundTooltipItem = React.useCallback(
       innerProps => {
         const containerStyle = isFixed
           ? [styles.itemContainer, styles.itemContainerFixed]
           : styles.itemContainer;
         return (
           <BaseTooltipItem
             {...innerProps}
             containerStyle={containerStyle}
             closeTooltip={closeTooltip}
           />
         );
       },
       [isFixed, styles, closeTooltip],
     );
 
     const tooltipContext = React.useContext(TooltipContext);
     invariant(tooltipContext, 'TooltipContext should be set in Tooltip');
     return (
       <Tooltip
         {...rest}
         dimensions={dimensions}
         overlayContext={overlayContext}
         chatContext={chatContext}
         styles={styles}
         tooltipContext={tooltipContext}
         closeTooltip={closeTooltip}
         boundTooltipItem={boundTooltipItem}
       />
     );
   }
   function MemoizedTooltip(props: BaseTooltipPropsType) {
     const { visibleEntryIDs } = props.route.params;
     const { goBackOnce } = props.navigation;
 
     const { setParams } = props.navigation;
     const hideTooltip = React.useCallback(() => {
       const paramsUpdate: any = { hideTooltip: true };
       setParams(paramsUpdate);
     }, [setParams]);
 
     return (
       <TooltipContextProvider
         maxOptionsToDisplay={4}
         visibleEntryIDs={visibleEntryIDs}
         cancel={goBackOnce}
         hideTooltip={hideTooltip}
       >
         <ConnectedTooltip {...props} hideTooltip={hideTooltip} />
       </TooltipContextProvider>
     );
   }
   return React.memo<BaseTooltipPropsType>(MemoizedTooltip);
 }
 
 function tooltipHeight(numEntries: number): number {
   // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding)
   return 9 + 38 * numEntries;
 }
 
 const fixedTooltipHeight: number = 53;
 
 export { createTooltip, fixedTooltipHeight };
diff --git a/native/utils/drawer-utils.react.js b/native/utils/drawer-utils.react.js
index a8e95571d..cfef45979 100644
--- a/native/utils/drawer-utils.react.js
+++ b/native/utils/drawer-utils.react.js
@@ -1,119 +1,119 @@
 // @flow
 
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
 
 import type { TextStyle } from '../types/styles.js';
 
 export type CommunityDrawerItemDataFlattened = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +hasSubchannelsButton: boolean,
   +labelStyle: TextStyle,
   +hasChildren: boolean,
   +itemStyle: {
     +indentation: number,
     +background: 'none' | 'beginning' | 'middle' | 'end',
   },
 };
 
 const defaultIndentation = 8;
 const addedIndentation = 16;
 
 function flattenDrawerItemsData(
   data: $ReadOnlyArray<CommunityDrawerItemData<TextStyle>>,
   expanded: $ReadOnlyArray<string>,
   prevIndentation: ?number,
 ): $ReadOnlyArray<CommunityDrawerItemDataFlattened> {
-  let results = [];
+  let results: Array<CommunityDrawerItemDataFlattened> = [];
 
   for (const item of data) {
     const isOpen = expanded.includes(item.threadInfo.id);
     const isCommunity = threadTypeIsCommunityRoot(item.threadInfo.type);
 
     let background = 'middle';
     if (isCommunity) {
       background = isOpen ? 'beginning' : 'none';
     }
 
     let indentation = defaultIndentation;
     if (!isCommunity && prevIndentation) {
       indentation = prevIndentation + addedIndentation;
     }
 
     results.push({
       threadInfo: item.threadInfo,
       hasSubchannelsButton: item.hasSubchannelsButton,
       labelStyle: item.labelStyle,
       hasChildren: item.itemChildren?.length > 0,
       itemStyle: {
         indentation,
         background,
       },
     });
 
     if (!isOpen) {
       continue;
     }
     results = results.concat(
       flattenDrawerItemsData(item.itemChildren, expanded, indentation),
     );
     if (isCommunity) {
       results[results.length - 1] = {
         ...results[results.length - 1],
         itemStyle: {
           ...results[results.length - 1].itemStyle,
           background: 'end',
         },
       };
     }
   }
 
   return results;
 }
 
 function findAllDescendantIDs<T>(
   data: $ReadOnlyArray<CommunityDrawerItemData<T>>,
 ): $ReadOnlyArray<string> {
   const results = [];
   for (const item of data) {
     results.push(item.threadInfo.id);
     results.concat(findAllDescendantIDs(item.itemChildren));
   }
   return results;
 }
 
 function findThreadChildrenItems<T>(
   data: $ReadOnlyArray<CommunityDrawerItemData<T>>,
   id: string,
 ): ?$ReadOnlyArray<CommunityDrawerItemData<T>> {
   for (const item of data) {
     if (item.threadInfo.id === id) {
       return item.itemChildren;
     }
     const result = findThreadChildrenItems(item.itemChildren, id);
     if (result) {
       return result;
     }
   }
   return undefined;
 }
 
 function filterOutThreadAndDescendantIDs<T>(
   idsToFilter: $ReadOnlyArray<string>,
   allItems: $ReadOnlyArray<CommunityDrawerItemData<T>>,
   threadID: string,
 ): $ReadOnlyArray<string> {
   const childItems = findThreadChildrenItems(allItems, threadID);
   if (!childItems) {
     return [];
   }
   const descendants = findAllDescendantIDs(childItems);
   const descendantsSet = new Set(descendants);
   return idsToFilter.filter(
     item => !descendantsSet.has(item) && item !== threadID,
   );
 }
 
 export { flattenDrawerItemsData, filterOutThreadAndDescendantIDs };