diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js
index 879ff8c0d..7efdc17ae 100644
--- a/native/calendar/calendar.react.js
+++ b/native/calendar/calendar.react.js
@@ -1,1096 +1,1096 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter';
 import _find from 'lodash/fp/find';
 import _findIndex from 'lodash/fp/findIndex';
 import _map from 'lodash/fp/map';
 import _pickBy from 'lodash/fp/pickBy';
 import _size from 'lodash/fp/size';
 import _sum from 'lodash/fp/sum';
 import _throttle from 'lodash/throttle';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   AppState as NativeAppState,
   Platform,
   LayoutAnimation,
   TouchableWithoutFeedback,
 } from 'react-native';
 import SafeAreaView from 'react-native-safe-area-view';
 
 import {
   updateCalendarQueryActionTypes,
   updateCalendarQuery,
 } from 'lib/actions/entry-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { entryKey } from 'lib/shared/entry-utils';
 import type {
   EntryInfo,
   CalendarQuery,
   CalendarQueryUpdateResult,
 } from 'lib/types/entry-types';
 import type { CalendarFilter } from 'lib/types/filter-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import type { ConnectionStatus } from 'lib/types/socket-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import {
   useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { dateString, prettyDate, dateFromString } from 'lib/utils/date-utils';
 import sleep from 'lib/utils/sleep';
 
 import ContentLoading from '../components/content-loading.react';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react';
 import ListLoadingIndicator from '../components/list-loading-indicator.react';
 import NodeHeightMeasurer from '../components/node-height-measurer.react';
 import {
   type KeyboardEvent,
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard';
 import type { TabNavigationProp } from '../navigation/app-navigator.react';
 import DisconnectedBar from '../navigation/disconnected-bar.react';
 import {
   createIsForegroundSelector,
   createActiveTabSelector,
 } from '../navigation/nav-selectors';
 import { NavContext } from '../navigation/navigation-context';
 import {
   CalendarRouteName,
   ThreadPickerModalRouteName,
 } from '../navigation/route-names';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import { calendarListData } from '../selectors/calendar-selectors';
 import type {
   CalendarItem,
   SectionHeaderItem,
   SectionFooterItem,
   LoaderItem,
 } from '../selectors/calendar-selectors';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors';
 import {
   useColors,
   useStyles,
   useIndicatorStyle,
   type Colors,
   type IndicatorStyle,
 } from '../themes/colors';
 import type {
   EmitterSubscription,
   ScrollEvent,
   ViewableItemsChange,
 } from '../types/react-native';
 import CalendarInputBar from './calendar-input-bar.react';
 import {
   Entry,
   InternalEntry,
   dummyNodeForEntryHeightMeasurement,
 } from './entry.react';
 import SectionFooter from './section-footer.react';
 
 export type EntryInfoWithHeight = {
   ...EntryInfo,
   +textHeight: number,
 };
 type CalendarItemWithHeight =
   | LoaderItem
   | SectionHeaderItem
   | SectionFooterItem
   | {
       itemType: 'entryInfo',
       entryInfo: EntryInfoWithHeight,
       threadInfo: ThreadInfo,
     };
 type ExtraData = {
   +activeEntries: { +[key: string]: boolean },
   +visibleEntries: { +[key: string]: boolean },
 };
 
 const safeAreaViewForceInset = {
   top: 'always',
   bottom: 'never',
 };
 
 type BaseProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +route: NavigationRoute<'Calendar'>,
 };
 type Props = {
   ...BaseProps,
   // Nav state
   +calendarActive: boolean,
   // Redux state
   +listData: ?$ReadOnlyArray<CalendarItem>,
   +startDate: string,
   +endDate: string,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dimensions: DerivedDimensionsInfo,
   +loadingStatus: LoadingStatus,
   +connectionStatus: ConnectionStatus,
   +colors: Colors,
   +styles: typeof unboundStyles,
   +indicatorStyle: IndicatorStyle,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateCalendarQuery: (
     calendarQuery: CalendarQuery,
     reduxAlreadyUpdated?: boolean,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +listDataWithHeights: ?$ReadOnlyArray<CalendarItemWithHeight>,
   +readyToShowList: boolean,
   +extraData: ExtraData,
   +currentlyEditing: $ReadOnlyArray<string>,
 };
 class Calendar extends React.PureComponent<Props, State> {
   flatList: ?FlatList<CalendarItemWithHeight> = null;
   currentState: ?string = NativeAppState.currentState;
   lastForegrounded = 0;
   lastCalendarReset = 0;
   currentScrollPosition: ?number = null;
   // We don't always want an extraData update to trigger a state update, so we
   // cache the most recent value as a member here
   latestExtraData: ExtraData;
   // For some reason, we have to delay the scrollToToday call after the first
   // scroll upwards
   firstScrollComplete = false;
   // When an entry becomes active, we make a note of its key so that once the
   // keyboard event happens, we know where to move the scrollPos to
   lastEntryKeyActive: ?string = null;
   keyboardShowListener: ?EmitterSubscription;
   keyboardDismissListener: ?EmitterSubscription;
   keyboardShownHeight: ?number = null;
   // If the query fails, we try it again
   topLoadingFromScroll: ?CalendarQuery = null;
   bottomLoadingFromScroll: ?CalendarQuery = null;
   // We wait until the loaders leave view before letting them be triggered again
   topLoaderWaitingToLeaveView = true;
   bottomLoaderWaitingToLeaveView = true;
   // We keep refs to the entries so CalendarInputBar can save them
   entryRefs = new Map();
 
   constructor(props: Props) {
     super(props);
     this.latestExtraData = {
       activeEntries: {},
       visibleEntries: {},
     };
     this.state = {
       listDataWithHeights: null,
       readyToShowList: false,
       extraData: this.latestExtraData,
       currentlyEditing: [],
     };
   }
 
   componentDidMount() {
     NativeAppState.addEventListener('change', this.handleAppStateChange);
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardDismissListener = addKeyboardDismissListener(
       this.keyboardDismiss,
     );
     this.props.navigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     NativeAppState.removeEventListener('change', this.handleAppStateChange);
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardDismissListener) {
       removeKeyboardListener(this.keyboardDismissListener);
       this.keyboardDismissListener = null;
     }
     this.props.navigation.removeListener('tabPress', this.onTabPress);
   }
 
   handleAppStateChange = (nextAppState: ?string) => {
     const lastState = this.currentState;
     this.currentState = nextAppState;
     if (
       !lastState ||
       !lastState.match(/inactive|background/) ||
       this.currentState !== 'active'
     ) {
       // We're only handling foregrounding here
       return;
     }
     if (Date.now() - this.lastCalendarReset < 500) {
       // If the calendar got reset right before this callback triggered, that
       // indicates we should reset the scroll position
       this.lastCalendarReset = 0;
       this.scrollToToday(false);
     } else {
       // Otherwise, it's possible that the calendar is about to get reset. We
       // record a timestamp here so we can scrollToToday there.
       this.lastForegrounded = Date.now();
     }
   };
 
   onTabPress = () => {
     if (this.props.navigation.isFocused()) {
       this.scrollToToday();
     }
   };
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!this.props.listData && this.props.listData !== prevProps.listData) {
       this.latestExtraData = {
         activeEntries: {},
         visibleEntries: {},
       };
       this.setState({
         listDataWithHeights: null,
         readyToShowList: false,
         extraData: this.latestExtraData,
       });
       this.firstScrollComplete = false;
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
     }
 
     const { loadingStatus, connectionStatus } = this.props;
     const {
       loadingStatus: prevLoadingStatus,
       connectionStatus: prevConnectionStatus,
     } = prevProps;
     if (
       (loadingStatus === 'error' && prevLoadingStatus === 'loading') ||
       (connectionStatus === 'connected' && prevConnectionStatus !== 'connected')
     ) {
       this.loadMoreAbove();
       this.loadMoreBelow();
     }
 
     const lastLDWH = prevState.listDataWithHeights;
     const newLDWH = this.state.listDataWithHeights;
     if (!newLDWH) {
       return;
     } else if (!lastLDWH) {
       if (!this.props.calendarActive) {
         // FlatList has an initialScrollIndex prop, which is usually close to
         // centering but can be off when there is a particularly large Entry in
         // the list. scrollToToday lets us actually center, but gets overriden
         // by initialScrollIndex if we call it right after the FlatList mounts
         sleep(50).then(() => this.scrollToToday());
       }
       return;
     }
 
     if (newLDWH.length < lastLDWH.length) {
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
       if (this.flatList) {
         if (!this.props.calendarActive) {
           // If the currentCalendarQuery gets reset we scroll to the center
           this.scrollToToday();
         } else if (Date.now() - this.lastForegrounded < 500) {
           // If the app got foregrounded right before the calendar got reset,
           // that indicates we should reset the scroll position
           this.lastForegrounded = 0;
           this.scrollToToday(false);
         } else {
           // Otherwise, it's possible that we got triggered before the
           // foreground callback. Let's record a timestamp here so we can call
           // scrollToToday there
           this.lastCalendarReset = Date.now();
         }
       }
     }
 
     const {
       lastStartDate,
       newStartDate,
       lastEndDate,
       newEndDate,
     } = Calendar.datesFromListData(lastLDWH, newLDWH);
 
     if (newStartDate > lastStartDate || newEndDate < lastEndDate) {
       // If there are fewer items in our new data, which happens when the
       // current calendar query gets reset due to inactivity, let's reset the
       // scroll position to the center (today)
       if (!this.props.calendarActive) {
         sleep(50).then(() => this.scrollToToday());
       }
       this.firstScrollComplete = false;
     } else if (newStartDate < lastStartDate) {
       this.updateScrollPositionAfterPrepend(lastLDWH, newLDWH);
     } else if (newEndDate > lastEndDate) {
       this.firstScrollComplete = true;
     } else if (newLDWH.length > lastLDWH.length) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (newStartDate < lastStartDate) {
       this.topLoadingFromScroll = null;
     }
     if (newEndDate > lastEndDate) {
       this.bottomLoadingFromScroll = null;
     }
 
     const { keyboardShownHeight, lastEntryKeyActive } = this;
     if (keyboardShownHeight && lastEntryKeyActive) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   }
 
   static datesFromListData(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ) {
     const lastSecondItem = lastLDWH[1];
     const newSecondItem = newLDWH[1];
     invariant(
       newSecondItem.itemType === 'header' &&
         lastSecondItem.itemType === 'header',
       'second item in listData should be a header',
     );
     const lastStartDate = dateFromString(lastSecondItem.dateString);
     const newStartDate = dateFromString(newSecondItem.dateString);
 
     const lastPenultimateItem = lastLDWH[lastLDWH.length - 2];
     const newPenultimateItem = newLDWH[newLDWH.length - 2];
     invariant(
       newPenultimateItem.itemType === 'footer' &&
         lastPenultimateItem.itemType === 'footer',
       'penultimate item in listData should be a footer',
     );
     const lastEndDate = dateFromString(lastPenultimateItem.dateString);
     const newEndDate = dateFromString(newPenultimateItem.dateString);
 
     return { lastStartDate, newStartDate, lastEndDate, newEndDate };
   }
 
   /**
    * When prepending list items, FlatList isn't smart about preserving scroll
    * position. If we're at the start of the list before prepending, FlatList
    * will just keep us at the front after prepending. But we want to preserve
    * the previous on-screen items, so we have to do a calculation to get the new
    * scroll position. (And deal with the inherent glitchiness of trying to time
    * that change with the items getting prepended... *sigh*.)
    */
   updateScrollPositionAfterPrepend(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ) {
     const existingKeys = new Set(_map(Calendar.keyExtractor)(lastLDWH));
     const newItems = _filter(
       (item: CalendarItemWithHeight) =>
         !existingKeys.has(Calendar.keyExtractor(item)),
     )(newLDWH);
     const heightOfNewItems = Calendar.heightOfItems(newItems);
     const flatList = this.flatList;
     invariant(flatList, 'flatList should be set');
     const scrollAction = () => {
       invariant(
         this.currentScrollPosition !== undefined &&
           this.currentScrollPosition !== null,
         'currentScrollPosition should be set',
       );
       const currentScrollPosition = Math.max(this.currentScrollPosition, 0);
       const offset = currentScrollPosition + heightOfNewItems;
       flatList.scrollToOffset({
         offset,
         animated: false,
       });
     };
     scrollAction();
     if (!this.firstScrollComplete) {
       setTimeout(scrollAction, 0);
       this.firstScrollComplete = true;
     }
   }
 
   scrollToToday(animated: ?boolean = undefined) {
     if (animated === undefined) {
       animated = this.props.calendarActive;
     }
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       return;
     }
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(ldwh);
     invariant(this.flatList, "scrollToToday called, but flatList isn't set");
     this.flatList.scrollToIndex({
       index: todayIndex,
       animated,
       viewPosition: 0.5,
     });
   }
 
   renderItem = (row: { item: CalendarItemWithHeight, ... }) => {
     const item = row.item;
     if (item.itemType === 'loader') {
       return <ListLoadingIndicator />;
     } else if (item.itemType === 'header') {
       return this.renderSectionHeader(item);
     } else if (item.itemType === 'entryInfo') {
       const key = entryKey(item.entryInfo);
       return (
         <Entry
           navigation={this.props.navigation}
           entryInfo={item.entryInfo}
           threadInfo={item.threadInfo}
           active={!!this.state.extraData.activeEntries[key]}
           visible={!!this.state.extraData.visibleEntries[key]}
           makeActive={this.makeActive}
           onEnterEditMode={this.onEnterEntryEditMode}
           onConcludeEditMode={this.onConcludeEntryEditMode}
           onPressWhitespace={this.makeAllEntriesInactive}
           entryRef={this.entryRef}
         />
       );
     } else if (item.itemType === 'footer') {
       return this.renderSectionFooter(item);
     }
     invariant(false, 'renderItem conditions should be exhaustive');
   };
 
   renderSectionHeader = (item: SectionHeaderItem) => {
     let date = prettyDate(item.dateString);
     if (dateString(new Date()) === item.dateString) {
       date += ' (today)';
     }
     const dateObj = dateFromString(item.dateString).getDay();
     const weekendStyle =
       dateObj === 0 || dateObj === 6
         ? this.props.styles.weekendSectionHeader
         : null;
     return (
       <TouchableWithoutFeedback onPress={this.makeAllEntriesInactive}>
         <View style={[this.props.styles.sectionHeader, weekendStyle]}>
           <Text style={this.props.styles.sectionHeaderText}>{date}</Text>
         </View>
       </TouchableWithoutFeedback>
     );
   };
 
   renderSectionFooter = (item: SectionFooterItem) => {
     return (
       <SectionFooter
         dateString={item.dateString}
         onAdd={this.onAdd}
         onPressWhitespace={this.makeAllEntriesInactive}
       />
     );
   };
 
   onAdd = (dayString: string) => {
     this.props.navigation.navigate(ThreadPickerModalRouteName, {
       presentedFrom: this.props.route.key,
       dateString: dayString,
     });
   };
 
   static keyExtractor = (item: CalendarItemWithHeight | CalendarItem) => {
     if (item.itemType === 'loader') {
       return item.key;
     } else if (item.itemType === 'header') {
       return item.dateString + '/header';
     } else if (item.itemType === 'entryInfo') {
       return entryKey(item.entryInfo);
     } else if (item.itemType === 'footer') {
       return item.dateString + '/footer';
     }
     invariant(false, 'keyExtractor conditions should be exhaustive');
   };
 
