diff --git a/native/chat/message-list-thread-search.react.js b/native/chat/message-list-thread-search.react.js
index 81ac08a46..675d2456a 100644
--- a/native/chat/message-list-thread-search.react.js
+++ b/native/chat/message-list-thread-search.react.js
@@ -1,172 +1,172 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { notFriendNotice } from 'lib/shared/search-utils.js';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';
 
 import { createTagInput } from '../components/tag-input.react.js';
 import UserList from '../components/user-list.react.js';
 import { useStyles } from '../themes/colors.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 type Props = {
   +usernameInputText: string,
   +updateUsernameInput: (text: string) => void,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
   +updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,
   +resolveToUser: (user: AccountUserInfo) => void,
   +userSearchResults: $ReadOnlyArray<UserListItem>,
 };
 
 const inputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const MessageListThreadSearch: React.ComponentType<Props> = React.memo<Props>(
   function MessageListThreadSearch({
     usernameInputText,
     updateUsernameInput,
     userInfoInputArray,
     updateTagInput,
     resolveToUser,
     userSearchResults,
   }) {
     const styles = useStyles(unboundStyles);
 
     const [userListItems, nonFriends] = React.useMemo(() => {
-      const nonFriendsSet = new Set();
+      const nonFriendsSet = new Set<string>();
       if (userInfoInputArray.length > 0) {
         return [userSearchResults, nonFriendsSet];
       }
 
       const userListItemsArr = [];
       for (const searchResult of userSearchResults) {
         if (searchResult.notice !== notFriendNotice) {
           userListItemsArr.push(searchResult);
           continue;
         }
         nonFriendsSet.add(searchResult.id);
         const { alert, ...rest } = searchResult;
         userListItemsArr.push(rest);
       }
       return [userListItemsArr, nonFriendsSet];
     }, [userSearchResults, userInfoInputArray]);
 
     const onUserSelect = React.useCallback(
       (userInfo: AccountUserInfo) => {
         for (const existingUserInfo of userInfoInputArray) {
           if (userInfo.id === existingUserInfo.id) {
             return;
           }
         }
         if (nonFriends.has(userInfo.id)) {
           resolveToUser(userInfo);
           return;
         }
         const newUserInfoInputArray = [...userInfoInputArray, userInfo];
         updateUsernameInput('');
         updateTagInput(newUserInfoInputArray);
       },
       [
         userInfoInputArray,
         nonFriends,
         updateTagInput,
         resolveToUser,
         updateUsernameInput,
       ],
     );
 
     const tagDataLabelExtractor = React.useCallback(
       (userInfo: AccountUserInfo) => userInfo.username,
       [],
     );
 
     const isSearchResultVisible =
       (userInfoInputArray.length === 0 || usernameInputText.length > 0) &&
       userSearchResults.length > 0;
 
     let separator = null;
     let userList = null;
     let userSelectionAdditionalStyles = styles.userSelectionLimitedHeight;
     const userListItemsWithENSNames = useENSNames(userListItems);
     if (isSearchResultVisible) {
       userList = (
         <View style={styles.userList}>
           <UserList
             userInfos={userListItemsWithENSNames}
             onSelect={onUserSelect}
           />
         </View>
       );
       separator = <View style={styles.separator} />;
       userSelectionAdditionalStyles = null;
     }
 
     const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
     return (
       <>
         <View style={[styles.userSelection, userSelectionAdditionalStyles]}>
           <View style={styles.tagInputContainer}>
             <Text style={styles.tagInputLabel}>To: </Text>
             <View style={styles.tagInput}>
               <TagInput
                 value={userInfoInputArrayWithENSNames}
                 onChange={updateTagInput}
                 text={usernameInputText}
                 onChangeText={updateUsernameInput}
                 labelExtractor={tagDataLabelExtractor}
                 inputProps={inputProps}
               />
             </View>
           </View>
           {userList}
         </View>
         {separator}
       </>
     );
   },
 );
 
 const unboundStyles = {
   userSelection: {
     backgroundColor: 'panelBackground',
     flex: 1,
   },
   userSelectionLimitedHeight: {
     flex: 0,
   },
   tagInputLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   tagInputContainer: {
     alignItems: 'center',
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
   tagInput: {
     flex: 1,
   },
   userList: {
     backgroundColor: 'modalBackground',
     paddingLeft: 35,
     paddingRight: 12,
     flex: 1,
   },
   separator: {
     height: 1,
     backgroundColor: 'modalForegroundBorder',
   },
 };
 
 export default MessageListThreadSearch;
diff --git a/native/chat/thread-screen-pruner.react.js b/native/chat/thread-screen-pruner.react.js
index a3c9bd3af..7f57c5508 100644
--- a/native/chat/thread-screen-pruner.react.js
+++ b/native/chat/thread-screen-pruner.react.js
@@ -1,116 +1,116 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 
 import { clearThreadsActionType } from '../navigation/action-types.js';
 import { useActiveThread } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import {
   getThreadIDFromRoute,
   getChildRouteFromNavigatorRoute,
 } from '../navigation/navigation-utils.js';
 import {
   AppRouteName,
   ChatRouteName,
   CommunityDrawerNavigatorRouteName,
   TabNavigatorRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { AppState } from '../redux/state-types.js';
 import Alert from '../utils/alert.js';
 
 const ThreadScreenPruner: React.ComponentType<{}> = React.memo<{}>(
   function ThreadScreenPruner() {
     const rawThreadInfos = useSelector(
       (state: AppState) => state.threadStore.threadInfos,
     );
 
     const navContext = React.useContext(NavContext);
 
     const chatRouteState = React.useMemo(() => {
       if (!navContext) {
         return null;
       }
       const { state } = navContext;
       const appRoute = state.routes.find(route => route.name === AppRouteName);
       invariant(
         appRoute,
         'Navigation context should contain route for AppNavigator ' +
           'when ThreadScreenPruner is rendered',
       );
       const communityDrawerRoute = getChildRouteFromNavigatorRoute(
         appRoute,
         CommunityDrawerNavigatorRouteName,
       );
       if (!communityDrawerRoute) {
         return null;
       }
       const tabRoute = getChildRouteFromNavigatorRoute(
         communityDrawerRoute,
         TabNavigatorRouteName,
       );
       if (!tabRoute) {
         return null;
       }
       const chatRoute = getChildRouteFromNavigatorRoute(
         tabRoute,
         ChatRouteName,
       );
       if (!chatRoute?.state) {
         return null;
       }
       return chatRoute.state;
     }, [navContext]);
 
     const inStackThreadIDs = React.useMemo(() => {
-      const threadIDs = new Set();
+      const threadIDs = new Set<string>();
       if (!chatRouteState) {
         return threadIDs;
       }
       for (const route of chatRouteState.routes) {
         const threadID = getThreadIDFromRoute(route);
         if (threadID && !threadIsPending(threadID)) {
           threadIDs.add(threadID);
         }
       }
       return threadIDs;
     }, [chatRouteState]);
 
     const pruneThreadIDs = React.useMemo(() => {
       const threadIDs = [];
       for (const threadID of inStackThreadIDs) {
         if (!rawThreadInfos[threadID]) {
           threadIDs.push(threadID);
         }
       }
       return threadIDs;
     }, [inStackThreadIDs, rawThreadInfos]);
 
     const activeThreadID = useActiveThread();
 
     React.useEffect(() => {
       if (pruneThreadIDs.length === 0 || !navContext) {
         return;
       }
       if (activeThreadID && pruneThreadIDs.includes(activeThreadID)) {
         Alert.alert(
           'Chat invalidated',
           'You no longer have permission to view this chat :(',
           [{ text: 'OK' }],
           { cancelable: true },
         );
       }
       navContext.dispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: pruneThreadIDs },
       });
     }, [pruneThreadIDs, navContext, activeThreadID]);
 
     return null;
   },
 );
 
 export default ThreadScreenPruner;