-  static getItemLayout(
+  static getItemLayout = (
     data: ?$ReadOnlyArray<CalendarItemWithHeight>,
     index: number,
-  ) {
+  ) => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? Calendar.itemHeight(item) : 0;
     return { length, offset, index };
-  }
+  };
 
-  static itemHeight(item: CalendarItemWithHeight): number {
+  static itemHeight = (item: CalendarItemWithHeight) => {
     if (item.itemType === 'loader') {
       return 56;
     } else if (item.itemType === 'header') {
       return 31;
     } else if (item.itemType === 'entryInfo') {
       const verticalPadding = 10;
       return verticalPadding + item.entryInfo.textHeight;
     } else if (item.itemType === 'footer') {
       return 40;
     }
     invariant(false, 'itemHeight conditions should be exhaustive');
-  }
+  };
 
-  static heightOfItems(data: $ReadOnlyArray<CalendarItemWithHeight>): number {
+  static heightOfItems = (data: $ReadOnlyArray<CalendarItemWithHeight>) => {
     return _sum(data.map(Calendar.itemHeight));
-  }
+  };
 
   render() {
     const { listDataWithHeights } = this.state;
     let flatList = null;
     if (listDataWithHeights) {
       const flatListStyle = { opacity: this.state.readyToShowList ? 1 : 0 };
       const initialScrollIndex = this.initialScrollIndex(listDataWithHeights);
       flatList = (
         <FlatList
           data={listDataWithHeights}
           renderItem={this.renderItem}
           keyExtractor={Calendar.keyExtractor}
           getItemLayout={Calendar.getItemLayout}
           onViewableItemsChanged={this.onViewableItemsChanged}
           onScroll={this.onScroll}
           initialScrollIndex={initialScrollIndex}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag"
           onMomentumScrollEnd={this.onMomentumScrollEnd}
           onScrollEndDrag={this.onScrollEndDrag}
           scrollsToTop={false}
           extraData={this.state.extraData}
           style={[this.props.styles.flatList, flatListStyle]}
           indicatorStyle={this.props.indicatorStyle}
           ref={this.flatListRef}
         />
       );
     }
     let loadingIndicator = null;
     if (!listDataWithHeights || !this.state.readyToShowList) {
       loadingIndicator = (
         <ContentLoading fillType="absolute" colors={this.props.colors} />
       );
     }
     const disableInputBar = this.state.currentlyEditing.length === 0;
     return (
       <>
         <NodeHeightMeasurer
           listData={this.props.listData}
           itemToID={Calendar.keyExtractor}
           itemToMeasureKey={this.heightMeasurerKey}
           itemToDummy={this.heightMeasurerDummy}
           mergeItemWithHeight={this.heightMeasurerMergeItem}
           allHeightsMeasured={this.allHeightsMeasured}
         />
         <SafeAreaView
           style={this.props.styles.container}
           forceInset={safeAreaViewForceInset}
         >
           <DisconnectedBar visible={this.props.calendarActive} />
           {loadingIndicator}
           {flatList}
         </SafeAreaView>
         <KeyboardAvoidingView
           behavior="position"
           style={this.props.styles.keyboardAvoidingViewContainer}
           contentContainerStyle={this.props.styles.keyboardAvoidingView}
           pointerEvents="box-none"
         >
           <CalendarInputBar
             onSave={this.onSaveEntry}
             disabled={disableInputBar}
           />
         </KeyboardAvoidingView>
       </>
     );
   }
 
   flatListHeight() {
     const { safeAreaHeight, tabBarHeight } = this.props.dimensions;
     return safeAreaHeight - tabBarHeight;
   }
 
   initialScrollIndex(data: $ReadOnlyArray<CalendarItemWithHeight>) {
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(data);
     const heightOfTodayHeader = Calendar.itemHeight(data[todayIndex]);
 
     let returnIndex = todayIndex;
     let heightLeft = (this.flatListHeight() - heightOfTodayHeader) / 2;
     while (heightLeft > 0) {
       heightLeft -= Calendar.itemHeight(data[--returnIndex]);
     }
     return returnIndex;
   }
 
   flatListRef = (flatList: ?FlatList<CalendarItemWithHeight>) => {
     this.flatList = flatList;
   };
 
   entryRef = (inEntryKey: string, entry: ?InternalEntry) => {
     this.entryRefs.set(inEntryKey, entry);
   };
 
   makeAllEntriesInactive = () => {
     if (_size(this.state.extraData.activeEntries) === 0) {
       if (_size(this.latestExtraData.activeEntries) !== 0) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: {},
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   makeActive = (key: string, active: boolean) => {
     if (!active) {
       const activeKeys = Object.keys(this.latestExtraData.activeEntries);
       if (activeKeys.length === 0) {
         if (Object.keys(this.state.extraData.activeEntries).length !== 0) {
           this.setState({ extraData: this.latestExtraData });
         }
         return;
       }
       const activeKey = activeKeys[0];
       if (activeKey === key) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: {},
         };
         this.setState({ extraData: this.latestExtraData });
       }
       return;
     }
 
     if (
       _size(this.state.extraData.activeEntries) === 1 &&
       this.state.extraData.activeEntries[key]
     ) {
       if (
         _size(this.latestExtraData.activeEntries) !== 1 ||
         !this.latestExtraData.activeEntries[key]
       ) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: { [key]: true },
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   onEnterEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const keyboardShownHeight = this.keyboardShownHeight;
     if (keyboardShownHeight && this.state.listDataWithHeights) {
       this.scrollToKey(key, keyboardShownHeight);
     } else {
       this.lastEntryKeyActive = key;
     }
     const newCurrentlyEditing = [
       ...new Set([...this.state.currentlyEditing, key]),
     ];
     if (newCurrentlyEditing.length > this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   onConcludeEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const newCurrentlyEditing = this.state.currentlyEditing.filter(
       k => k !== key,
     );
     if (newCurrentlyEditing.length < this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   keyboardShow = (event: KeyboardEvent) => {
     // flatListHeight() factors in the size of the tab bar,
     // but it is hidden by the keyboard since it is at the bottom
     const { bottomInset, tabBarHeight } = this.props.dimensions;
     const inputBarHeight = Platform.OS === 'android' ? 37.7 : 35.5;
     const keyboardHeight = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(event.endCoordinates.height - bottomInset, 0),
     });
     const keyboardShownHeight =
       inputBarHeight + Math.max(keyboardHeight - tabBarHeight, 0);
     this.keyboardShownHeight = keyboardShownHeight;
 
     const lastEntryKeyActive = this.lastEntryKeyActive;
     if (lastEntryKeyActive && this.state.listDataWithHeights) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   };
 
   keyboardDismiss = () => {
     this.keyboardShownHeight = null;
   };
 
   scrollToKey(lastEntryKeyActive: string, keyboardHeight: number) {
     const data = this.state.listDataWithHeights;
     invariant(data, 'should be set');
     const index = data.findIndex(
       (item: CalendarItemWithHeight) =>
         Calendar.keyExtractor(item) === lastEntryKeyActive,
     );
     if (index === -1) {
       return;
     }
     const itemStart = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const itemHeight = Calendar.itemHeight(data[index]);
     const entryAdditionalActiveHeight = Platform.OS === 'android' ? 21 : 20;
     const itemEnd = itemStart + itemHeight + entryAdditionalActiveHeight;
     const visibleHeight = this.flatListHeight() - keyboardHeight;
     if (
       this.currentScrollPosition !== undefined &&
       this.currentScrollPosition !== null &&
       itemStart > this.currentScrollPosition &&
       itemEnd < this.currentScrollPosition + visibleHeight
     ) {
       return;
     }
     const offset = itemStart - (visibleHeight - itemHeight) / 2;
     invariant(this.flatList, 'flatList should be set');
     this.flatList.scrollToOffset({ offset, animated: true });
   }
 
   heightMeasurerKey = (item: CalendarItem) => {
     if (item.itemType !== 'entryInfo') {
       return null;
     }
     return item.entryInfo.text;
   };
 
   heightMeasurerDummy = (item: CalendarItem) => {
     invariant(
       item.itemType === 'entryInfo',
       'NodeHeightMeasurer asked for dummy for non-entryInfo item',
     );
     return dummyNodeForEntryHeightMeasurement(item.entryInfo.text);
   };
 
   heightMeasurerMergeItem = (item: CalendarItem, height: ?number) => {
     if (item.itemType !== 'entryInfo') {
       return item;
     }
     invariant(height !== null && height !== undefined, 'height should be set');
     const { entryInfo } = item;
     return {
       itemType: 'entryInfo',
       entryInfo: Calendar.entryInfoWithHeight(entryInfo, height),
       threadInfo: item.threadInfo,
     };
   };
 
   static entryInfoWithHeight(
     entryInfo: EntryInfo,
     textHeight: number,
   ): EntryInfoWithHeight {
     // Blame Flow for not accepting object spread on exact types
     if (entryInfo.id && entryInfo.localID) {
       return {
         id: entryInfo.id,
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else if (entryInfo.id) {
       return {
         id: entryInfo.id,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else {
       return {
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     }
   }
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<CalendarItemWithHeight>,
   ) => {
     this.setState({ listDataWithHeights });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       // This indicates the listData was cleared (set to null) right before this
       // callback was called. Since this leads to the FlatList getting cleared,
       // we'll just ignore this callback.
       return;
     }
 
     const visibleEntries = {};
     for (const token of info.viewableItems) {
       if (token.item.itemType === 'entryInfo') {
         visibleEntries[entryKey(token.item.entryInfo)] = true;
       }
     }
     this.latestExtraData = {
       activeEntries: _pickBy((_, key: string) => {
         if (visibleEntries[key]) {
           return true;
         }
         // We don't automatically set scrolled-away entries to be inactive
         // because entries can be out-of-view at creation time if they need to
         // be scrolled into view (see onEnterEntryEditMode). If Entry could
         // distinguish the reasons its active prop gets set to false, it could
         // differentiate the out-of-view case from the something-pressed case,
         // and then we could set scrolled-away entries to be inactive without
         // worrying about this edge case. Until then...
         const foundItem = _find(
           item => item.entryInfo && entryKey(item.entryInfo) === key,
         )(ldwh);
         return !!foundItem;
       })(this.latestExtraData.activeEntries),
       visibleEntries,
     };
 
     const topLoader = _find({ key: 'TopLoader' })(info.viewableItems);
     if (this.topLoaderWaitingToLeaveView && !topLoader) {
       this.topLoaderWaitingToLeaveView = false;
       this.topLoadingFromScroll = null;
     }
 
     const bottomLoader = _find({ key: 'BottomLoader' })(info.viewableItems);
     if (this.bottomLoaderWaitingToLeaveView && !bottomLoader) {
       this.bottomLoaderWaitingToLeaveView = false;
       this.bottomLoadingFromScroll = null;
     }
 
     if (
       !this.state.readyToShowList &&
       !this.topLoaderWaitingToLeaveView &&
       !this.bottomLoaderWaitingToLeaveView &&
       info.viewableItems.length > 0
     ) {
       this.setState({
         readyToShowList: true,
         extraData: this.latestExtraData,
       });
     }
 
     if (
       topLoader &&
       !this.topLoaderWaitingToLeaveView &&
       !this.topLoadingFromScroll
     ) {
       this.topLoaderWaitingToLeaveView = true;
       const start = dateFromString(this.props.startDate);
       start.setDate(start.getDate() - 31);
       const startDate = dateString(start);
       const endDate = this.props.endDate;
       this.topLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreAbove();
     } else if (
       bottomLoader &&
       !this.bottomLoaderWaitingToLeaveView &&
       !this.bottomLoadingFromScroll
     ) {
       this.bottomLoaderWaitingToLeaveView = true;
       const end = dateFromString(this.props.endDate);
       end.setDate(end.getDate() + 31);
       const endDate = dateString(end);
       const startDate = this.props.startDate;
       this.bottomLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreBelow();
     }
   };
 
   dispatchCalendarQueryUpdate(calendarQuery: CalendarQuery) {
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(calendarQuery),
     );
   }
 
   loadMoreAbove = _throttle(() => {
     if (
       this.topLoadingFromScroll &&
       this.topLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.topLoadingFromScroll);
     }
   }, 1000);
 
   loadMoreBelow = _throttle(() => {
     if (
       this.bottomLoadingFromScroll &&
       this.bottomLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.bottomLoadingFromScroll);
     }
   }, 1000);
 
   onScroll = (event: ScrollEvent) => {
     this.currentScrollPosition = event.nativeEvent.contentOffset.y;
   };
 
   // When the user "flicks" the scroll view, this callback gets triggered after
   // the scrolling ends
   onMomentumScrollEnd = () => {
     this.setState({ extraData: this.latestExtraData });
   };
 
   // This callback gets triggered when the user lets go of scrolling the scroll
   // view, regardless of whether it was a "flick" or a pan
   onScrollEndDrag = () => {
     // We need to figure out if this was a flick or not. If it's a flick, we'll
     // let onMomentumScrollEnd handle it once scroll position stabilizes
     const currentScrollPosition = this.currentScrollPosition;
     setTimeout(() => {
       if (this.currentScrollPosition === currentScrollPosition) {
         this.setState({ extraData: this.latestExtraData });
       }
     }, 50);
   };
 
   onSaveEntry = () => {
     const entryKeys = Object.keys(this.latestExtraData.activeEntries);
     if (entryKeys.length === 0) {
       return;
     }
     const entryRef = this.entryRefs.get(entryKeys[0]);
     if (entryRef) {
       entryRef.completeEdit();
     }
   };
 }
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   flatList: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   keyboardAvoidingViewContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   keyboardAvoidingView: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
   },
   sectionHeader: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 2,
     borderColor: 'listBackground',
     height: 31,
   },
   sectionHeaderText: {
     color: 'listSeparatorLabel',
     fontWeight: 'bold',
     padding: 5,
   },
   weekendSectionHeader: {},
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 const activeTabSelector = createActiveTabSelector(CalendarRouteName);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const calendarActive =
       activeTabSelector(navContext) || activeThreadPickerSelector(navContext);
 
     const listData = useSelector(calendarListData);
     const startDate = useSelector(state => state.navInfo.startDate);
     const endDate = useSelector(state => state.navInfo.endDate);
     const calendarFilters = useSelector(state => state.calendarFilters);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const loadingStatus = useSelector(loadingStatusSelector);
     const connectionStatus = useSelector(state => state.connection.status);
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateCalendarQuery = useServerCall(updateCalendarQuery);
 
     return (
       <Calendar
         {...props}
         calendarActive={calendarActive}
         listData={listData}
         startDate={startDate}
         endDate={endDate}
         calendarFilters={calendarFilters}
         dimensions={dimensions}
         loadingStatus={loadingStatus}
         connectionStatus={connectionStatus}
         colors={colors}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/native/chat/chat-list.react.js b/native/chat/chat-list.react.js
index c622a7e9c..bc501cdfe 100644
--- a/native/chat/chat-list.react.js
+++ b/native/chat/chat-list.react.js
@@ -1,315 +1,315 @@
 // @flow
 
 import invariant from 'invariant';
 import _sum from 'lodash/fp/sum';
 import * as React from 'react';
 import {
   FlatList,
   Animated,
   Easing,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import type {
   Props as FlatListProps,
   DefaultProps as FlatListDefaultProps,
 } from 'react-native/Libraries/Lists/FlatList';
 
 import type { ChatMessageItem } from 'lib/selectors/chat-selectors';
 import { localIDPrefix, messageKey } from 'lib/shared/message-utils';
 
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state';
 import type { TabNavigationProp } from '../navigation/app-navigator.react';
 import { useSelector } from '../redux/redux-utils';
 import type { ChatMessageItemWithHeight } from '../types/chat-types';
 import type { ScrollEvent } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import type { ChatNavigationProp } from './chat.react';
 import NewMessagesPill from './new-messages-pill.react';
 import { chatMessageItemHeight } from './utils';
 
 function chatMessageItemKey(
   item: ChatMessageItemWithHeight | ChatMessageItem,
 ): string {
   if (item.itemType === 'loader') {
     return 'loader';
   }
   return messageKey(item.messageInfo);
 }
 
 const animationSpec = {
   duration: 150,
   useNativeDriver: true,
 };
 
 type BaseProps = {
   ...$ReadOnly<
     $Exact<
       React.Config<
         FlatListProps<ChatMessageItemWithHeight>,
         FlatListDefaultProps,
       >,
     >,
   >,
   +navigation: ChatNavigationProp<'MessageList'>,
   +data: $ReadOnlyArray<ChatMessageItemWithHeight>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
 };
 type State = {
   +newMessageCount: number,
 };
 class ChatList extends React.PureComponent<Props, State> {
   state: State = {
     newMessageCount: 0,
   };
 
   flatList: ?React.ElementRef<typeof FlatList>;
   scrollPos = 0;
 
   newMessagesPillProgress = new Animated.Value(0);
   newMessagesPillStyle: ViewStyle;
 
   constructor(props: Props) {
     super(props);
     const sendButtonTranslateY = this.newMessagesPillProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([10, 0]: number[]), // Flow...
     });
     this.newMessagesPillStyle = {
       opacity: this.newMessagesPillProgress,
       transform: [{ translateY: sendButtonTranslateY }],
     };
   }
 
   componentDidMount() {
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.removeListener('tabPress', this.onTabPress);
   }
 
   onTabPress = () => {
     const { flatList } = this;
     if (!this.props.navigation.isFocused() || !flatList) {
       return;
     }
     if (this.scrollPos > 0) {
       flatList.scrollToOffset({ offset: 0 });
     } else {
       this.props.navigation.popToTop();
     }
   };
 
   get scrolledToBottom() {
     return this.scrollPos <= 0;
   }
 
   componentDidUpdate(prevProps: Props) {
     const { flatList } = this;
     if (!flatList || this.props.data === prevProps.data) {
       return;
     }
 
     if (this.props.data.length < prevProps.data.length) {
       // This should only happen due to MessageStorePruner,
       // which will only prune a thread when it is off-screen
       flatList.scrollToOffset({ offset: 0, animated: false });
       return;
     }
 
     const { scrollPos } = this;
 
     let curDataIndex = 0,
       prevDataIndex = 0,
       heightSoFar = 0;
     let adjustScrollPos = 0,
       newLocalMessage = false,
       newRemoteMessageCount = 0;
     while (prevDataIndex < prevProps.data.length && heightSoFar <= scrollPos) {
       const prevItem = prevProps.data[prevDataIndex];
       invariant(prevItem, 'prevItem should exist');
       const prevItemKey = chatMessageItemKey(prevItem);
       const prevItemHeight = chatMessageItemHeight(prevItem);
 
       let curItem = this.props.data[curDataIndex];
       while (curItem) {
         const curItemKey = chatMessageItemKey(curItem);
         if (curItemKey === prevItemKey) {
           break;
         }
 
         if (curItemKey.startsWith(localIDPrefix)) {
           newLocalMessage = true;
         } else if (
           curItem.itemType === 'message' &&
           curItem.messageInfo.creator.id !== this.props.viewerID
         ) {
           newRemoteMessageCount++;
         }
         adjustScrollPos += chatMessageItemHeight(curItem);
 
         curDataIndex++;
         curItem = this.props.data[curDataIndex];
       }
       if (!curItem) {
         // Should never happen...
         console.log(
           `items not removed from ChatList, but ${prevItemKey} now missing`,
         );
         return;
       }
 
       const curItemHeight = chatMessageItemHeight(curItem);
       adjustScrollPos += curItemHeight - prevItemHeight;
 
       heightSoFar += prevItemHeight;
       prevDataIndex++;
       curDataIndex++;
     }
 
     if (adjustScrollPos === 0) {
       return;
     }
 
     flatList.scrollToOffset({
       offset: scrollPos + adjustScrollPos,
       animated: false,
     });
 
     if (newLocalMessage || scrollPos <= 0) {
       flatList.scrollToOffset({ offset: 0 });
     } else if (newRemoteMessageCount > 0) {
       this.setState(prevState => ({
         newMessageCount: prevState.newMessageCount + newRemoteMessageCount,
       }));
       this.toggleNewMessagesPill(true);
     }
   }
 
   render() {
     const { navigation, viewerID, ...rest } = this.props;
     const { newMessageCount } = this.state;
     return (
       <TouchableWithoutFeedback onPress={this.onPressBackground}>
         <View style={styles.container}>
           <FlatList
             {...rest}
             keyExtractor={chatMessageItemKey}
             getItemLayout={ChatList.getItemLayout}
             onScroll={this.onScroll}
             ref={this.flatListRef}
           />
           <NewMessagesPill
             onPress={this.onPressNewMessagesPill}
             newMessageCount={newMessageCount}
             pointerEvents={newMessageCount > 0 ? 'auto' : 'none'}
             containerStyle={styles.newMessagesPillContainer}
             style={this.newMessagesPillStyle}
           />
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   flatListRef = (flatList: ?React.ElementRef<typeof FlatList>) => {
     this.flatList = flatList;
   };
 
-  static getItemLayout(
+  static getItemLayout = (
     data: ?$ReadOnlyArray<ChatMessageItemWithHeight>,
     index: number,
-  ) {
+  ) => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = ChatList.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? chatMessageItemHeight(item) : 0;
     return { length, offset, index };
-  }
+  };
 
   static heightOfItems(
     data: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ): number {
     return _sum(data.map(chatMessageItemHeight));
   }
 
   toggleNewMessagesPill(show: boolean) {
     Animated.timing(this.newMessagesPillProgress, {
       ...animationSpec,
       easing: show ? Easing.ease : Easing.out(Easing.ease),
       toValue: show ? 1 : 0,
     }).start(({ finished }) => {
       if (finished && !show) {
         this.setState({ newMessageCount: 0 });
       }
     });
   }
 
   onScroll = (event: ScrollEvent) => {
     this.scrollPos = event.nativeEvent.contentOffset.y;
     if (this.scrollPos <= 0) {
       this.toggleNewMessagesPill(false);
     }
     // $FlowFixMe FlatList doesn't type ScrollView props
     this.props.onScroll && this.props.onScroll(event);
   };
 
   onPressNewMessagesPill = () => {
     const { flatList } = this;
     if (!flatList) {
       return;
     }
     flatList.scrollToOffset({ offset: 0 });
     this.toggleNewMessagesPill(false);
   };
 
   onPressBackground = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   newMessagesPillContainer: {
     bottom: 30,
     position: 'absolute',
     right: 30,
   },
 });
 
 const ConnectedChatList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedChatList(props: BaseProps) {
     const keyboardState = React.useContext(KeyboardContext);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     return (
       <ChatList {...props} keyboardState={keyboardState} viewerID={viewerID} />
     );
   },
 );
 
 export { ConnectedChatList as ChatList, chatMessageItemKey };
diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js
index 0bd05e67b..3aab0dcac 100644
--- a/native/chat/chat-thread-list.react.js
+++ b/native/chat/chat-thread-list.react.js
@@ -1,670 +1,670 @@
 // @flow
 
 import invariant from 'invariant';
 import _sum from 'lodash/fp/sum';
 import * as React from 'react';
 import {
   View,
   FlatList,
   Platform,
   TextInput,
   TouchableWithoutFeedback,
   BackHandler,
 } from 'react-native';
 import { FloatingAction } from 'react-native-floating-action';
 import Animated from 'react-native-reanimated';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import { createSelector } from 'reselect';
 
 import { searchUsers } from 'lib/actions/user-actions';
 import {
   type ChatThreadItem,
   useFlattenedChatListData,
 } from 'lib/selectors/chat-selectors';
 import { threadSearchIndex as threadSearchIndexSelector } from 'lib/selectors/nav-selectors';
 import { usersWithPersonalThreadSelector } from 'lib/selectors/user-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import {
   createPendingThread,
   createPendingThreadItem,
   threadIsTopLevel,
 } from 'lib/shared/thread-utils';
 import type { UserSearchResult } from 'lib/types/search-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import { threadTypes } from 'lib/types/thread-types';
 import type { GlobalAccountUserInfo, UserInfo } from 'lib/types/user-types';
 import { useServerCall } from 'lib/utils/action-utils';
 
 import Button from '../components/button.react';
 import Search from '../components/search.react';
 import type { TabNavigationProp } from '../navigation/app-navigator.react';
 import {
   SidebarListModalRouteName,
   HomeChatThreadListRouteName,
   BackgroundChatThreadListRouteName,
   type NavigationRoute,
 } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import {
   type IndicatorStyle,
   indicatorStyleSelector,
   useStyles,
 } from '../themes/colors';
 import type { ScrollEvent } from '../types/react-native';
 import { AnimatedView, type AnimatedStyleObj } from '../types/styles';
 import { animateTowards } from '../utils/animation-utils';
 import {
   ChatThreadListItem,
   chatThreadListItemHeight,
   spacerHeight,
 } from './chat-thread-list-item.react';
 import type {
   ChatTopTabsNavigationProp,
   ChatNavigationProp,
 } from './chat.react';
 import {
   type MessageListParams,
   useNavigateToThread,
 } from './message-list-types';
 import { sidebarHeight } from './sidebar-item.react';
 
 const floatingActions = [
   {
     text: 'Compose',
     icon: <IonIcon name="md-create" size={24} color="#FFFFFF" />,
     name: 'compose',
     position: 1,
   },
 ];
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Node, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Item =
   | ChatThreadItem
   | { +type: 'search', +searchText: string }
   | { +type: 'empty', +emptyItem: React.ComponentType<{}> };
 
 type BaseProps = {
   +navigation:
     | ChatTopTabsNavigationProp<'HomeChatThreadList'>
     | ChatTopTabsNavigationProp<'BackgroundChatThreadList'>,
   +route:
     | NavigationRoute<'HomeChatThreadList'>
     | NavigationRoute<'BackgroundChatThreadList'>,
   +filterThreads: (threadItem: ThreadInfo) => boolean,
   +emptyItem?: React.ComponentType<{}>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +chatListData: $ReadOnlyArray<ChatThreadItem>,
   +viewerID: ?string,
   +threadSearchIndex: SearchIndex,
   +styles: typeof unboundStyles,
   +indicatorStyle: IndicatorStyle,
   +usersWithPersonalThread: $ReadOnlySet<string>,
   +navigateToThread: (params: MessageListParams) => void,
   // async functions that hit server APIs
   +searchUsers: (usernamePrefix: string) => Promise<UserSearchResult>,
 };
 type SearchStatus = 'inactive' | 'activating' | 'active';
 type State = {
   +searchStatus: SearchStatus,
   +searchText: string,
   +threadsSearchResults: Set<string>,
   +usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   +openedSwipeableId: string,
   +numItemsToDisplay: number,
 };
 type PropsAndState = { ...Props, ...State };
 class ChatThreadList extends React.PureComponent<Props, State> {
   state: State = {
     searchStatus: 'inactive',
     searchText: '',
     threadsSearchResults: new Set(),
     usersSearchResults: [],
     openedSwipeableId: '',
     numItemsToDisplay: 25,
   };
   searchInput: ?React.ElementRef<typeof TextInput>;
   flatList: ?FlatList<Item>;
   scrollPos = 0;
   clearNavigationBlurListener: ?() => mixed;
   searchCancelButtonOpen: Value = new Value(0);
   searchCancelButtonProgress: Node;
   searchCancelButtonOffset: Node;
 
   constructor(props: Props) {
     super(props);
     this.searchCancelButtonProgress = animateTowards(
       this.searchCancelButtonOpen,
       100,
     );
     this.searchCancelButtonOffset = interpolateNode(
       this.searchCancelButtonProgress,
       { inputRange: [0, 1], outputRange: [0, 56] },
     );
   }
 
   componentDidMount() {
     this.clearNavigationBlurListener = this.props.navigation.addListener(
       'blur',
       () => {
         this.setState({ numItemsToDisplay: 25 });
       },
     );
 
     const chatNavigation: ?ChatNavigationProp<
       'ChatThreadList',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(chatNavigation, 'ChatNavigator should be within TabNavigator');
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = chatNavigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.addListener('tabPress', this.onTabPress);
 
     BackHandler.addEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   componentWillUnmount() {
     this.clearNavigationBlurListener && this.clearNavigationBlurListener();
 
     const chatNavigation: ?ChatNavigationProp<
       'ChatThreadList',
     > = this.props.navigation.dangerouslyGetParent();
     invariant(chatNavigation, 'ChatNavigator should be within TabNavigator');
     const tabNavigation: ?TabNavigationProp<
       'Chat',
     > = chatNavigation.dangerouslyGetParent();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.removeListener('tabPress', this.onTabPress);
 
     BackHandler.removeEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   hardwareBack = () => {
     if (!this.props.navigation.isFocused()) {
       return false;
     }
 
     const { searchStatus } = this.state;
     const isActiveOrActivating =
       searchStatus === 'active' || searchStatus === 'activating';
     if (!isActiveOrActivating) {
       return false;
     }
 
     this.onSearchCancel();
     return true;
   };
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { searchStatus } = this.state;
     const prevSearchStatus = prevState.searchStatus;
 
     const isActiveOrActivating =
       searchStatus === 'active' || searchStatus === 'activating';
     const wasActiveOrActivating =
       prevSearchStatus === 'active' || prevSearchStatus === 'activating';
     if (isActiveOrActivating && !wasActiveOrActivating) {
       this.searchCancelButtonOpen.setValue(1);
     } else if (!isActiveOrActivating && wasActiveOrActivating) {
       this.searchCancelButtonOpen.setValue(0);
     }
 
     const { flatList } = this;
     if (!flatList) {
       return;
     }
 
     if (this.state.searchText !== prevState.searchText) {
       flatList.scrollToOffset({ offset: 0, animated: false });
       return;
     }
 
     if (searchStatus === 'activating' && prevSearchStatus === 'inactive') {
       flatList.scrollToOffset({ offset: 0, animated: true });
     }
   }
 
   onTabPress = () => {
     if (!this.props.navigation.isFocused()) {
       return;
     }
     if (this.scrollPos > 0 && this.flatList) {
       this.flatList.scrollToOffset({ offset: 0, animated: true });
     } else if (this.props.route.name === BackgroundChatThreadListRouteName) {
       this.props.navigation.navigate({ name: HomeChatThreadListRouteName });
     }
   };
 
   onSearchFocus = () => {
     if (this.state.searchStatus !== 'inactive') {
       return;
     }
     if (this.scrollPos === 0) {
       this.setState({ searchStatus: 'active' });
     } else {
       this.setState({ searchStatus: 'activating' });
     }
   };
 
   clearSearch() {
     const { flatList } = this;
     flatList && flatList.scrollToOffset({ offset: 0, animated: false });
     this.setState({ searchStatus: 'inactive' });
   }
 
   onSearchBlur = () => {
     if (this.state.searchStatus !== 'active') {
       return;
     }
     this.clearSearch();
   };
 
   onSearchCancel = () => {
     this.onChangeSearchText('');
     this.clearSearch();
   };
 
   renderSearch(additionalProps?: $Shape<React.ElementConfig<typeof Search>>) {
     const animatedSearchBoxStyle: AnimatedStyleObj = {
       marginRight: this.searchCancelButtonOffset,
     };
     const searchBoxStyle = [
       this.props.styles.searchBox,
       animatedSearchBoxStyle,
     ];
     const buttonStyle = [
       this.props.styles.cancelSearchButtonText,
       { opacity: this.searchCancelButtonProgress },
     ];
     return (
       <View style={this.props.styles.searchContainer}>
         <Button
           onPress={this.onSearchCancel}
           disabled={this.state.searchStatus !== 'active'}
           style={this.props.styles.cancelSearchButton}
         >
           {/* eslint-disable react-native/no-raw-text */}
           <Animated.Text style={buttonStyle}>Cancel</Animated.Text>
           {/* eslint-enable react-native/no-raw-text */}
         </Button>
         <AnimatedView style={searchBoxStyle}>
           <Search
             searchText={this.state.searchText}
             onChangeText={this.onChangeSearchText}
             containerStyle={this.props.styles.search}
             onBlur={this.onSearchBlur}
             placeholder="Search threads"
             ref={this.searchInputRef}
             {...additionalProps}
           />
         </AnimatedView>
       </View>
     );
   }
 
   searchInputRef = (searchInput: ?React.ElementRef<typeof TextInput>) => {
     this.searchInput = searchInput;
   };
 
   renderItem = (row: { item: Item, ... }) => {
     const item = row.item;
     if (item.type === 'search') {
       return (
         <TouchableWithoutFeedback onPress={this.onSearchFocus}>
           {this.renderSearch({ active: false })}
         </TouchableWithoutFeedback>
       );
     }
     if (item.type === 'empty') {
       const EmptyItem = item.emptyItem;
       return <EmptyItem />;
     }
     return (
       <ChatThreadListItem
         data={item}
         onPressItem={this.onPressItem}
         onPressSeeMoreSidebars={this.onPressSeeMoreSidebars}
         onSwipeableWillOpen={this.onSwipeableWillOpen}
         currentlyOpenedSwipeableId={this.state.openedSwipeableId}
       />
     );
   };
 
-  static keyExtractor(item: Item) {
+  static keyExtractor = (item: Item) => {
     if (item.type === 'chatThreadItem') {
       return item.threadInfo.id;
     } else if (item.type === 'empty') {
       return 'empty';
     } else {
       return 'search';
     }
-  }
+  };
 
-  static getItemLayout(data: ?$ReadOnlyArray<Item>, index: number) {
+  static getItemLayout = (data: ?$ReadOnlyArray<Item>, index: number) => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = ChatThreadList.heightOfItems(
       data.filter((_, i) => i < index),
     );
     const item = data[index];
     const length = item ? ChatThreadList.itemHeight(item) : 0;
     return { length, offset, index };
-  }
+  };
 
-  static itemHeight(item: Item): number {
+  static itemHeight = (item: Item) => {
     if (item.type === 'search') {
       return Platform.OS === 'ios' ? 54.5 : 55;
     }
 
     // itemHeight for emptyItem might be wrong because of line wrapping
     // but we don't care because we'll only ever be rendering this item by itself
     // and it should always be on-screen
     if (item.type === 'empty') {
       return 123;
     }
 
     let height = chatThreadListItemHeight;
     height += item.sidebars.length * sidebarHeight;
     if (item.sidebars.length > 0) {
       height += spacerHeight;
     }
     return height;
-  }
+  };
 
   static heightOfItems(data: $ReadOnlyArray<Item>): number {
     return _sum(data.map(ChatThreadList.itemHeight));
   }
 
   listDataSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.chatListData,
     (propsAndState: PropsAndState) => propsAndState.searchStatus,
     (propsAndState: PropsAndState) => propsAndState.searchText,
     (propsAndState: PropsAndState) => propsAndState.threadsSearchResults,
     (propsAndState: PropsAndState) => propsAndState.emptyItem,
     (propsAndState: PropsAndState) => propsAndState.usersSearchResults,
     (
       reduxChatListData: $ReadOnlyArray<ChatThreadItem>,
       searchStatus: SearchStatus,
       searchText: string,
       threadsSearchResults: Set<string>,
       emptyItem?: React.ComponentType<{}>,
       usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
     ): $ReadOnlyArray<Item> => {
       const chatItems = [];
 
       if (!searchText) {
         chatItems.push(
           ...reduxChatListData.filter(
             item =>
               threadIsTopLevel(item.threadInfo) &&
               this.props.filterThreads(item.threadInfo),
           ),
         );
       } else {
         const privateThreads = [];
         const personalThreads = [];
         const otherThreads = [];
         for (const item of reduxChatListData) {
           if (!threadsSearchResults.has(item.threadInfo.id)) {
             continue;
           }
           if (item.threadInfo.type === threadTypes.PRIVATE) {
             privateThreads.push({ ...item, sidebars: [] });
           } else if (item.threadInfo.type === threadTypes.PERSONAL) {
             personalThreads.push({ ...item, sidebars: [] });
           } else {
             otherThreads.push({ ...item, sidebars: [] });
           }
         }
         chatItems.push(...privateThreads, ...personalThreads, ...otherThreads);
         const { viewerID } = this.props;
         if (viewerID) {
           chatItems.push(
             ...usersSearchResults.map(user =>
               createPendingThreadItem(viewerID, user),
             ),
           );
         }
       }
 
       if (emptyItem && chatItems.length === 0) {
         chatItems.push({ type: 'empty', emptyItem });
       }
 
       if (searchStatus === 'inactive' || searchStatus === 'activating') {
         chatItems.unshift({ type: 'search', searchText });
       }
 
       return chatItems;
     },
   );
 
   partialListDataSelector = createSelector(
     this.listDataSelector,
     (propsAndState: PropsAndState) => propsAndState.numItemsToDisplay,
     (items: $ReadOnlyArray<Item>, numItemsToDisplay: number) =>
       items.slice(0, numItemsToDisplay),
   );
 
   get fullListData() {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   get listData() {
     return this.partialListDataSelector({ ...this.props, ...this.state });
   }
 
   onEndReached = () => {
     if (this.listData.length === this.fullListData.length) {
       return;
     }
     this.setState(prevState => ({
       numItemsToDisplay: prevState.numItemsToDisplay + 25,
     }));
   };
 
   render() {
     let floatingAction;
     if (Platform.OS === 'android') {
       floatingAction = (
         <FloatingAction
           actions={floatingActions}
           overrideWithAction
           onPressItem={this.composeThread}
           color="#7e57c2"
         />
       );
     }
     let fixedSearch;
     const { searchStatus } = this.state;
     if (searchStatus === 'active') {
       fixedSearch = this.renderSearch({ autoFocus: true });
     }
     const scrollEnabled =
       searchStatus === 'inactive' || searchStatus === 'active';
     // this.props.viewerID is in extraData since it's used by MessagePreview
     // within ChatThreadListItem
     return (
       <View style={this.props.styles.container}>
         {fixedSearch}
         <FlatList
           data={this.listData}
           renderItem={this.renderItem}
           keyExtractor={ChatThreadList.keyExtractor}
           getItemLayout={ChatThreadList.getItemLayout}
           extraData={`${this.props.viewerID || ''} ${
             this.state.openedSwipeableId
           }`}
           initialNumToRender={11}
           keyboardShouldPersistTaps="handled"
           onScroll={this.onScroll}
           style={this.props.styles.flatList}
           indicatorStyle={this.props.indicatorStyle}
           scrollEnabled={scrollEnabled}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={1}
           ref={this.flatListRef}
         />
         {floatingAction}
       </View>
     );
   }
 
   flatListRef = (flatList: ?FlatList<Item>) => {
     this.flatList = flatList;
   };
 
   onScroll = (event: ScrollEvent) => {
     const oldScrollPos = this.scrollPos;
     this.scrollPos = event.nativeEvent.contentOffset.y;
     if (this.scrollPos !== 0 || oldScrollPos === 0) {
       return;
     }
     if (this.state.searchStatus === 'activating') {
       this.setState({ searchStatus: 'active' });
     }
   };
 
   async searchUsers(usernamePrefix: string) {
     if (usernamePrefix.length === 0) {
       return [];
     }
 
     const { userInfos } = await this.props.searchUsers(usernamePrefix);
     return userInfos.filter(
       info =>
         !this.props.usersWithPersonalThread.has(info.id) &&
         info.id !== this.props.viewerID,
     );
   }
 
   onChangeSearchText = async (searchText: string) => {
     const results = this.props.threadSearchIndex.getSearchResults(searchText);
     this.setState({
       searchText,
       threadsSearchResults: new Set(results),
       numItemsToDisplay: 25,
     });
     const usersSearchResults = await this.searchUsers(searchText);
     this.setState({ usersSearchResults });
   };
 
   onPressItem = (
     threadInfo: ThreadInfo,
     pendingPersonalThreadUserInfo?: UserInfo,
   ) => {
     this.onChangeSearchText('');
     if (this.searchInput) {
       this.searchInput.blur();
     }
     this.props.navigateToThread({ threadInfo, pendingPersonalThreadUserInfo });
   };
 
   onPressSeeMoreSidebars = (threadInfo: ThreadInfo) => {
     this.onChangeSearchText('');
     if (this.searchInput) {
       this.searchInput.blur();
     }
     this.props.navigation.navigate({
       name: SidebarListModalRouteName,
       params: { threadInfo },
     });
   };
 
   onSwipeableWillOpen = (threadInfo: ThreadInfo) => {
     this.setState(state => ({ ...state, openedSwipeableId: threadInfo.id }));
   };
 
   composeThread = () => {
     if (!this.props.viewerID) {
       return;
     }
     const threadInfo = createPendingThread({
       viewerID: this.props.viewerID,
       threadType: threadTypes.PRIVATE,
     });
     this.props.navigateToThread({ threadInfo, searching: true });
   };
 }
 
 const unboundStyles = {
   icon: {
     fontSize: 28,
   },
   container: {
     flex: 1,
   },
   searchContainer: {
     backgroundColor: 'listBackground',
     display: 'flex',
     justifyContent: 'center',
     flexDirection: 'row',
   },
   searchBox: {
     flex: 1,
   },
   search: {
     marginBottom: 8,
     marginHorizontal: 18,
     marginTop: 16,
   },
   cancelSearchButton: {
     position: 'absolute',
     right: 0,
     top: 0,
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
   },
   cancelSearchButtonText: {
     color: 'link',
     fontSize: 16,
     paddingHorizontal: 16,
     paddingTop: 8,
   },
   flatList: {
     flex: 1,
     backgroundColor: 'listBackground',
   },
 };
 
 const ConnectedChatThreadList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedChatThreadList(props: BaseProps) {
     const boundChatListData = useFlattenedChatListData();
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const threadSearchIndex = useSelector(threadSearchIndexSelector);
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useSelector(indicatorStyleSelector);
     const callSearchUsers = useServerCall(searchUsers);
     const usersWithPersonalThread = useSelector(
       usersWithPersonalThreadSelector,
     );
 
     const navigateToThread = useNavigateToThread();
 
     return (
       <ChatThreadList
         {...props}
         chatListData={boundChatListData}
         viewerID={viewerID}
         threadSearchIndex={threadSearchIndex}
         styles={styles}
         indicatorStyle={indicatorStyle}
         searchUsers={callSearchUsers}
         usersWithPersonalThread={usersWithPersonalThread}
         navigateToThread={navigateToThread}
       />
     );
   },
 );
 
 export default ConnectedChatThreadList;