diff --git a/native/components/node-height-measurer.react.js b/native/components/node-height-measurer.react.js
index 2b2bdf9a4..56f52ef41 100644
--- a/native/components/node-height-measurer.react.js
+++ b/native/components/node-height-measurer.react.js
@@ -1,518 +1,524 @@
 // @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.MixedElement,
   // 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 WritableState<Item, MergedItem> = {
   // These are the dummies currently being rendered
   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,
   // We cache the measured heights here, keyed by measure key
   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>>,
   // 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>>,
 };
 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 unmeasurableItems = new Map<
+      string,
+      MergedItemPair<InnerItem, InnerMergedItem>,
+    >();
+    const measurableItems = new Map<
+      string,
+      MergedItemPair<InnerItem, InnerMergedItem>,
+    >();
     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();
+    const toMeasure = new Map<string, React.MixedElement>();
     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();
+      const currentMeasurableItems = new Map<string, Item>();
+      const currentUnmeasurableItems = new Map<string, Item>();
       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: 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: LayoutEvent) =>
         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/input/input-state-container.react.js b/native/input/input-state-container.react.js
index d11565fd9..b39d5495c 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1757 +1,1757 @@
 // @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,
   type InputState,
 } 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 WritableCompletedUploads = {
   [localMessageID: string]: ?$ReadOnlySet<string>,
 };
 type CompletedUploads = $ReadOnly<WritableCompletedUploads>;
 type ActiveURI = { +count: number, +onClear: $ReadOnlyArray<() => mixed> };
 
 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: Map<string, ActiveURI> = new Map();
   editInputBarCallbacks: Array<
     (params: EditInputBarMessageParameters) => void,
   > = [];
   scrollToMessageCallbacks: Array<(messageID: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map();
   pendingThreadUpdateHandlers: Map<
     string,
     (ThreadInfo | MinimallyEncodedThreadInfo) => mixed,
   > = new Map();
   // 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: Set<string> = new Set();
 
   static getCompletedUploads(props: Props, state: State): 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: 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: 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,
   ): Promise<void> {
     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: State => InputState = 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 = (): boolean => {
     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: 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: 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: $ReadOnlyArray<MediaMissionStep> = [];
     let serverID;
     let userTime;
     let errorMessage;
     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: { [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): boolean => {
     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,
   ): Promise<void> => {
     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): Promise<{
     +steps: $ReadOnlyArray<MediaMissionStep>,
     +result: ?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(): React.Node {
     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);
+      useMessageCreationSideEffectsFunc<RawTextMessageInfo>(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/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
index 1bf00b356..daf1e17d4 100644
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -1,239 +1,239 @@
 // @flow
 
 import { useDrawerStatus } from '@react-navigation/drawer';
 import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { FlatList, Platform, View, Text, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import {
   fetchPrimaryInviteLinkActionTypes,
   useFetchPrimaryInviteLinks,
 } from 'lib/actions/link-actions.js';
 import {
   childThreadInfos,
   communityThreadSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import {
   createRecursiveDrawerItemsData,
   appendSuffix,
 } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
 
 import CommunityDrawerItem from './community-drawer-item.react.js';
 import { CommunityCreationRouteName } from './route-names.js';
 import { useNavigateToThread } from '../chat/message-list-types.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { useStyles } from '../themes/colors.js';
 import {
   flattenDrawerItemsData,
   filterOutThreadAndDescendantIDs,
   type CommunityDrawerItemDataFlattened,
 } from '../utils/drawer-utils.react.js';
 
 const maxDepth = 2;
 const safeAreaEdges = Platform.select({
   ios: ['top'],
   default: ['top', 'bottom'],
 });
 
 function CommunityDrawerContent(): React.Node {
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
   const communitiesSuffixed = React.useMemo(
     () => appendSuffix(resolvedCommunities),
     [resolvedCommunities],
   );
   const styles = useStyles(unboundStyles);
 
   const callFetchPrimaryLinks = useFetchPrimaryInviteLinks();
   const dispatchActionPromise = useDispatchActionPromise();
   const drawerStatus = useDrawerStatus();
   React.useEffect(() => {
     (async () => {
       if (drawerStatus !== 'open') {
         return;
       }
       await dispatchActionPromise(
         fetchPrimaryInviteLinkActionTypes,
         callFetchPrimaryLinks(),
       );
     })();
   }, [callFetchPrimaryLinks, dispatchActionPromise, drawerStatus]);
 
-  const [expanded, setExpanded] = React.useState(() => {
+  const [expanded, setExpanded] = React.useState<Set<string>>(() => {
     if (communitiesSuffixed.length === 1) {
       return new Set([communitiesSuffixed[0].id]);
     }
     return new Set();
   });
 
   const setOpenCommunityOrClose = React.useCallback(
     (id: string) =>
       expanded.has(id) ? setExpanded(new Set()) : setExpanded(new Set([id])),
     [expanded],
   );
 
   const labelStylesObj = useStyles(labelUnboundStyles);
   const labelStyles = React.useMemo(
     () => [
       labelStylesObj.level0Label,
       labelStylesObj.level1Label,
       labelStylesObj.level2Label,
     ],
     [labelStylesObj],
   );
   const childThreadInfosMap = useSelector(childThreadInfos);
 
   const drawerItemsData = React.useMemo(
     () =>
       createRecursiveDrawerItemsData(
         childThreadInfosMap,
         communitiesSuffixed,
         labelStyles,
         maxDepth,
       ),
     [childThreadInfosMap, communitiesSuffixed, labelStyles],
   );
 
   const toggleExpanded = React.useCallback(
     (id: string) =>
       setExpanded(expandedState => {
         if (expanded.has(id)) {
           return new Set(
             filterOutThreadAndDescendantIDs(
               [...expandedState.values()],
               drawerItemsData,
               id,
             ),
           );
         }
         return new Set([...expanded.values(), id]);
       }),
     [drawerItemsData, expanded],
   );
 
   const navigateToThread = useNavigateToThread();
 
   const renderItem = React.useCallback(
     ({
       item,
     }: {
       +item: CommunityDrawerItemDataFlattened,
       ...
     }): React.Node => {
       const isCommunity = threadTypeIsCommunityRoot(item.threadInfo.type);
       return (
         <CommunityDrawerItem
           key={item.threadInfo.id}
           itemData={item}
           navigateToThread={navigateToThread}
           isExpanded={expanded.has(item.threadInfo.id)}
           toggleExpanded={
             isCommunity ? setOpenCommunityOrClose : toggleExpanded
           }
         />
       );
     },
     [expanded, navigateToThread, setOpenCommunityOrClose, toggleExpanded],
   );
 
   const { navigate } = useNavigation();
   const onPressCommunityCreation = React.useCallback(() => {
     navigate(CommunityCreationRouteName);
   }, [navigate]);
 
   const communityCreationButton = (
     <TouchableOpacity onPress={onPressCommunityCreation} activeOpacity={0.4}>
       <View style={styles.communityCreationContainer}>
         <View style={styles.communityCreationIconContainer}>
           <SWMansionIcon
             name="plus"
             size={22}
             style={styles.communityCreationIcon}
           />
         </View>
         <Text style={styles.communityCreationText}>Create community</Text>
       </View>
     </TouchableOpacity>
   );
 
   const flattenedDrawerItemsData = React.useMemo(
     () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]),
     [drawerItemsData, expanded],
   );
 
   return (
     <SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
       <FlatList
         data={flattenedDrawerItemsData}
         renderItem={renderItem}
         initialNumToRender={30}
       />
       {communityCreationButton}
     </SafeAreaView>
   );
 }
 
 const unboundStyles = {
   drawerContent: {
     flex: 1,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
   },
   communityCreationContainer: {
     flexDirection: 'row',
     padding: 24,
     alignItems: 'center',
     borderTopWidth: 1,
     borderColor: 'panelSeparator',
   },
   communityCreationText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   communityCreationIconContainer: {
     height: 28,
     width: 28,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 16,
     marginRight: 12,
     backgroundColor: 'panelSecondaryForeground',
   },
   communityCreationIcon: {
     color: 'panelForegroundLabel',
   },
 };
 const labelUnboundStyles = {
   level0Label: {
     color: 'drawerItemLabelLevel0',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: '500',
   },
   level1Label: {
     color: 'drawerItemLabelLevel1',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '500',
   },
   level2Label: {
     color: 'drawerItemLabelLevel2',
     fontSize: 14,
     lineHeight: 22,
     fontWeight: '400',
   },
 };
 
 const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
   CommunityDrawerContent,
 );
 
 export default MemoizedCommunityDrawerContent;
diff --git a/native/themes/colors.js b/native/themes/colors.js
index 65c69f8b1..4a3485bae 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();
+const magicStrings = new Set<string>();
 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> = $ReadOnly<$ObjMap<S, ReplaceField>>;
 
 function stylesFromColors<IS: Styles>(
   obj: IS,
   themeColors: Colors,
 ): StyleSheetOf<IS> {
   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,
 };