diff --git a/native/components/thread-list.react.js b/native/components/thread-list.react.js
index 1f46e187c..34d6f05b0 100644
--- a/native/components/thread-list.react.js
+++ b/native/components/thread-list.react.js
@@ -1,151 +1,151 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { FlatList, TextInput } from 'react-native';
 import { createSelector } from 'reselect';
 
 import SearchIndex from 'lib/shared/search-index';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import {
   type IndicatorStyle,
   useStyles,
   useIndicatorStyle,
 } from '../themes/colors';
 import type { ViewStyle, TextStyle } from '../types/styles';
 import { waitForModalInputFocus } from '../utils/timers';
 import Search from './search.react';
 import ThreadListThread from './thread-list-thread.react';
 
 type BaseProps = {
   +threadInfos: $ReadOnlyArray<ThreadInfo>,
   +onSelect: (threadID: string) => void,
   +itemStyle?: ViewStyle,
   +itemTextStyle?: TextStyle,
   +searchIndex?: SearchIndex,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +styles: typeof unboundStyles,
   +indicatorStyle: IndicatorStyle,
 };
 type State = {
   +searchText: string,
   +searchResults: Set<string>,
 };
 type PropsAndState = { ...Props, ...State };
 class ThreadList extends React.PureComponent<Props, State> {
   state: State = {
     searchText: '',
     searchResults: new Set(),
   };
   textInput: ?React.ElementRef<typeof TextInput>;
 
   listDataSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.threadInfos,
     (propsAndState: PropsAndState) => propsAndState.searchText,
     (propsAndState: PropsAndState) => propsAndState.searchResults,
     (propsAndState: PropsAndState) => propsAndState.itemStyle,
     (propsAndState: PropsAndState) => propsAndState.itemTextStyle,
     (
       threadInfos: $ReadOnlyArray<ThreadInfo>,
       text: string,
       searchResults: Set<string>,
     ) =>
       text
         ? threadInfos.filter(threadInfo => searchResults.has(threadInfo.id))
         : // We spread to make sure the result of this selector updates when
           // any input param (namely itemStyle or itemTextStyle) changes
           [...threadInfos],
   );
 
   get listData() {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   render() {
     let searchBar = null;
     if (this.props.searchIndex) {
       searchBar = (
         <Search
           searchText={this.state.searchText}
           onChangeText={this.onChangeSearchText}
           containerStyle={this.props.styles.search}
           placeholder="Search threads"
           ref={this.searchRef}
         />
       );
     }
     return (
       <React.Fragment>
         {searchBar}
         <FlatList
           data={this.listData}
           renderItem={this.renderItem}
           keyExtractor={ThreadList.keyExtractor}
           getItemLayout={ThreadList.getItemLayout}
           keyboardShouldPersistTaps="handled"
           initialNumToRender={20}
           indicatorStyle={this.props.indicatorStyle}
         />
       </React.Fragment>
     );
   }
 
-  static keyExtractor(threadInfo: ThreadInfo) {
+  static keyExtractor = (threadInfo: ThreadInfo) => {
     return threadInfo.id;
-  }
+  };
 
   renderItem = (row: { item: ThreadInfo, ... }) => {
     return (
       <ThreadListThread
         threadInfo={row.item}
         onSelect={this.props.onSelect}
         style={this.props.itemStyle}
         textStyle={this.props.itemTextStyle}
       />
     );
   };
 
-  static getItemLayout(data: ?$ReadOnlyArray<ThreadInfo>, index: number) {
+  static getItemLayout = (data: ?$ReadOnlyArray<ThreadInfo>, index: number) => {
     return { length: 24, offset: 24 * index, index };
-  }
+  };
 
   onChangeSearchText = (searchText: string) => {
     invariant(this.props.searchIndex, 'should be set');
     const results = this.props.searchIndex.getSearchResults(searchText);
     this.setState({ searchText, searchResults: new Set(results) });
   };
 
   searchRef = async (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
     if (!textInput) {
       return;
     }
     await waitForModalInputFocus();
     if (this.textInput) {
       this.textInput.focus();
     }
   };
 }
 
 const unboundStyles = {
   search: {
     marginBottom: 8,
   },
 };
 
 const ConnectedThreadList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedThreadList(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     return (
       <ThreadList {...props} styles={styles} indicatorStyle={indicatorStyle} />
     );
   },
 );
 
 export default ConnectedThreadList;
diff --git a/native/components/user-list.react.js b/native/components/user-list.react.js
index a00afaf83..24f33e9e0 100644
--- a/native/components/user-list.react.js
+++ b/native/components/user-list.react.js
@@ -1,73 +1,76 @@
 // @flow
 
 import _sum from 'lodash/fp/sum';
 import * as React from 'react';
 import { FlatList } from 'react-native';
 
 import type { UserListItem } from 'lib/types/user-types';
 
 import { type IndicatorStyle, useIndicatorStyle } from '../themes/colors';
 import type { TextStyle } from '../types/styles';
 import { UserListUser, getUserListItemHeight } from './user-list-user.react';
 
 type BaseProps = {
   +userInfos: $ReadOnlyArray<UserListItem>,
   +onSelect: (userID: string) => void,
   +itemTextStyle?: TextStyle,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +indicatorStyle: IndicatorStyle,
 };
 class UserList extends React.PureComponent<Props> {
   render() {
     return (
       <FlatList
         data={this.props.userInfos}
         renderItem={this.renderItem}
         keyExtractor={UserList.keyExtractor}
         getItemLayout={UserList.getItemLayout}
         keyboardShouldPersistTaps="handled"
         initialNumToRender={20}
         extraData={this.props.itemTextStyle}
         indicatorStyle={this.props.indicatorStyle}
       />
     );
   }
 
-  static keyExtractor(userInfo: UserListItem) {
+  static keyExtractor = (userInfo: UserListItem) => {
     return userInfo.id;
-  }
+  };
 
   renderItem = (row: { item: UserListItem, ... }) => {
     return (
       <UserListUser
         userInfo={row.item}
         onSelect={this.props.onSelect}
         textStyle={this.props.itemTextStyle}
       />
     );
   };
 
-  static getItemLayout(data: ?$ReadOnlyArray<UserListItem>, index: number) {
+  static getItemLayout = (
+    data: ?$ReadOnlyArray<UserListItem>,
+    index: number,
+  ) => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = _sum(
       data.filter((_, i) => i < index).map(getUserListItemHeight),
     );
     const item = data[index];
     const length = item ? getUserListItemHeight(item) : 0;
     return { length, offset, index };
-  }
+  };
 }
 
 const ConnectedUserList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedUserList(props: BaseProps) {
     const indicatorStyle = useIndicatorStyle();
     return <UserList {...props} indicatorStyle={indicatorStyle} />;
   },
 );
 
 export default ConnectedUserList;
diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index 9660cfcd4..d8552965f 100644
--- a/native/media/media-gallery-keyboard.react.js
+++ b/native/media/media-gallery-keyboard.react.js
@@ -1,555 +1,555 @@
 // @flow
 
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   ActivityIndicator,
   Animated,
   Easing,
   Platform,
 } from 'react-native';
 import { KeyboardRegistry } from 'react-native-keyboard-input';
 import { Provider } from 'react-redux';
 
 import { extensionFromFilename } from 'lib/media/file-utils';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils';
 import type { MediaLibrarySelection } from 'lib/types/media-types';
 
 import type { DimensionsInfo } from '../redux/dimensions-updater.react';
 import { store } from '../redux/redux-setup';
 import { useSelector } from '../redux/redux-utils';
 import { type Colors, useColors, useStyles } from '../themes/colors';
 import type { LayoutEvent, ViewableItemsChange } from '../types/react-native';
 import type { ViewStyle } from '../types/styles';
 import { getCompatibleMediaURI } from './identifier-utils';
 import MediaGalleryMedia from './media-gallery-media.react';
 import SendMediaButton from './send-media-button.react';
 
 const animationSpec = {
   duration: 400,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 type Props = {
   // Redux state
   +dimensions: DimensionsInfo,
   +foreground: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
 };
 type State = {
   +selections: ?$ReadOnlyArray<MediaLibrarySelection>,
   +error: ?string,
   +containerHeight: ?number,
   // null means end reached; undefined means no fetch yet
   +cursor: ?string,
   +queuedMediaURIs: ?Set<string>,
   +focusedMediaURI: ?string,
   +dimensions: DimensionsInfo,
 };
 class MediaGalleryKeyboard extends React.PureComponent<Props, State> {
   mounted = false;
   fetchingPhotos = false;
   flatList: ?FlatList<MediaLibrarySelection>;
   viewableIndices: number[] = [];
   queueModeProgress = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   mediaSelected = false;
 
   constructor(props: Props) {
     super(props);
     const sendButtonScale = this.queueModeProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.3, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.queueModeProgress,
       transform: [{ scale: sendButtonScale }],
     };
     this.state = {
       selections: null,
       error: null,
       containerHeight: null,
       cursor: undefined,
       queuedMediaURIs: null,
       focusedMediaURI: null,
       dimensions: props.dimensions,
     };
   }
 
   static getDerivedStateFromProps(props: Props) {
     // We keep this in state since we pass this.state as
     // FlatList's extraData prop
     return { dimensions: props.dimensions };
   }
 
   componentDidMount() {
     this.mounted = true;
     return this.fetchPhotos();
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { queuedMediaURIs } = this.state;
     const prevQueuedMediaURIs = prevState.queuedMediaURIs;
     if (queuedMediaURIs && !prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 1,
       }).start();
     } else if (!queuedMediaURIs && prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 0,
       }).start();
     }
 
     const { flatList, viewableIndices } = this;
     const { selections, focusedMediaURI } = this.state;
     let scrollingSomewhere = false;
     if (flatList && selections) {
       let newURI;
       if (focusedMediaURI && focusedMediaURI !== prevState.focusedMediaURI) {
         newURI = focusedMediaURI;
       } else if (
         queuedMediaURIs &&
         (!prevQueuedMediaURIs ||
           queuedMediaURIs.size > prevQueuedMediaURIs.size)
       ) {
         const flowMadeMeDoThis = queuedMediaURIs;
         for (const queuedMediaURI of flowMadeMeDoThis) {
           if (prevQueuedMediaURIs && prevQueuedMediaURIs.has(queuedMediaURI)) {
             continue;
           }
           newURI = queuedMediaURI;
           break;
         }
       }
       let index;
       if (newURI !== null && newURI !== undefined) {
         index = selections.findIndex(({ uri }) => uri === newURI);
       }
       if (index !== null && index !== undefined) {
         if (index === viewableIndices[0]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index });
         } else if (index === viewableIndices[viewableIndices.length - 1]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index, viewPosition: 1 });
         }
       }
     }
 
     if (this.props.foreground && !prevProps.foreground) {
       this.fetchPhotos();
     }
 
     if (
       !scrollingSomewhere &&
       this.flatList &&
       this.state.selections &&
       prevState.selections &&
       this.state.selections.length > 0 &&
       prevState.selections.length > 0 &&
       this.state.selections[0].uri !== prevState.selections[0].uri
     ) {
       this.flatList.scrollToIndex({ index: 0 });
     }
   }
 
   guardedSetState(change) {
     if (this.mounted) {
       this.setState(change);
     }
   }
 
   async fetchPhotos(after?: ?string) {
     if (this.fetchingPhotos) {
       return;
     }
     this.fetchingPhotos = true;
     try {
       const hasPermission = await this.getPermissions();
       if (!hasPermission) {
         return;
       }
       const {
         assets,
         endCursor,
         hasNextPage,
       } = await MediaLibrary.getAssetsAsync({
         first: 20,
         after,
         mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
         sortBy: [MediaLibrary.SortBy.modificationTime],
       });
 
       let firstRemoved = false,
         lastRemoved = false;
 
       const mediaURIs = this.state.selections
         ? this.state.selections.map(({ uri }) => uri)
         : [];
       const existingURIs = new Set(mediaURIs);
       let first = true;
       const selections = assets
         .map(asset => {
           const { id, height, width, filename, mediaType, duration } = asset;
           const isVideo = mediaType === MediaLibrary.MediaType.video;
           const uri = getCompatibleMediaURI(
             asset.uri,
             extensionFromFilename(filename),
           );
 
           if (existingURIs.has(uri)) {
             if (first) {
               firstRemoved = true;
             }
             lastRemoved = true;
             first = false;
             return null;
           }
           first = false;
           lastRemoved = false;
           existingURIs.add(uri);
 
           if (isVideo) {
             return {
               step: 'video_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               duration,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           } else {
             return {
               step: 'photo_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           }
         })
         .filter(Boolean);
 
       let appendOrPrepend = after ? 'append' : 'prepend';
       if (firstRemoved && !lastRemoved) {
         appendOrPrepend = 'append';
       } else if (!firstRemoved && lastRemoved) {
         appendOrPrepend = 'prepend';
       }
 
       let newSelections = selections;
       if (this.state.selections) {
         if (appendOrPrepend === 'prepend') {
           newSelections = [...newSelections, ...this.state.selections];
         } else {
           newSelections = [...this.state.selections, ...newSelections];
         }
       }
 
       this.guardedSetState({
         selections: newSelections,
         error: null,
         cursor: hasNextPage ? endCursor : null,
       });
     } catch (e) {
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
     this.fetchingPhotos = false;
   }
 
   async getPermissions(): Promise<boolean> {
     const { granted } = await MediaLibrary.requestPermissionsAsync();
     if (!granted) {
       this.guardedSetState({ error: "don't have permission :(" });
     }
     return granted;
   }
 
   get queueModeActive() {
     return !!this.state.queuedMediaURIs;
   }
 
   renderItem = (row: { item: MediaLibrarySelection, ... }) => {
     const { containerHeight, queuedMediaURIs } = this.state;
     invariant(containerHeight, 'should be set');
     const { uri } = row.item;
     const isQueued = !!(queuedMediaURIs && queuedMediaURIs.has(uri));
     const { queueModeActive } = this;
     return (
       <MediaGalleryMedia
         selection={row.item}
         containerHeight={containerHeight}
         queueModeActive={queueModeActive}
         isQueued={isQueued}
         setMediaQueued={this.setMediaQueued}
         sendMedia={this.sendSingleMedia}
         isFocused={this.state.focusedMediaURI === uri}
         setFocus={this.setFocus}
         dimensions={this.state.dimensions}
       />
     );
   };
 
   ItemSeparator = () => {
     return <View style={this.props.styles.separator} />;
   };
 
-  static keyExtractor(item: MediaLibrarySelection) {
+  static keyExtractor = (item: MediaLibrarySelection) => {
     return item.uri;
-  }
+  };
 
   render() {
     let content;
     const { selections, error, containerHeight } = this.state;
     const bottomOffsetStyle: ViewStyle = {
       marginBottom: this.props.dimensions.bottomInset,
     };
     if (selections && selections.length > 0 && containerHeight) {
       content = (
         <FlatList
           horizontal={true}
           data={selections}
           renderItem={this.renderItem}
           ItemSeparatorComponent={this.ItemSeparator}
           keyExtractor={MediaGalleryKeyboard.keyExtractor}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={5}
           onViewableItemsChanged={this.onViewableItemsChanged}
           extraData={this.state}
           ref={this.flatListRef}
         />
       );
     } else if (selections && containerHeight) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           no media was found!
         </Text>
       );
     } else if (error) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           {error}
         </Text>
       );
     } else {
       content = (
         <ActivityIndicator
           color={this.props.colors.listSeparatorLabel}
           size="large"
           style={[this.props.styles.loadingIndicator, bottomOffsetStyle]}
         />
       );
     }
 
     const { queuedMediaURIs } = this.state;
     const queueCount = queuedMediaURIs ? queuedMediaURIs.size : 0;
     const bottomInset = Platform.select({
       ios: -1 * this.props.dimensions.bottomInset,
       default: 0,
     });
     const containerStyle = { bottom: bottomInset };
     return (
       <View
         style={[this.props.styles.container, containerStyle]}
         onLayout={this.onContainerLayout}
       >
         {content}
         <SendMediaButton
           onPress={this.sendQueuedMedia}
           queueCount={queueCount}
           pointerEvents={queuedMediaURIs ? 'auto' : 'none'}
           containerStyle={[
             this.props.styles.sendButtonContainer,
             bottomOffsetStyle,
           ]}
           style={this.sendButtonStyle}
         />
       </View>
     );
   }
 
   flatListRef = (flatList: ?FlatList<MediaLibrarySelection>) => {
     this.flatList = flatList;
   };
 
   onContainerLayout = (event: LayoutEvent) => {
     this.guardedSetState({ containerHeight: event.nativeEvent.layout.height });
   };
 
   onEndReached = () => {
     const { cursor } = this.state;
     if (cursor !== null) {
       this.fetchPhotos(cursor);
     }
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const viewableIndices = [];
     for (const { index } of info.viewableItems) {
       if (index !== null && index !== undefined) {
         viewableIndices.push(index);
       }
     }
     this.viewableIndices = viewableIndices;
   };
 
   setMediaQueued = (selection: MediaLibrarySelection, isQueued: boolean) => {
     this.setState((prevState: State) => {
       const prevQueuedMediaURIs = prevState.queuedMediaURIs
         ? [...prevState.queuedMediaURIs]
         : [];
       if (isQueued) {
         return {
           queuedMediaURIs: new Set([...prevQueuedMediaURIs, selection.uri]),
           focusedMediaURI: null,
         };
       }
       const queuedMediaURIs = prevQueuedMediaURIs.filter(
         uri => uri !== selection.uri,
       );
       if (queuedMediaURIs.length < prevQueuedMediaURIs.length) {
         return {
           queuedMediaURIs: new Set(queuedMediaURIs),
           focusedMediaURI: null,
         };
       }
       return null;
     });
   };
 
   setFocus = (selection: MediaLibrarySelection, isFocused: boolean) => {
     const { uri } = selection;
     if (isFocused) {
       this.setState({ focusedMediaURI: uri });
     } else if (this.state.focusedMediaURI === uri) {
       this.setState({ focusedMediaURI: null });
     }
   };
 
   sendSingleMedia = (selection: MediaLibrarySelection) => {
     this.sendMedia([selection]);
   };
 
   sendQueuedMedia = () => {
     const { selections, queuedMediaURIs } = this.state;
     if (!selections || !queuedMediaURIs) {
       return;
     }
     const queuedSelections = [];
     for (const uri of queuedMediaURIs) {
       for (const selection of selections) {
         if (selection.uri === uri) {
           queuedSelections.push(selection);
           break;
         }
       }
     }
     this.sendMedia(queuedSelections);
   };
 
   sendMedia(selections: $ReadOnlyArray<MediaLibrarySelection>) {
     if (this.mediaSelected) {
       return;
     }
     this.mediaSelected = true;
 
     const now = Date.now();
     const timeProps = {
       selectTime: now,
       sendTime: now,
     };
     const selectionsWithTime = selections.map(selection => ({
       ...selection,
       ...timeProps,
     }));
 
     KeyboardRegistry.onItemSelected(
       mediaGalleryKeyboardName,
       selectionsWithTime,
     );
   }
 }
 
 const mediaGalleryKeyboardName = 'MediaGalleryKeyboard';
 
 const unboundStyles = {
   container: {
     alignItems: 'center',
     backgroundColor: 'listBackground',
     flexDirection: 'row',
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   error: {
     color: 'listBackgroundLabel',
     flex: 1,
     fontSize: 28,
     textAlign: 'center',
   },
   loadingIndicator: {
     flex: 1,
   },
   sendButtonContainer: {
     bottom: 20,
     position: 'absolute',
     right: 30,
   },
   separator: {
     width: 2,
   },
 };
 
 function ConnectedMediaGalleryKeyboard() {
   const dimensions = useSelector(state => state.dimensions);
   const foreground = useIsAppForegrounded();
   const colors = useColors();
   const styles = useStyles(unboundStyles);
   return (
     <MediaGalleryKeyboard
       dimensions={dimensions}
       foreground={foreground}
       colors={colors}
       styles={styles}
     />
   );
 }
 
 function ReduxMediaGalleryKeyboard() {
   return (
     <Provider store={store}>
       <ConnectedMediaGalleryKeyboard />
     </Provider>
   );
 }
 
 KeyboardRegistry.registerKeyboard(
   mediaGalleryKeyboardName,
   () => ReduxMediaGalleryKeyboard,
 );
 
 export { mediaGalleryKeyboardName };
diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js
index 8d13638bb..92ee4df4c 100644
--- a/native/profile/relationship-list.react.js
+++ b/native/profile/relationship-list.react.js
@@ -1,574 +1,574 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, FlatList, Alert, Platform } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions';
 import { searchUsersActionTypes, searchUsers } from 'lib/actions/user-actions';
 import { registerFetchKey } from 'lib/reducers/loading-reducer';
 import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors';
 import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import {
   type UserRelationships,
   type RelationshipRequest,
   type RelationshipErrors,
   userRelationshipStatus,
   relationshipActions,
 } from 'lib/types/relationship-types';
 import type { UserSearchResult } from 'lib/types/search-types';
 import type {
   UserInfos,
   GlobalAccountUserInfo,
   AccountUserInfo,
 } from 'lib/types/user-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import LinkButton from '../components/link-button.react';
 import { createTagInput, BaseTagInput } from '../components/tag-input.react';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context';
 import type { NavigationRoute } from '../navigation/route-names';
 import {
   FriendListRouteName,
   BlockListRouteName,
 } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import {
   useStyles,
   type IndicatorStyle,
   useIndicatorStyle,
 } from '../themes/colors';
 import type { VerticalBounds } from '../types/layout-types';
 import type { ProfileNavigationProp } from './profile.react';
 import RelationshipListItem from './relationship-list-item.react';
 
 const TagInput = createTagInput<GlobalAccountUserInfo>();
 
 export type RelationshipListNavigate = $PropertyType<
   ProfileNavigationProp<'FriendList' | 'BlockList'>,
   'navigate',
 >;
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 type ListItem =
   | { +type: 'empty', +because: 'no-relationships' | 'no-results' }
   | { +type: 'header' }
   | { +type: 'footer' }
   | {
       +type: 'user',
       +userInfo: AccountUserInfo,
       +lastListItem: boolean,
       +verticalBounds: ?VerticalBounds,
     };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<>,
   +route: NavigationRoute<'FriendList' | 'BlockList'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +relationships: UserRelationships,
   +userInfos: UserInfos,
   +viewerID: ?string,
   +userStoreSearchIndex: SearchIndex,
   +styles: typeof unboundStyles,
   +indicatorStyle: IndicatorStyle,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +searchUsers: (usernamePrefix: string) => Promise<UserSearchResult>,
   +updateRelationships: (
     request: RelationshipRequest,
   ) => Promise<RelationshipErrors>,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
 };
 type State = {
   +verticalBounds: ?VerticalBounds,
   +searchInputText: string,
   +serverSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   +currentTags: $ReadOnlyArray<GlobalAccountUserInfo>,
   +userStoreSearchResults: Set<string>,
 };
 type PropsAndState = { ...Props, ...State };
 class RelationshipList extends React.PureComponent<Props, State> {
   flatListContainerRef = React.createRef();
   tagInput: ?BaseTagInput<GlobalAccountUserInfo> = null;
   state: State = {
     verticalBounds: null,
     searchInputText: '',
     serverSearchResults: [],
     userStoreSearchResults: new Set(),
     currentTags: [],
   };
 
   componentDidMount() {
     this.setSaveButton(false);
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const prevTags = prevState.currentTags.length;
     const currentTags = this.state.currentTags.length;
     if (prevTags !== 0 && currentTags === 0) {
       this.setSaveButton(false);
     } else if (prevTags === 0 && currentTags !== 0) {
       this.setSaveButton(true);
     }
   }
 
   setSaveButton(enabled: boolean) {
     this.props.navigation.setOptions({
       headerRight: () => (
         <LinkButton text="Save" onPress={this.onPressAdd} disabled={!enabled} />
       ),
     });
   }
 
-  static keyExtractor(item: ListItem) {
+  static keyExtractor = (item: ListItem) => {
     if (item.userInfo) {
       return item.userInfo.id;
     } else if (item.type === 'empty') {
       return 'empty';
     } else if (item.type === 'header') {
       return 'header';
     } else if (item.type === 'footer') {
       return 'footer';
     }
     invariant(false, 'keyExtractor conditions should be exhaustive');
-  }
+  };
 
   get listData() {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   static getOverlayContext(props: Props) {
     const { overlayContext } = props;
     invariant(overlayContext, 'RelationshipList should have OverlayContext');
     return overlayContext;
   }
 
   static scrollDisabled(props: Props) {
     const overlayContext = RelationshipList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   render() {
     const inputProps = {
       ...tagInputProps,
       onSubmitEditing: this.onPressAdd,
     };
     return (
       <View style={this.props.styles.container}>
         <View style={this.props.styles.tagInputContainer}>
           <Text style={this.props.styles.tagInputLabel}>Search:</Text>
           <View style={this.props.styles.tagInput}>
             <TagInput
               value={this.state.currentTags}
               onChange={this.onChangeTagInput}
               text={this.state.searchInputText}
               onChangeText={this.onChangeSearchText}
               labelExtractor={this.tagDataLabelExtractor}
               ref={this.tagInputRef}
               inputProps={inputProps}
               maxHeight={36}
             />
           </View>
         </View>
         <View
           ref={this.flatListContainerRef}
           onLayout={this.onFlatListContainerLayout}
           style={this.props.styles.container}
         >
           <FlatList
             contentContainerStyle={this.props.styles.contentContainer}
             data={this.listData}
             renderItem={this.renderItem}
             keyExtractor={RelationshipList.keyExtractor}
             scrollEnabled={!RelationshipList.scrollDisabled(this.props)}
             indicatorStyle={this.props.indicatorStyle}
             keyboardShouldPersistTaps="handled"
           />
         </View>
       </View>
     );
   }
 
   listDataSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.relationships,
     (propsAndState: PropsAndState) => propsAndState.route.name,
     (propsAndState: PropsAndState) => propsAndState.verticalBounds,
     (propsAndState: PropsAndState) => propsAndState.searchInputText,
     (propsAndState: PropsAndState) => propsAndState.serverSearchResults,
     (propsAndState: PropsAndState) => propsAndState.userStoreSearchResults,
     (propsAndState: PropsAndState) => propsAndState.userInfos,
     (propsAndState: PropsAndState) => propsAndState.viewerID,
     (propsAndState: PropsAndState) => propsAndState.currentTags,
     (
       relationships: UserRelationships,
       routeName: 'FriendList' | 'BlockList',
       verticalBounds: ?VerticalBounds,
       searchInputText: string,
       serverSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
       userStoreSearchResults: Set<string>,
       userInfos: UserInfos,
       viewerID: ?string,
       currentTags: $ReadOnlyArray<GlobalAccountUserInfo>,
     ) => {
       const defaultUsers = {
         [FriendListRouteName]: relationships.friends,
         [BlockListRouteName]: relationships.blocked,
       }[routeName];
 
       const excludeUserIDsArray = currentTags
         .map(userInfo => userInfo.id)
         .concat(viewerID || []);
 
       const excludeUserIDs = new Set(excludeUserIDsArray);
 
       let displayUsers = defaultUsers;
 
       if (searchInputText !== '') {
         const mergedUserInfos: { [id: string]: AccountUserInfo } = {};
         for (const userInfo of serverSearchResults) {
           mergedUserInfos[userInfo.id] = userInfo;
         }
         for (const id of userStoreSearchResults) {
           const { username, relationshipStatus } = userInfos[id];
           if (username) {
             mergedUserInfos[id] = { id, username, relationshipStatus };
           }
         }
 
         const sortToEnd = [];
         const userSearchResults = [];
         const sortRelationshipTypesToEnd = {
           [FriendListRouteName]: [userRelationshipStatus.FRIEND],
           [BlockListRouteName]: [
             userRelationshipStatus.BLOCKED_BY_VIEWER,
             userRelationshipStatus.BOTH_BLOCKED,
           ],
         }[routeName];
         for (const userID in mergedUserInfos) {
           if (excludeUserIDs.has(userID)) {
             continue;
           }
 
           const userInfo = mergedUserInfos[userID];
           if (
             sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)
           ) {
             sortToEnd.push(userInfo);
           } else {
             userSearchResults.push(userInfo);
           }
         }
 
         displayUsers = userSearchResults.concat(sortToEnd);
       }
 
       let emptyItem;
       if (displayUsers.length === 0 && searchInputText === '') {
         emptyItem = { type: 'empty', because: 'no-relationships' };
       } else if (displayUsers.length === 0) {
         emptyItem = { type: 'empty', because: 'no-results' };
       }
 
       const mappedUsers = displayUsers.map((userInfo, index) => ({
         type: 'user',
         userInfo,
         lastListItem: displayUsers.length - 1 === index,
         verticalBounds,
       }));
 
       return []
         .concat(emptyItem ? emptyItem : [])
         .concat(emptyItem ? [] : { type: 'header' })
         .concat(mappedUsers)
         .concat(emptyItem ? [] : { type: 'footer' });
     },
   );
 
   tagInputRef = (tagInput: ?BaseTagInput<GlobalAccountUserInfo>) => {
     this.tagInput = tagInput;
   };
 
   tagDataLabelExtractor = (userInfo: GlobalAccountUserInfo) =>
     userInfo.username;
 
   onChangeTagInput = (currentTags: $ReadOnlyArray<GlobalAccountUserInfo>) => {
     this.setState({ currentTags });
   };
 
   onChangeSearchText = async (searchText: string) => {
     const excludeStatuses = {
       [FriendListRouteName]: [
         userRelationshipStatus.BLOCKED_VIEWER,
         userRelationshipStatus.BOTH_BLOCKED,
       ],
       [BlockListRouteName]: [],
     }[this.props.route.name];
 
     const results = this.props.userStoreSearchIndex
       .getSearchResults(searchText)
       .filter(userID => {
         const relationship = this.props.userInfos[userID].relationshipStatus;
         return !excludeStatuses.includes(relationship);
       });
 
     this.setState({
       searchInputText: searchText,
       userStoreSearchResults: new Set(results),
     });
 
     const serverSearchResults = await this.searchUsers(searchText);
     const filteredServerSearchResults = serverSearchResults.filter(
       searchUserInfo => {
         const userInfo = this.props.userInfos[searchUserInfo.id];
         return (
           !userInfo || !excludeStatuses.includes(userInfo.relationshipStatus)
         );
       },
     );
     this.setState({ serverSearchResults: filteredServerSearchResults });
   };
 
   async searchUsers(usernamePrefix: string) {
     if (usernamePrefix.length === 0) {
       return [];
     }
 
     const { userInfos } = await this.props.searchUsers(usernamePrefix);
     return userInfos;
   }
 
   onFlatListContainerLayout = () => {
     const { flatListContainerRef } = this;
     if (!flatListContainerRef.current) {
       return;
     }
 
     const { keyboardState } = this.props;
     if (!keyboardState || keyboardState.keyboardShowing) {
       return;
     }
 
     flatListContainerRef.current.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
         this.setState({ verticalBounds: { height, y: pageY } });
       },
     );
   };
 
   onSelect = (selectedUser: GlobalAccountUserInfo) => {
     this.setState(state => {
       if (state.currentTags.find(o => o.id === selectedUser.id)) {
         return null;
       }
       return {
         searchInputText: '',
         currentTags: state.currentTags.concat(selectedUser),
       };
     });
   };
 
   onPressAdd = () => {
     if (this.state.currentTags.length === 0) {
       return;
     }
     this.props.dispatchActionPromise(
       updateRelationshipsActionTypes,
       this.updateRelationships(),
     );
   };
 
   async updateRelationships() {
     const routeName = this.props.route.name;
     const action = {
       [FriendListRouteName]: relationshipActions.FRIEND,
       [BlockListRouteName]: relationshipActions.BLOCK,
     }[routeName];
     const userIDs = this.state.currentTags.map(userInfo => userInfo.id);
 
     try {
       const result = await this.props.updateRelationships({
         action,
         userIDs,
       });
       this.setState({
         currentTags: [],
         searchInputText: '',
       });
       return result;
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
         { cancelable: true, onDismiss: this.onUnknownErrorAlertAcknowledged },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     invariant(this.tagInput, 'tagInput should be set');
     this.tagInput.focus();
   };
 
   onUnknownErrorAlertAcknowledged = () => {
     this.setState(
       {
         currentTags: [],
         searchInputText: '',
       },
       this.onErrorAcknowledged,
     );
   };
 
   renderItem = ({ item }: { item: ListItem, ... }) => {
     if (item.type === 'empty') {
       const action = {
         [FriendListRouteName]: 'added',
         [BlockListRouteName]: 'blocked',
       }[this.props.route.name];
 
       const emptyMessage =
         item.because === 'no-relationships'
           ? `You haven't ${action} any users yet`
           : 'No results';
 
       return <Text style={this.props.styles.emptyText}>{emptyMessage}</Text>;
     } else if (item.type === 'header' || item.type === 'footer') {
       return <View style={this.props.styles.separator} />;
     } else if (item.type === 'user') {
       return (
         <RelationshipListItem
           userInfo={item.userInfo}
           lastListItem={item.lastListItem}
           verticalBounds={item.verticalBounds}
           navigate={this.props.navigation.navigate}
           relationshipListRoute={this.props.route}
           onSelect={this.onSelect}
         />
       );
     } else {
       invariant(false, `unexpected RelationshipList item type ${item.type}`);
     }
   };
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
     backgroundColor: 'panelBackground',
   },
   contentContainer: {
     paddingTop: 12,
     paddingBottom: 24,
   },
   separator: {
     backgroundColor: 'panelForegroundBorder',
     height: Platform.OS === 'android' ? 1.5 : 1,
   },
   emptyText: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     textAlign: 'center',
     paddingHorizontal: 12,
     paddingVertical: 10,
     marginHorizontal: 12,
   },
   tagInput: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   tagInputContainer: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 registerFetchKey(searchUsersActionTypes);
 registerFetchKey(updateRelationshipsActionTypes);
 
 const ConnectedRelationshipList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedRelationshipList(props: BaseProps) {
     const relationships = useSelector(userRelationshipsSelector);
     const userInfos = useSelector(state => state.userStore.userInfos);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callSearchUsers = useServerCall(searchUsers);
     const callUpdateRelationships = useServerCall(updateRelationships);
 
     return (
       <RelationshipList
         {...props}
         relationships={relationships}
         userInfos={userInfos}
         viewerID={viewerID}
         userStoreSearchIndex={userStoreSearchIndex}
         styles={styles}
         indicatorStyle={indicatorStyle}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         dispatchActionPromise={dispatchActionPromise}
         searchUsers={callSearchUsers}
         updateRelationships={callUpdateRelationships}
       />
     );
   },
 );
 
 export default ConnectedRelationshipList;