diff --git a/lib/shared/chat-message-item-utils.js b/lib/shared/chat-message-item-utils.js
index 9f034d7d4..9b839e816 100644
--- a/lib/shared/chat-message-item-utils.js
+++ b/lib/shared/chat-message-item-utils.js
@@ -1,25 +1,56 @@
 // @flow
 
+import { messageKey } from './message-utils.js';
 import type { ReactionInfo } from '../selectors/chat-selectors.js';
 import { getMessageLabel } from '../shared/edit-messages-utils.js';
+import type {
+  RobotextMessageInfo,
+  ComposableMessageInfo,
+} from '../types/message-types.js';
 import type { ThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 
+type ChatMessageItemMessageInfo = ComposableMessageInfo | RobotextMessageInfo;
+
+// This complicated type matches both ChatMessageItem and
+// ChatMessageItemWithHeight, and is a disjoint union of types
+type BaseChatMessageInfoItem = {
+  +itemType: 'message',
+  +messageInfo: ChatMessageItemMessageInfo,
+  +messageInfos?: ?void,
+  ...
+};
+type BaseChatMessageItem =
+  | BaseChatMessageInfoItem
+  | {
+      +itemType: 'loader',
+      +messageInfo?: ?void,
+      +messageInfos?: ?void,
+      ...
+    };
+
+function chatMessageItemKey(item: BaseChatMessageItem): string {
+  if (item.itemType === 'loader') {
+    return 'loader';
+  }
+  return messageKey(item.messageInfo);
+}
+
 type BaseChatMessageItemForEngagementCheck = {
   +threadCreatedFromMessage: ?ThreadInfo,
   +reactions: ReactionInfo,
   +hasBeenEdited?: ?boolean,
   ...
 };
 function chatMessageItemHasEngagement(
   item: BaseChatMessageItemForEngagementCheck,
   threadID: string,
 ): boolean {
   const label = getMessageLabel(item.hasBeenEdited, threadID);
   return (
     !!label ||
     !!item.threadCreatedFromMessage ||
     Object.keys(item.reactions).length > 0
   );
 }
 
-export { chatMessageItemHasEngagement };
+export { chatMessageItemKey, chatMessageItemHasEngagement };
diff --git a/native/chat/chat-item-height-measurer.react.js b/native/chat/chat-item-height-measurer.react.js
index 6c2e66aff..280959291 100644
--- a/native/chat/chat-item-height-measurer.react.js
+++ b/native/chat/chat-item-height-measurer.react.js
@@ -1,234 +1,234 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
 import {
   getInlineEngagementSidebarText,
   reactionsToRawString,
 } from 'lib/shared/inline-engagement-utils.js';
 import { messageID } from 'lib/shared/message-utils.js';
 import {
   messageTypes,
   type MessageType,
 } from 'lib/types/message-types-enum.js';
 import { entityTextToRawString } from 'lib/utils/entity-text.js';
 
 import type { MeasurementTask } from './chat-context-provider.react.js';
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { dummyNodeForInlineEngagementHeightMeasurement } from './inline-engagement.react.js';
 import { dummyNodeForRobotextMessageHeightMeasurement } from './inner-robotext-message.react.js';
 import { dummyNodeForTextMessageHeightMeasurement } from './inner-text-message.react.js';
 import type { NativeChatMessageItem } from './message-data.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import { multimediaMessageContentSizes } from './multimedia-message-utils.js';
-import { chatMessageItemKey } from './utils.js';
 import NodeHeightMeasurer from '../components/node-height-measurer.react.js';
 import { InputStateContext } from '../input/input-state.js';
 
 type Props = {
   +measurement: MeasurementTask,
 };
 
 const heightMeasurerKey = (item: NativeChatMessageItem) => {
   if (item.itemType !== 'message') {
     return null;
   }
   const { messageInfo, hasBeenEdited, threadCreatedFromMessage, reactions } =
     item;
 
   if (messageInfo.type === messageTypes.TEXT) {
     return JSON.stringify({
       text: messageInfo.text,
       edited: getMessageLabel(hasBeenEdited, messageInfo.threadID),
       sidebar: getInlineEngagementSidebarText(threadCreatedFromMessage),
       reactions: reactionsToRawString(reactions),
     });
   } else if (item.robotext) {
     const { threadID } = item.messageInfo;
     return JSON.stringify({
       robotext: entityTextToRawString(item.robotext, { threadID }),
       sidebar: getInlineEngagementSidebarText(threadCreatedFromMessage),
       reactions: reactionsToRawString(reactions),
     });
   } else if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     // we enter this condition when the item is a multimedia message with an
     // inline engagement
     return JSON.stringify({
       sidebar: getInlineEngagementSidebarText(threadCreatedFromMessage),
       reactions: reactionsToRawString(reactions),
     });
   }
   return null;
 };
 
 // ESLint doesn't recognize that invariant always throws
 // eslint-disable-next-line consistent-return
 const heightMeasurerDummy = (item: NativeChatMessageItem) => {
   invariant(
     item.itemType === 'message',
     'NodeHeightMeasurer asked for dummy for non-message item',
   );
   const { messageInfo, hasBeenEdited, threadCreatedFromMessage, reactions } =
     item;
 
   if (messageInfo.type === messageTypes.TEXT) {
     const label = getMessageLabel(hasBeenEdited, messageInfo.threadID);
     return dummyNodeForTextMessageHeightMeasurement(
       messageInfo.text,
       label,
       threadCreatedFromMessage,
       reactions,
     );
   } else if (item.robotext) {
     return dummyNodeForRobotextMessageHeightMeasurement(
       item.robotext,
       messageInfo.threadID,
       threadCreatedFromMessage,
       reactions,
     );
   } else if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     // we enter this condition when the item is a multimedia message with an
     // inline engagement
 
     return dummyNodeForInlineEngagementHeightMeasurement(
       threadCreatedFromMessage,
       reactions,
     );
   }
   invariant(
     false,
     'NodeHeightMeasurer asked for dummy for multimedia message with no inline engagement',
   );
 };
 
 function ChatItemHeightMeasurer(props: Props) {
   const composedMessageMaxWidth = useComposedMessageMaxWidth();
   const inputState = React.useContext(InputStateContext);
   const inputStatePendingUploads = inputState?.pendingUploads;
 
   const { measurement } = props;
   const { threadInfo } = measurement;
   const heightMeasurerMergeItem = React.useCallback(
     (item: NativeChatMessageItem, height: ?number) => {
       if (item.itemType !== 'message') {
         return item;
       }
 
       const { messageInfo } = item;
       const messageType: MessageType = messageInfo.type;
       invariant(
         messageType !== messageTypes.SIDEBAR_SOURCE,
         'Sidebar source messages should be replaced by sourceMessage before being measured',
       );
 
       if (
         messageInfo.type === messageTypes.IMAGES ||
         messageInfo.type === messageTypes.MULTIMEDIA
       ) {
         // Conditional due to Flow...
         const localMessageInfo = item.localMessageInfo
           ? item.localMessageInfo
           : null;
         const id = messageID(messageInfo);
         const pendingUploads = inputStatePendingUploads?.[id];
         const sizes = multimediaMessageContentSizes(
           messageInfo,
           composedMessageMaxWidth,
         );
         return {
           itemType: 'message',
           messageShapeType: 'multimedia',
           messageInfo,
           localMessageInfo,
           threadInfo,
           startsConversation: item.startsConversation,
           startsCluster: item.startsCluster,
           endsCluster: item.endsCluster,
           threadCreatedFromMessage: item.threadCreatedFromMessage,
           pendingUploads,
           reactions: item.reactions,
           hasBeenEdited: item.hasBeenEdited,
           isPinned: item.isPinned,
           inlineEngagementHeight: height,
           ...sizes,
         };
       }
 
       invariant(
         height !== null && height !== undefined,
         'height should be set',
       );
       if (messageInfo.type === messageTypes.TEXT) {
         // Conditional due to Flow...
         const localMessageInfo = item.localMessageInfo
           ? item.localMessageInfo
           : null;
         return {
           itemType: 'message',
           messageShapeType: 'text',
           messageInfo,
           localMessageInfo,
           threadInfo,
           startsConversation: item.startsConversation,
           startsCluster: item.startsCluster,
           endsCluster: item.endsCluster,
           threadCreatedFromMessage: item.threadCreatedFromMessage,
           contentHeight: height,
           reactions: item.reactions,
           hasBeenEdited: item.hasBeenEdited,
           isPinned: item.isPinned,
         };
       }
       invariant(
         item.messageInfoType !== 'composable',
         'ChatItemHeightMeasurer was handed a messageInfoType=composable, but ' +
           `does not know how to handle MessageType ${messageInfo.type}`,
       );
       invariant(
         item.messageInfoType === 'robotext',
         'ChatItemHeightMeasurer was handed a messageInfoType that it does ' +
           `not recognize: ${item.messageInfoType}`,
       );
       return {
         itemType: 'message',
         messageShapeType: 'robotext',
         messageInfo,
         threadInfo,
         startsConversation: item.startsConversation,
         startsCluster: item.startsCluster,
         endsCluster: item.endsCluster,
         threadCreatedFromMessage: item.threadCreatedFromMessage,
         robotext: item.robotext,
         contentHeight: height,
         reactions: item.reactions,
       };
     },
     [composedMessageMaxWidth, inputStatePendingUploads, threadInfo],
   );
 
   return (
     <MessageListContextProvider
       threadInfo={threadInfo}
       key={measurement.measurerID}
     >
       <NodeHeightMeasurer
         listData={measurement.messages}
         itemToID={chatMessageItemKey}
         itemToMeasureKey={heightMeasurerKey}
         itemToDummy={heightMeasurerDummy}
         mergeItemWithHeight={heightMeasurerMergeItem}
         allHeightsMeasured={measurement.onMessagesMeasured}
         inputState={inputState}
         composedMessageMaxWidth={composedMessageMaxWidth}
         initialMeasuredHeights={measurement.initialMeasuredHeights}
       />
     </MessageListContextProvider>
   );
 }
 
 const MemoizedChatItemHeightMeasurer: React.ComponentType<Props> =
   React.memo<Props>(ChatItemHeightMeasurer);
 
 export default MemoizedChatItemHeightMeasurer;
diff --git a/native/chat/chat-list.react.js b/native/chat/chat-list.react.js
index 8d82d3b90..366781eb6 100644
--- a/native/chat/chat-list.react.js
+++ b/native/chat/chat-list.react.js
@@ -1,351 +1,352 @@
 // @flow
 
 import type {
   TabNavigationState,
   BottomTabOptions,
   BottomTabNavigationEventMap,
 } from '@react-navigation/core';
 import invariant from 'invariant';
 import _sum from 'lodash/fp/sum.js';
 import * as React from 'react';
 import {
   Animated,
   Easing,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
   FlatList as ReactNativeFlatList,
 } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import { localIDPrefix } from 'lib/shared/message-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import NewMessagesPill from './new-messages-pill.react.js';
-import { chatMessageItemHeight, chatMessageItemKey } from './utils.js';
+import { chatMessageItemHeight } from './utils.js';
 import { InputStateContext } from '../input/input-state.js';
 import type { InputState } from '../input/input-state.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import type { ScreenParamList } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 import type { ScrollEvent } from '../types/react-native.js';
 import type { ViewStyle } from '../types/styles.js';
 
 type FlatListElementRef = React.ElementRef<typeof ReactNativeFlatList>;
 type FlatListProps = React.ElementConfig<typeof ReactNativeFlatList>;
 
 const animationSpec = {
   duration: 150,
   useNativeDriver: true,
 };
 
 type BaseProps = {
   ...FlatListProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +data: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ...
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +viewerID: ?string,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   +inputState: ?InputState,
   ...
 };
 type State = {
   +newMessageCount: number,
 };
 class ChatList extends React.PureComponent<Props, State> {
   state: State = {
     newMessageCount: 0,
   };
 
   flatList: ?FlatListElementRef;
   scrollPos = 0;
 
   newMessagesPillProgress: Animated.Value = 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 = this.props.navigation.getParent<
       ScreenParamList,
       'Chat',
       TabNavigationState,
       BottomTabOptions,
       BottomTabNavigationEventMap,
       TabNavigationProp<'Chat'>,
     >();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.addListener('tabPress', this.onTabPress);
     this.props.inputState?.addScrollToMessageListener(this.scrollToMessage);
   }
 
   componentWillUnmount() {
     const tabNavigation = this.props.navigation.getParent<
       ScreenParamList,
       'Chat',
       TabNavigationState,
       BottomTabOptions,
       BottomTabNavigationEventMap,
       TabNavigationProp<'Chat'>,
     >();
     invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
     tabNavigation.removeListener('tabPress', this.onTabPress);
     this.props.inputState?.removeScrollToMessageListener(this.scrollToMessage);
   }
 
   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(): boolean {
     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) {
         // The only case in which we would expect the length of data to
         // decrease, but find that an item was removed, is if the start
         // of the chat is reached. In that case, the spinner at the top
         // will no longer be rendered. We break here as we expect the
         // spinner to be the last item.
         if (prevItemKey === 'loader') {
           break;
         }
         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(): React.Node {
     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: any) => {
     this.flatList = flatList;
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<ChatMessageItemWithHeight>,
     index: number,
   ): { length: number, offset: number, 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);
     }
     this.props.onScroll && this.props.onScroll(event);
   };
 
   onPressNewMessagesPill = () => {
     const { flatList } = this;
     if (!flatList) {
       return;
     }
     flatList.scrollToOffset({ offset: 0 });
     this.toggleNewMessagesPill(false);
   };
 
   scrollToMessage = (key?: string) => {
     const { flatList } = this;
     const { data } = this.props;
     if (!flatList || !key) {
       return;
     }
     const index = data.findIndex(item => chatMessageItemKey(item) === key);
     if (index < 0) {
       console.warn("Couldn't find message to scroll to");
       return;
     }
     flatList.scrollToIndex({
       index,
       animated: true,
       viewPosition: 0.5,
     });
   };
 
   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 inputState = React.useContext(InputStateContext);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     return (
       <ChatList
         {...props}
         keyboardState={keyboardState}
         viewerID={viewerID}
         inputState={inputState}
       />
     );
   },
 );
 
 export default ConnectedChatList;
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
index 671fe7474..f91dd7394 100644
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -1,326 +1,326 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import * as React from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { createSelector } from 'reselect';
 
-import { messageKey, useFetchMessages } from 'lib/shared/message-utils.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
+import { useFetchMessages } from 'lib/shared/message-utils.js';
 import { useWatchThread } from 'lib/shared/watch-thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypeIsPersonal } from 'lib/types/thread-types-enum.js';
 
 import ChatList from './chat-list.react.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import {
   KeyboardContext,
   type KeyboardState,
 } from '../keyboard/keyboard-state.js';
 import { defaultStackScreenOptions } from '../navigation/options.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   type IndicatorStyle,
   useIndicatorStyle,
   useStyles,
 } from '../themes/colors.js';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
 } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import type { ViewableItemsChange } from '../types/react-native.js';
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   header: {
     height: 12,
   },
   listLoadingIndicator: {
     flex: 1,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +messageListData: $ReadOnlyArray<ChatMessageItemWithHeight>,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 type Props = {
   ...BaseProps,
   +startReached: boolean,
   +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   +overlayContext: ?OverlayContextType,
   +keyboardState: ?KeyboardState,
   +fetchMessages: () => Promise<mixed>,
 };
 type State = {
   +focusedMessageKey: ?string,
   +messageListVerticalBounds: ?VerticalBounds,
   +loadingFromScroll: boolean,
 };
 type PropsAndState = {
   ...Props,
   ...State,
 };
 type FlatListExtraData = {
   messageListVerticalBounds: ?VerticalBounds,
   focusedMessageKey: ?string,
   navigation: ChatNavigationProp<'MessageList'>,
   route: NavigationRoute<'MessageList'>,
 };
 class MessageList extends React.PureComponent<Props, State> {
   state: State = {
     focusedMessageKey: null,
     messageListVerticalBounds: null,
     loadingFromScroll: false,
   };
   flatListContainer: ?React.ElementRef<typeof View>;
 
   flatListExtraDataSelector: PropsAndState => FlatListExtraData =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.messageListVerticalBounds,
       (propsAndState: PropsAndState) => propsAndState.focusedMessageKey,
       (propsAndState: PropsAndState) => propsAndState.navigation,
       (propsAndState: PropsAndState) => propsAndState.route,
       (
         messageListVerticalBounds: ?VerticalBounds,
         focusedMessageKey: ?string,
         navigation: ChatNavigationProp<'MessageList'>,
         route: NavigationRoute<'MessageList'>,
       ) => ({
         messageListVerticalBounds,
         focusedMessageKey,
         navigation,
         route,
       }),
     );
 
   get flatListExtraData(): FlatListExtraData {
     return this.flatListExtraDataSelector({ ...this.props, ...this.state });
   }
 
   static getOverlayContext(props: Props): OverlayContextType {
     const { overlayContext } = props;
     invariant(overlayContext, 'MessageList should have OverlayContext');
     return overlayContext;
   }
 
   static scrollDisabled(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   static modalOpen(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus === 'open';
   }
 
   componentDidUpdate(prevProps: Props) {
     const modalIsOpen = MessageList.modalOpen(this.props);
     const modalWasOpen = MessageList.modalOpen(prevProps);
     if (!modalIsOpen && modalWasOpen) {
       this.setState({ focusedMessageKey: null });
     }
 
     if (defaultStackScreenOptions.gestureEnabled) {
       const scrollIsDisabled = MessageList.scrollDisabled(this.props);
       const scrollWasDisabled = MessageList.scrollDisabled(prevProps);
       if (!scrollWasDisabled && scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: false });
       } else if (scrollWasDisabled && !scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: true });
       }
     }
   }
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 
   renderItem = (row: { item: ChatMessageItemWithHeight, ... }): React.Node => {
     if (row.item.itemType === 'loader') {
       return (
         <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
           <View style={this.props.styles.listLoadingIndicator}>
             <ListLoadingIndicator />
           </View>
         </TouchableWithoutFeedback>
       );
     }
     const messageInfoItem: ChatMessageInfoItemWithHeight = row.item;
     const { messageListVerticalBounds, focusedMessageKey, navigation, route } =
       this.flatListExtraData;
-    const focused =
-      messageKey(messageInfoItem.messageInfo) === focusedMessageKey;
+    const focused = chatMessageItemKey(messageInfoItem) === focusedMessageKey;
     return (
       <Message
         item={messageInfoItem}
         focused={focused}
         navigation={navigation}
         route={route}
         toggleFocus={this.toggleMessageFocus}
         verticalBounds={messageListVerticalBounds}
         shouldDisplayPinIndicator={true}
       />
     );
   };
 
   toggleMessageFocus = (inMessageKey: string) => {
     if (this.state.focusedMessageKey === inMessageKey) {
       this.setState({ focusedMessageKey: null });
     } else {
       this.setState({ focusedMessageKey: inMessageKey });
     }
   };
 
   // Actually header, it's just that our FlatList is inverted
   ListFooterComponent = (): React.Node => (
     <View style={this.props.styles.header} />
   );
 
   render(): React.Node {
     const { messageListData, startReached } = this.props;
     const footer = startReached ? this.ListFooterComponent : undefined;
     let relationshipPrompt = null;
     if (threadTypeIsPersonal(this.props.threadInfo.type)) {
       relationshipPrompt = (
         <RelationshipPrompt
           pendingPersonalThreadUserInfo={
             this.props.route.params.pendingPersonalThreadUserInfo
           }
           threadInfo={this.props.threadInfo}
         />
       );
     }
     return (
       <View
         style={this.props.styles.container}
         ref={this.flatListContainerRef}
         onLayout={this.onFlatListContainerLayout}
       >
         {relationshipPrompt}
         <ChatList
           navigation={this.props.navigation}
           inverted={true}
           data={messageListData}
           renderItem={this.renderItem}
           onViewableItemsChanged={this.onViewableItemsChanged}
           ListFooterComponent={footer}
           scrollsToTop={false}
           scrollEnabled={!MessageList.scrollDisabled(this.props)}
           extraData={this.flatListExtraData}
           indicatorStyle={this.props.indicatorStyle}
           keyboardShouldPersistTaps="always"
         />
       </View>
     );
   }
 
   flatListContainerRef = (
     flatListContainer: ?React.ElementRef<typeof View>,
   ) => {
     this.flatListContainer = flatListContainer;
   };
 
   onFlatListContainerLayout = () => {
     const { flatListContainer } = this;
     if (!flatListContainer) {
       return;
     }
     flatListContainer.measure((x, y, width, height, pageX, pageY) => {
       if (
         height === null ||
         height === undefined ||
         pageY === null ||
         pageY === undefined
       ) {
         return;
       }
       this.setState({ messageListVerticalBounds: { height, y: pageY } });
     });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     if (this.state.focusedMessageKey) {
       let focusedMessageVisible = false;
       for (const token of info.viewableItems) {
         if (
           token.item.itemType === 'message' &&
-          messageKey(token.item.messageInfo) === this.state.focusedMessageKey
+          chatMessageItemKey(token.item) === this.state.focusedMessageKey
         ) {
           focusedMessageVisible = true;
           break;
         }
       }
       if (!focusedMessageVisible) {
         this.setState({ focusedMessageKey: null });
       }
     }
 
     const loader = _find({ key: 'loader' })(info.viewableItems);
     if (!loader || this.state.loadingFromScroll) {
       return;
     }
 
     this.setState({ loadingFromScroll: true });
 
     void (async () => {
       try {
         await this.props.fetchMessages();
       } finally {
         this.setState({ loadingFromScroll: false });
       }
     })();
   };
 }
 
 const ConnectedMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMessageList(props: BaseProps) {
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
 
     const threadID = props.threadInfo.id;
     const startReached = useSelector(
       state =>
         !!(
           state.messageStore.threads[threadID] &&
           state.messageStore.threads[threadID].startReached
         ),
     );
 
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const fetchMessages = useFetchMessages(props.threadInfo);
 
     useWatchThread(props.threadInfo);
 
     return (
       <MessageList
         {...props}
         startReached={startReached}
         styles={styles}
         indicatorStyle={indicatorStyle}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         fetchMessages={fetchMessages}
       />
     );
   });
 
 export default ConnectedMessageList;
diff --git a/native/chat/message.react.js b/native/chat/message.react.js
index be1f1b4b4..819da7050 100644
--- a/native/chat/message.react.js
+++ b/native/chat/message.react.js
@@ -1,162 +1,162 @@
 // @flow
 
 import * as React from 'react';
 import {
   LayoutAnimation,
   TouchableWithoutFeedback,
   PixelRatio,
 } from 'react-native';
 
-import { messageKey } from 'lib/shared/message-utils.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import { useCanToggleMessagePin } from 'lib/utils/message-pinning-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import MultimediaMessage from './multimedia-message.react.js';
 import { RobotextMessage } from './robotext-message.react.js';
 import { TextMessage } from './text-message.react.js';
 import { messageItemHeight } from './utils.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
 import { type VerticalBounds } from '../types/layout-types.js';
 import type { LayoutEvent } from '../types/react-native.js';
 
 type Props = {
   +item: ChatMessageInfoItemWithHeight,
   +focused: boolean,
   +navigation:
     | ChatNavigationProp<'MessageList'>
     | AppNavigationProp<'TogglePinModal'>
     | ChatNavigationProp<'PinnedMessagesScreen'>
     | ChatNavigationProp<'MessageSearch'>,
   +route:
     | NavigationRoute<'MessageList'>
     | NavigationRoute<'TogglePinModal'>
     | NavigationRoute<'PinnedMessagesScreen'>
     | NavigationRoute<'MessageSearch'>,
   +toggleFocus: (messageKey: string) => void,
   +verticalBounds: ?VerticalBounds,
   shouldDisplayPinIndicator: boolean,
 };
 function Message(props: Props): React.Node {
   const {
     focused,
     item,
     navigation,
     route,
     toggleFocus,
     verticalBounds,
     shouldDisplayPinIndicator,
   } = props;
 
   const focusedOrStartsConversation = focused || item.startsConversation;
   React.useEffect(() => {
     LayoutAnimation.easeInEaseOut();
   }, [focusedOrStartsConversation]);
 
   const keyboardState = React.useContext(KeyboardContext);
   const dismissKeyboard = keyboardState?.dismissKeyboard;
   const onMessagePress = React.useCallback(
     () => dismissKeyboard?.(),
     [dismissKeyboard],
   );
 
   const onLayout = React.useCallback(
     (event: LayoutEvent) => {
       if (focused) {
         return;
       }
 
       const measuredHeight = event.nativeEvent.layout.height;
       const expectedHeight = messageItemHeight(item);
 
       const pixelRatio = 1 / PixelRatio.get();
       const distance = Math.abs(measuredHeight - expectedHeight);
       if (distance < pixelRatio) {
         return;
       }
 
       const approxMeasuredHeight = Math.round(measuredHeight * 100) / 100;
       const approxExpectedHeight = Math.round(expectedHeight * 100) / 100;
 
       console.log(
         `Message height for ${item.messageShapeType} ` +
-          `${messageKey(item.messageInfo)} was expected to be ` +
+          `${chatMessageItemKey(item)} was expected to be ` +
           `${approxExpectedHeight} but is actually ${approxMeasuredHeight}. ` +
           "This means MessageList's FlatList isn't getting the right item " +
           'height for some of its nodes, which is guaranteed to cause glitchy ' +
           'behavior. Please investigate!!',
       );
     },
     [focused, item],
   );
 
   const canTogglePins = useCanToggleMessagePin(
     props.item.messageInfo,
     props.item.threadInfo,
   );
 
   const innerMessageNode = React.useMemo(() => {
     if (item.messageShapeType === 'text') {
       return (
         <TextMessage
           item={item}
           navigation={navigation}
           route={route}
           focused={focused}
           toggleFocus={toggleFocus}
           verticalBounds={verticalBounds}
           canTogglePins={canTogglePins}
           shouldDisplayPinIndicator={shouldDisplayPinIndicator}
         />
       );
     } else if (item.messageShapeType === 'multimedia') {
       return (
         <MultimediaMessage
           item={item}
           focused={focused}
           toggleFocus={toggleFocus}
           verticalBounds={verticalBounds}
           canTogglePins={canTogglePins}
           shouldDisplayPinIndicator={shouldDisplayPinIndicator}
         />
       );
     } else {
       return (
         <RobotextMessage
           item={item}
           navigation={navigation}
           route={route}
           focused={focused}
           toggleFocus={toggleFocus}
           verticalBounds={verticalBounds}
         />
       );
     }
   }, [
     focused,
     item,
     navigation,
     route,
     shouldDisplayPinIndicator,
     toggleFocus,
     verticalBounds,
     canTogglePins,
   ]);
 
   const message = React.useMemo(
     () => (
       <TouchableWithoutFeedback
         onPress={onMessagePress}
         onLayout={__DEV__ ? onLayout : undefined}
       >
         {innerMessageNode}
       </TouchableWithoutFeedback>
     ),
     [innerMessageNode, onLayout, onMessagePress],
   );
   return message;
 }
 
 export default Message;
diff --git a/native/chat/pinned-messages-screen.react.js b/native/chat/pinned-messages-screen.react.js
index dc5f66f9a..dc5b36b95 100644
--- a/native/chat/pinned-messages-screen.react.js
+++ b/native/chat/pinned-messages-screen.react.js
@@ -1,195 +1,196 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { useFetchPinnedMessages } from 'lib/actions/message-actions.js';
 import {
   type ChatMessageInfoItem,
   messageListData,
 } from 'lib/selectors/chat-selectors.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
 } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import { useHeightMeasurer } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react';
 import type { NativeChatMessageItem } from './message-data.react.js';
 import MessageResult from './message-result.react.js';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 
 export type PinnedMessagesScreenParams = {
   +threadInfo: ThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'PinnedMessagesScreen'>,
   +route: NavigationRoute<'PinnedMessagesScreen'>,
 };
 
 function PinnedMessagesScreen(props: Props): React.Node {
   const { navigation, route } = props;
   const { threadInfo } = route.params;
   const styles = useStyles(unboundStyles);
   const { id: threadID } = threadInfo;
   const [rawMessageResults, setRawMessageResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
 
   const measureMessages = useHeightMeasurer();
   const [measuredMessages, setMeasuredMessages] = React.useState<
     $ReadOnlyArray<ChatMessageItemWithHeight>,
   >([]);
 
   const [messageVerticalBounds, setMessageVerticalBounds] =
     React.useState<?VerticalBounds>();
   const scrollViewContainerRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   React.useEffect(() => {
     void (async () => {
       const result = await callFetchPinnedMessages({ threadID });
       setRawMessageResults(result.pinnedMessages);
     })();
   }, [callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems: $ReadOnlyArray<NativeChatMessageItem> =
     React.useMemo(() => {
       if (!chatMessageInfos) {
         return [];
       }
 
       const chatMessageInfoItems = chatMessageInfos.filter(
         item =>
           item.itemType === 'message' &&
           item.isPinned &&
           !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
       );
 
       // By the nature of using messageListData and passing in
       // the desired translatedMessageResults as additional
       // messages, we will have duplicate ChatMessageInfoItems.
       const uniqueChatMessageInfoItemsMap = new Map<
         string,
         ChatMessageInfoItem,
       >();
       chatMessageInfoItems.forEach(
         item =>
           item.messageInfo &&
           item.messageInfo.id &&
           uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
       );
 
       // Push the items in the order they appear in the rawMessageResults
       // since the messages fetched from the server are already sorted
       // in the order of pin_time (newest first).
       const sortedChatMessageInfoItems = [];
       for (let i = 0; i < rawMessageResults.length; i++) {
         const { id } = rawMessageResults[i];
         invariant(id, 'pinned message returned from server should have ID');
         sortedChatMessageInfoItems.push(uniqueChatMessageInfoItemsMap.get(id));
       }
 
       return sortedChatMessageInfoItems.filter(Boolean);
     }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const measureCallback = React.useCallback(
     (listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>) => {
       setMeasuredMessages(listDataWithHeights);
     },
     [],
   );
 
   React.useEffect(() => {
     measureMessages(
       sortedUniqueChatMessageInfoItems,
       threadInfo,
       measureCallback,
     );
   }, [
     measureCallback,
     measureMessages,
     sortedUniqueChatMessageInfoItems,
     threadInfo,
   ]);
 
   const onLayout = React.useCallback(() => {
     scrollViewContainerRef.current?.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
 
         setMessageVerticalBounds({ height, y: pageY });
       },
     );
   }, []);
 
   const messageResultsToDisplay = React.useMemo(
     () =>
       measuredMessages.map(item => {
         invariant(item.itemType !== 'loader', 'should not be loader');
 
         return (
           <MessageResult
-            key={item.messageInfo.id}
+            key={chatMessageItemKey(item)}
             item={item}
             threadInfo={threadInfo}
             navigation={navigation}
             route={route}
             messageVerticalBounds={messageVerticalBounds}
             scrollable={false}
           />
         );
       }),
     [measuredMessages, threadInfo, navigation, route, messageVerticalBounds],
   );
 
   return (
     <View
       ref={scrollViewContainerRef}
       onLayout={onLayout}
       style={styles.scrollViewContainer}
     >
       <ScrollView>{messageResultsToDisplay}</ScrollView>
     </View>
   );
 }
 
 const unboundStyles = {
   scrollViewContainer: {
     flex: 1,
   },
 };
 
 export default PinnedMessagesScreen;
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
index 3c32e15b3..5058105ff 100644
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -1,240 +1,242 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { chatMessageItemHasEngagement } from 'lib/shared/chat-message-item-utils.js';
-import { messageKey } from 'lib/shared/message-utils.js';
+import {
+  chatMessageItemKey,
+  chatMessageItemHasEngagement,
+} from 'lib/shared/chat-message-item-utils.js';
 import { useCanCreateSidebarFromMessage } from 'lib/shared/sidebar-utils.js';
 
 import { inlineEngagementCenterStyle } from './chat-constants.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import { InlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils.js';
 import { ChatContext } from '../chat/chat-context.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import { fixedTooltipHeight } from '../tooltip/tooltip.react.js';
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import { AnimatedView } from '../types/styles.js';
 
 type Props = {
   ...React.ElementConfig<typeof View>,
   +item: ChatRobotextMessageInfoItemWithHeight,
   +navigation:
     | ChatNavigationProp<'MessageList'>
     | AppNavigationProp<'TogglePinModal'>
     | ChatNavigationProp<'PinnedMessagesScreen'>
     | ChatNavigationProp<'MessageSearch'>,
   +route:
     | NavigationRoute<'MessageList'>
     | NavigationRoute<'TogglePinModal'>
     | NavigationRoute<'PinnedMessagesScreen'>
     | NavigationRoute<'MessageSearch'>,
   +focused: boolean,
   +toggleFocus: (messageKey: string) => void,
   +verticalBounds: ?VerticalBounds,
 };
 function RobotextMessage(props: Props): React.Node {
   const {
     item,
     navigation,
     route,
     focused,
     toggleFocus,
     verticalBounds,
     ...viewProps
   } = props;
 
   let timestamp = null;
   if (focused || item.startsConversation) {
     timestamp = (
       <Timestamp time={item.messageInfo.time} display="lowContrast" />
     );
   }
 
   const styles = useStyles(unboundStyles);
   let inlineEngagement = null;
   if (chatMessageItemHasEngagement(item, item.threadInfo.id)) {
     inlineEngagement = (
       <View style={styles.sidebar}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={item.threadInfo}
           sidebarThreadInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
           positioning="center"
         />
       </View>
     );
   }
 
   const chatContext = React.useContext(ChatContext);
   const keyboardState = React.useContext(KeyboardContext);
-  const key = messageKey(item.messageInfo);
+  const key = chatMessageItemKey(item);
   const onPress = React.useCallback(() => {
     const didDismiss =
       keyboardState && keyboardState.dismissKeyboardIfShowing();
     if (!didDismiss) {
       toggleFocus(key);
     }
   }, [keyboardState, toggleFocus, key]);
 
   const overlayContext = React.useContext(OverlayContext);
   const viewRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     item.threadInfo,
     item.messageInfo,
   );
 
   const visibleEntryIDs = React.useMemo(() => {
     const result = [];
 
     if (item.threadCreatedFromMessage || canCreateSidebarFromMessage) {
       result.push('sidebar');
     }
 
     return result;
   }, [item.threadCreatedFromMessage, canCreateSidebarFromMessage]);
 
   const openRobotextTooltipModal = React.useCallback(
     (
       x: number,
       y: number,
       width: number,
       height: number,
       pageX: number,
       pageY: number,
     ) => {
       invariant(
         verticalBounds,
         'verticalBounds should be present in openRobotextTooltipModal',
       );
       const coordinates = { x: pageX, y: pageY, width, height };
 
       const messageTop = pageY;
       const messageBottom = pageY + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const belowMargin = 20;
       const belowSpace = fixedTooltipHeight + belowMargin;
       const aboveMargin = 30;
       const aboveSpace = fixedTooltipHeight + aboveMargin;
 
       let margin = 0;
       if (
         messageBottom + belowSpace > boundsBottom &&
         messageTop - aboveSpace > boundsTop
       ) {
         margin = aboveMargin;
       }
 
       const currentInputBarHeight =
         chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0;
 
       props.navigation.navigate<'RobotextMessageTooltipModal'>({
         name: RobotextMessageTooltipModalRouteName,
         params: {
           presentedFrom: props.route.key,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs,
           tooltipLocation: 'fixed',
           margin,
           item,
           chatInputBarHeight: currentInputBarHeight,
         },
         key: getMessageTooltipKey(item),
       });
     },
     [
       item,
       props.navigation,
       props.route.key,
       verticalBounds,
       visibleEntryIDs,
       chatContext,
     ],
   );
 
   const onLongPress = React.useCallback(() => {
     if (keyboardState && keyboardState.dismissKeyboardIfShowing()) {
       return;
     }
 
     if (visibleEntryIDs.length === 0) {
       return;
     }
 
     if (!viewRef.current || !verticalBounds) {
       return;
     }
 
     if (!focused) {
-      toggleFocus(messageKey(item.messageInfo));
+      toggleFocus(key);
     }
 
     invariant(overlayContext, 'RobotextMessage should have OverlayContext');
     overlayContext.setScrollBlockingModalStatus('open');
     viewRef.current?.measure(openRobotextTooltipModal);
   }, [
     focused,
-    item,
+    key,
     keyboardState,
     overlayContext,
     toggleFocus,
     verticalBounds,
     viewRef,
     visibleEntryIDs,
     openRobotextTooltipModal,
   ]);
 
   const onLayout = React.useCallback(() => {}, []);
 
   const contentAndHeaderOpacity = useContentAndHeaderOpacity(item);
 
   const viewStyle: { height?: number } = {};
   if (!__DEV__) {
     // We don't force view height in dev mode because we
     // want to measure it in Message to see if it's correct
     viewStyle.height = item.contentHeight;
   }
 
   return (
     <View {...viewProps}>
       <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
         {timestamp}
       </AnimatedView>
       <View onLayout={onLayout} ref={viewRef} style={viewStyle}>
         <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
           <InnerRobotextMessage
             item={item}
             onPress={onPress}
             onLongPress={onLongPress}
           />
         </AnimatedView>
       </View>
       {inlineEngagement}
     </View>
   );
 }
 
 const unboundStyles = {
   sidebar: {
     marginTop: inlineEngagementCenterStyle.topOffset,
     marginBottom: -inlineEngagementCenterStyle.topOffset,
     alignSelf: 'center',
   },
 };
 
 export { RobotextMessage };
diff --git a/native/chat/utils.js b/native/chat/utils.js
index 9c13d73cf..4b7efe49b 100644
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -1,443 +1,430 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
-import { messageKey } from 'lib/shared/message-utils.js';
 import { viewerIsMember } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import { clusterEndHeight } from './chat-constants.js';
 import { ChatContext, useHeightMeasurer } from './chat-context.js';
 import { failedSendHeight } from './failed-send.react.js';
-import {
-  type NativeChatMessageItem,
-  useNativeMessageListData,
-} from './message-data.react.js';
+import { useNativeMessageListData } from './message-data.react.js';
 import { authorNameHeight } from './message-header.react.js';
 import { multimediaMessageItemHeight } from './multimedia-message-utils.js';
 import { getUnresolvedSidebarThreadInfo } from './sidebar-navigation.js';
 import textMessageSendFailed from './text-message-send-failed.js';
 import { timestampHeight } from './timestamp.react.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import {
   MultimediaMessageTooltipModalRouteName,
   RobotextMessageTooltipModalRouteName,
   TextMessageTooltipModalRouteName,
 } from '../navigation/route-names.js';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
   ChatTextMessageInfoItemWithHeight,
 } from '../types/chat-types.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
 import type { AnimatedViewStyle } from '../types/styles.js';
 
 const {
   Node,
   Extrapolate,
   interpolateNode,
   interpolateColors,
   block,
   call,
   eq,
   cond,
   sub,
 } = Animated;
 
 function textMessageItemHeight(
   item: ChatTextMessageInfoItemWithHeight,
 ): number {
   const { messageInfo, contentHeight, startsCluster, endsCluster } = item;
   const { isViewer } = messageInfo.creator;
   let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage
   if (!isViewer && startsCluster) {
     height += authorNameHeight;
   }
   if (endsCluster) {
     height += clusterEndHeight;
   }
   if (textMessageSendFailed(item)) {
     height += failedSendHeight;
   }
 
   return height;
 }
 
 function messageItemHeight(item: ChatMessageInfoItemWithHeight): number {
   let height = 0;
   if (item.messageShapeType === 'text') {
     height += textMessageItemHeight(item);
   } else if (item.messageShapeType === 'multimedia') {
     height += multimediaMessageItemHeight(item);
   } else {
     height += item.contentHeight;
   }
   if (item.startsConversation) {
     height += timestampHeight;
   }
   return height;
 }
 
 function chatMessageItemHeight(item: ChatMessageItemWithHeight): number {
   if (item.itemType === 'loader') {
     return 56;
   }
   return messageItemHeight(item);
 }
 
 function useMessageTargetParameters(
   sourceMessage: ChatMessageInfoItemWithHeight,
   initialCoordinates: LayoutCoordinates,
   messageListVerticalBounds: VerticalBounds,
   currentInputBarHeight: number,
   targetInputBarHeight: number,
   sidebarThreadInfo: ?ThreadInfo,
 ): {
   +position: number,
   +color: string,
 } {
   const messageListData = useNativeMessageListData({
     searching: false,
     userInfoInputArray: [],
     threadInfo: sidebarThreadInfo,
   });
 
   const [messagesWithHeight, setMessagesWithHeight] =
     React.useState<?$ReadOnlyArray<ChatMessageItemWithHeight>>(null);
   const measureMessages = useHeightMeasurer();
 
   React.useEffect(() => {
     if (messageListData) {
       measureMessages(
         messageListData,
         sidebarThreadInfo,
         setMessagesWithHeight,
       );
     }
   }, [measureMessages, messageListData, sidebarThreadInfo]);
 
   const sourceMessageID = sourceMessage.messageInfo?.id;
   const targetDistanceFromBottom = React.useMemo(() => {
     if (!messagesWithHeight) {
       return 0;
     }
 
     let offset = 0;
     for (const message of messagesWithHeight) {
       offset += chatMessageItemHeight(message);
       if (message.messageInfo && message.messageInfo.id === sourceMessageID) {
         return offset;
       }
     }
 
     return (
       messageListVerticalBounds.height + chatMessageItemHeight(sourceMessage)
     );
   }, [
     messageListVerticalBounds.height,
     messagesWithHeight,
     sourceMessage,
     sourceMessageID,
   ]);
 
   if (!sidebarThreadInfo) {
     return {
       position: 0,
       color: sourceMessage.threadInfo.color,
     };
   }
 
   const authorNameComponentHeight = sourceMessage.messageInfo.creator.isViewer
     ? 0
     : authorNameHeight;
   const currentDistanceFromBottom =
     messageListVerticalBounds.height +
     messageListVerticalBounds.y -
     initialCoordinates.y +
     timestampHeight +
     authorNameComponentHeight +
     currentInputBarHeight;
   return {
     position:
       targetDistanceFromBottom +
       targetInputBarHeight -
       currentDistanceFromBottom,
     color: sidebarThreadInfo.color,
   };
 }
 
 type AnimatedMessageArgs = {
   +sourceMessage: ChatMessageInfoItemWithHeight,
   +initialCoordinates: LayoutCoordinates,
   +messageListVerticalBounds: VerticalBounds,
   +progress: Node,
   +targetInputBarHeight: ?number,
 };
 
 function useAnimatedMessageTooltipButton({
   sourceMessage,
   initialCoordinates,
   messageListVerticalBounds,
   progress,
   targetInputBarHeight,
 }: AnimatedMessageArgs): {
   +style: AnimatedViewStyle,
   +threadColorOverride: ?Node,
   +isThreadColorDarkOverride: ?boolean,
 } {
   const chatContext = React.useContext(ChatContext);
   invariant(chatContext, 'chatContext should be set');
   const {
     currentTransitionSidebarSourceID,
     setCurrentTransitionSidebarSourceID,
     chatInputBarHeights,
     sidebarAnimationType,
     setSidebarAnimationType,
   } = chatContext;
 
   const loggedInUserInfo = useLoggedInUserInfo();
   const chatMentionCandidates = useThreadChatMentionCandidates(
     sourceMessage.threadInfo,
   );
   const sidebarThreadInfo = React.useMemo(
     () =>
       getUnresolvedSidebarThreadInfo({
         sourceMessage,
         loggedInUserInfo,
         chatMentionCandidates,
       }),
     [sourceMessage, loggedInUserInfo, chatMentionCandidates],
   );
 
   const currentInputBarHeight =
     chatInputBarHeights.get(sourceMessage.threadInfo.id) ?? 0;
   const keyboardState = React.useContext(KeyboardContext);
 
   const newSidebarAnimationType =
     !currentInputBarHeight ||
     !targetInputBarHeight ||
     keyboardState?.keyboardShowing ||
     !viewerIsMember(sidebarThreadInfo)
       ? 'fade_source_message'
       : 'move_source_message';
   React.useEffect(() => {
     setSidebarAnimationType(newSidebarAnimationType);
   }, [setSidebarAnimationType, newSidebarAnimationType]);
 
   const { position: targetPosition, color: targetColor } =
     useMessageTargetParameters(
       sourceMessage,
       initialCoordinates,
       messageListVerticalBounds,
       currentInputBarHeight,
       targetInputBarHeight ?? currentInputBarHeight,
       sidebarThreadInfo,
     );
 
   React.useEffect(() => {
     return () => setCurrentTransitionSidebarSourceID(null);
   }, [setCurrentTransitionSidebarSourceID]);
 
   const bottom = React.useMemo(
     () =>
       interpolateNode(progress, {
         inputRange: [0.3, 1],
         outputRange: [targetPosition, 0],
         extrapolate: Extrapolate.CLAMP,
       }),
     [progress, targetPosition],
   );
 
   const [isThreadColorDarkOverride, setThreadColorDarkOverride] =
     React.useState<?boolean>(null);
   const setThreadColorBrightness = React.useCallback(() => {
     const isSourceThreadDark = colorIsDark(sourceMessage.threadInfo.color);
     const isTargetThreadDark = colorIsDark(targetColor);
     if (isSourceThreadDark !== isTargetThreadDark) {
       setThreadColorDarkOverride(isTargetThreadDark);
     }
   }, [sourceMessage.threadInfo.color, targetColor]);
 
   const threadColorOverride = React.useMemo(() => {
     if (
       sourceMessage.messageShapeType !== 'text' ||
       !currentTransitionSidebarSourceID
     ) {
       return null;
     }
     return block([
       cond(eq(progress, 1), call([], setThreadColorBrightness)),
       interpolateColors(progress, {
         inputRange: [0, 1],
         outputColorRange: [
           `#${targetColor}`,
           `#${sourceMessage.threadInfo.color}`,
         ],
       }),
     ]);
   }, [
     currentTransitionSidebarSourceID,
     progress,
     setThreadColorBrightness,
     sourceMessage.messageShapeType,
     sourceMessage.threadInfo.color,
     targetColor,
   ]);
 
   const messageContainerStyle = React.useMemo(() => {
     return {
       bottom: currentTransitionSidebarSourceID ? bottom : 0,
       opacity:
         currentTransitionSidebarSourceID &&
         sidebarAnimationType === 'fade_source_message'
           ? 0
           : 1,
     };
   }, [bottom, currentTransitionSidebarSourceID, sidebarAnimationType]);
 
   return {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   };
 }
 
 function getMessageTooltipKey(item: ChatMessageInfoItemWithHeight): string {
-  return `tooltip|${messageKey(item.messageInfo)}`;
+  return `tooltip|${chatMessageItemKey(item)}`;
 }
 
 function isMessageTooltipKey(key: string): boolean {
   return key.startsWith('tooltip|');
 }
 
 function useOverlayPosition(item: ChatMessageInfoItemWithHeight) {
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'should be set');
 
   for (const overlay of overlayContext.visibleOverlays) {
     if (
       (overlay.routeName === MultimediaMessageTooltipModalRouteName ||
         overlay.routeName === TextMessageTooltipModalRouteName ||
         overlay.routeName === RobotextMessageTooltipModalRouteName) &&
       overlay.routeKey === getMessageTooltipKey(item)
     ) {
       return overlay.position;
     }
   }
   return undefined;
 }
 
 function useContentAndHeaderOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(
     () =>
       overlayPosition &&
       chatContext?.sidebarAnimationType === 'move_source_message'
         ? sub(
             1,
             interpolateNode(overlayPosition, {
               inputRange: [0.05, 0.06],
               outputRange: [0, 1],
               extrapolate: Extrapolate.CLAMP,
             }),
           )
         : 1,
     [chatContext?.sidebarAnimationType, overlayPosition],
   );
 }
 
 function useDeliveryIconOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(() => {
     if (
       !overlayPosition ||
       !chatContext?.currentTransitionSidebarSourceID ||
       chatContext?.sidebarAnimationType === 'fade_source_message'
     ) {
       return 1;
     }
     return interpolateNode(overlayPosition, {
       inputRange: [0.05, 0.06, 1],
       outputRange: [1, 0, 0],
       extrapolate: Extrapolate.CLAMP,
     });
   }, [
     chatContext?.currentTransitionSidebarSourceID,
     chatContext?.sidebarAnimationType,
     overlayPosition,
   ]);
 }
 
-function chatMessageItemKey(
-  item: ChatMessageItemWithHeight | NativeChatMessageItem,
-): string {
-  if (item.itemType === 'loader') {
-    return 'loader';
-  }
-  return messageKey(item.messageInfo);
-}
-
 function modifyItemForResultScreen(
   item: ChatMessageInfoItemWithHeight,
 ): ChatMessageInfoItemWithHeight {
   if (item.messageShapeType === 'robotext') {
     return item;
   }
 
   if (item.messageShapeType === 'multimedia') {
     return {
       ...item,
       startsConversation: false,
       startsCluster: true,
       endsCluster: true,
       messageInfo: {
         ...item.messageInfo,
         creator: {
           ...item.messageInfo.creator,
           isViewer: false,
         },
       },
     };
   }
 
   return {
     ...item,
     startsConversation: false,
     startsCluster: true,
     endsCluster: true,
     messageInfo: {
       ...item.messageInfo,
       creator: {
         ...item.messageInfo.creator,
         isViewer: false,
       },
     },
   };
 }
 
 export {
-  chatMessageItemKey,
   chatMessageItemHeight,
   useAnimatedMessageTooltipButton,
   messageItemHeight,
   getMessageTooltipKey,
   isMessageTooltipKey,
   useContentAndHeaderOpacity,
   useDeliveryIconOpacity,
   modifyItemForResultScreen,
 };
diff --git a/native/search/message-search.react.js b/native/search/message-search.react.js
index 723d6d255..dc893fd19 100644
--- a/native/search/message-search.react.js
+++ b/native/search/message-search.react.js
@@ -1,244 +1,245 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
 import { messageListData } from 'lib/selectors/chat-selectors.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import { createMessageInfo } from 'lib/shared/message-utils.js';
 import {
   filterChatMessageInfosForSearch,
   useSearchMessages,
 } from 'lib/shared/search-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import SearchFooter from './search-footer.react.js';
 import { MessageSearchContext } from './search-provider.react.js';
 import { useHeightMeasurer } from '../chat/chat-context.js';
 import type { ChatNavigationProp } from '../chat/chat.react.js';
 import { MessageListContextProvider } from '../chat/message-list-types.js';
 import MessageResult from '../chat/message-result.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 
 export type MessageSearchParams = {
   +threadInfo: ThreadInfo,
 };
 
 export type MessageSearchProps = {
   +navigation: ChatNavigationProp<'MessageSearch'>,
   +route: NavigationRoute<'MessageSearch'>,
 };
 
 function MessageSearch(props: MessageSearchProps): React.Node {
   const searchContext = React.useContext(MessageSearchContext);
   invariant(searchContext, 'searchContext should be set');
   const { query, clearQuery } = searchContext;
   const { threadInfo } = props.route.params;
 
   React.useEffect(() => {
     return props.navigation.addListener('beforeRemove', clearQuery);
   }, [props.navigation, clearQuery]);
 
   const [lastID, setLastID] = React.useState<?string>();
   const [lastTimestamp, setLastTimestamp] = React.useState<?number>();
   const [searchResults, setSearchResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
   const [endReached, setEndReached] = React.useState(false);
 
   const appendSearchResults = React.useCallback(
     (
       newMessages: $ReadOnlyArray<RawMessageInfo>,
       end: boolean,
       queryID: number,
     ) => {
       if (queryID !== queryIDRef.current) {
         return;
       }
       setSearchResults(oldMessages => [...oldMessages, ...newMessages]);
       setEndReached(end);
     },
     [],
   );
 
   const searchMessages = useSearchMessages();
 
   const queryIDRef = React.useRef(0);
 
   React.useEffect(() => {
     setSearchResults([]);
     setLastID(undefined);
     setLastTimestamp(undefined);
     setEndReached(false);
   }, [query, searchMessages]);
 
   React.useEffect(() => {
     queryIDRef.current += 1;
     searchMessages(
       query,
       threadInfo.id,
       appendSearchResults,
       queryIDRef.current,
       lastTimestamp,
       lastID,
     );
   }, [
     appendSearchResults,
     lastID,
     query,
     searchMessages,
     threadInfo.id,
     lastTimestamp,
   ]);
 
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const translatedSearchResults = React.useMemo(() => {
     const threadInfos = { [threadInfo.id]: threadInfo };
     return searchResults
       .map(rawMessageInfo =>
         createMessageInfo(rawMessageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [searchResults, threadInfo, userInfos]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedSearchResults),
   );
 
   const filteredChatMessageInfos = React.useMemo(() => {
     const result = filterChatMessageInfosForSearch(
       chatMessageInfos,
       translatedSearchResults,
     );
     if (result && !endReached) {
       return [...result, { itemType: 'loader' }];
     }
     return result;
   }, [chatMessageInfos, endReached, translatedSearchResults]);
 
   const [measuredMessages, setMeasuredMessages] = React.useState<
     $ReadOnlyArray<ChatMessageItemWithHeight>,
   >([]);
 
   const measureMessages = useHeightMeasurer();
   const measureCallback = React.useCallback(
     (listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>) => {
       setMeasuredMessages(listDataWithHeights);
     },
     [setMeasuredMessages],
   );
 
   React.useEffect(() => {
     measureMessages(filteredChatMessageInfos, threadInfo, measureCallback);
   }, [filteredChatMessageInfos, measureCallback, measureMessages, threadInfo]);
 
   const [messageVerticalBounds, setMessageVerticalBounds] =
     React.useState<?VerticalBounds>();
   const scrollViewContainerRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const onLayout = React.useCallback(() => {
     scrollViewContainerRef.current?.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
 
         setMessageVerticalBounds({ height, y: pageY });
       },
     );
   }, []);
 
   const renderItem = React.useCallback(
     ({ item }: { +item: ChatMessageItemWithHeight, ... }) => {
       if (item.itemType === 'loader') {
         return <ListLoadingIndicator />;
       }
       return (
         <MessageResult
-          key={item.messageInfo.id}
+          key={chatMessageItemKey(item)}
           item={item}
           threadInfo={threadInfo}
           navigation={props.navigation}
           route={props.route}
           messageVerticalBounds={messageVerticalBounds}
           scrollable={false}
         />
       );
     },
     [messageVerticalBounds, props.navigation, props.route, threadInfo],
   );
 
   const footer = React.useMemo(() => {
     if (query === '') {
       return <SearchFooter text="Your search results will appear here" />;
     }
     if (!endReached) {
       return null;
     }
     if (measuredMessages.length > 0) {
       return <SearchFooter text="End of results" />;
     }
     const text =
       'No results. Please try using different keywords to refine your search';
     return <SearchFooter text={text} />;
   }, [query, endReached, measuredMessages.length]);
 
   const onEndOfLoadedMessagesReached = React.useCallback(() => {
     if (endReached) {
       return;
     }
     const oldest = oldestMessage(measuredMessages);
     setLastID(oldest?.id);
     setLastTimestamp(oldest?.time);
   }, [endReached, measuredMessages]);
 
   const styles = useStyles(unboundStyles);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <View
         style={styles.content}
         ref={scrollViewContainerRef}
         onLayout={onLayout}
       >
         <FlatList
           renderItem={renderItem}
           data={measuredMessages}
           onEndReached={onEndOfLoadedMessagesReached}
           ListFooterComponent={footer}
         />
       </View>
     </MessageListContextProvider>
   );
 }
 
 function oldestMessage(data: $ReadOnlyArray<ChatMessageItemWithHeight>) {
   for (let i = data.length - 1; i >= 0; i--) {
     if (data[i].itemType === 'message' && data[i].messageInfo.id) {
       return data[i].messageInfo;
     }
   }
   return undefined;
 }
 
 const unboundStyles = {
   content: {
     height: '100%',
     backgroundColor: 'panelBackground',
   },
 };
 
 export default MessageSearch;
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index 0ab408c44..9d81ad539 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,466 +1,460 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors.js';
-import { messageKey, useFetchMessages } from 'lib/shared/message-utils.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
+import { useFetchMessages } from 'lib/shared/message-utils.js';
 import {
   threadIsPending,
   threadOtherMembers,
 } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypeIsPersonal } from 'lib/types/thread-types-enum.js';
 
 import { defaultMaxTextAreaHeight, editBoxHeight } from './chat-constants.js';
 import css from './chat-message-list.css';
 import type { ScrollToMessageCallback } from './edit-message-provider.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import { MessageListContext } from './message-list-types.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipContext } from '../tooltips/tooltip-provider.js';
 
 const browser = detectBrowser();
 const supportsReverseFlex =
   !browser || browser.name !== 'firefox' || parseInt(browser.version) >= 81;
 
 // Margin between the top of the maximum height edit box
 // and the top of the container
 const editBoxTopMargin = 10;
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +inputState: ?InputState,
   +clearTooltip: () => mixed,
   +isEditState: boolean,
   +addScrollToMessageListener: ScrollToMessageCallback => mixed,
   +removeScrollToMessageListener: ScrollToMessageCallback => mixed,
   +viewerID: ?string,
   +fetchMessages: () => Promise<mixed>,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
 
 type State = {
   +scrollingEndCallback: ?() => mixed,
 };
 
 class ChatMessageList extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       scrollingEndCallback: null,
     };
   }
 
   componentDidMount() {
     this.scrollToBottom();
     this.props.addScrollToMessageListener(this.scrollToMessage);
   }
 
   componentWillUnmount() {
     this.props.removeScrollToMessageListener(this.scrollToMessage);
   }
 
   getSnapshotBeforeUpdate(prevProps: Props): ?Snapshot {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props): boolean {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
-      ChatMessageList.keyExtractor(prevMessageListData[0]) !==
-      ChatMessageList.keyExtractor(messageListData[0])
+      chatMessageItemKey(prevMessageListData[0]) !==
+      chatMessageItemKey(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     const { messageContainer } = this;
     if (
       messageContainer &&
       prevMessageListData !== messageListData &&
       messageContainer.scrollTop === 0
     ) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage &&
         snapshot &&
         Math.abs(snapshot.scrollTop) <= 1 &&
         !this.props.isEditState)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
-  static keyExtractor(item: ChatMessageItem): string {
-    if (item.itemType === 'loader') {
-      return 'loader';
-    }
-    return messageKey(item.messageInfo);
-  }
-
   renderItem = (item: ChatMessageItem): React.Node => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="white" />
         </div>
       );
     }
     const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         shouldDisplayPinIndicator={true}
-        key={ChatMessageList.keyExtractor(item)}
+        key={chatMessageItemKey(item)}
       />
     );
   };
 
   scrollingEndCallbackWrapper = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ): (() => mixed) => {
     return () => {
       const maxHeight = this.getMaxEditTextAreaHeight(composedMessageID);
       callback(maxHeight);
     };
   };
 
   scrollToMessage = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ) => {
     const element = document.getElementById(composedMessageID);
     if (!element) {
       return;
     }
     const scrollingEndCallback = this.scrollingEndCallbackWrapper(
       composedMessageID,
       callback,
     );
     if (!this.willMessageEditWindowOverflow(composedMessageID)) {
       scrollingEndCallback();
       return;
     }
     this.setState(
       {
         scrollingEndCallback,
       },
       () => {
         element.scrollIntoView({ behavior: 'smooth', block: 'center' });
         // It covers the case when browser decide not to scroll to the message
         // because it's already in the view.
         // In this case, the 'scroll' event won't be triggered,
         // so we need to call the callback manually.
         this.debounceEditModeAfterScrollToMessage();
       },
     );
   };
 
   getMaxEditTextAreaHeight = (composedMessageID: string): number => {
     const { messageContainer } = this;
     if (!messageContainer) {
       return defaultMaxTextAreaHeight;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return defaultMaxTextAreaHeight;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
 
     const messageBottom = msgPos.bottom;
     const containerTop = containerPos.top;
 
     const maxHeight =
       messageBottom - containerTop - editBoxHeight - editBoxTopMargin;
 
     return maxHeight;
   };
 
   willMessageEditWindowOverflow(composedMessageID: string): boolean {
     const { messageContainer } = this;
     if (!messageContainer) {
       return false;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return false;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
     const containerTop = containerPos.top;
     const containerBottom = containerPos.bottom;
 
     const availableTextAreaHeight =
       (containerBottom - containerTop) / 2 - editBoxHeight;
     const messageHeight = msgPos.height;
     const expectedMinimumHeight = Math.min(
       defaultMaxTextAreaHeight,
       availableTextAreaHeight,
     );
     const offset = Math.max(
       0,
       expectedMinimumHeight + editBoxHeight + editBoxTopMargin - messageHeight,
     );
 
     const messageTop = msgPos.top - offset;
     const messageBottom = msgPos.bottom;
 
     return messageBottom > containerBottom || messageTop < containerTop;
   }
 
   render(): React.Node {
     const { messageListData, threadInfo, inputState, isEditState } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
 
     let relationshipPrompt = null;
     if (threadTypeIsPersonal(threadInfo.type)) {
       const otherMembers = threadOtherMembers(
         threadInfo.members,
         this.props.viewerID,
       );
 
       let pendingPersonalThreadUserInfo;
       if (otherMembers.length === 1) {
         const otherMember = otherMembers[0];
         pendingPersonalThreadUserInfo = {
           id: otherMember.id,
           username: otherMember.username,
         };
       }
 
       relationshipPrompt = (
         <RelationshipPrompt
           threadInfo={threadInfo}
           pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
         />
       );
     }
 
     const messageContainerStyle = classNames({
       [css.disableAnchor]:
         this.state.scrollingEndCallback !== null || isEditState,
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !supportsReverseFlex,
     });
     return (
       <div className={css.outerMessageContainer}>
         {relationshipPrompt}
         <div className={messageContainerStyle} ref={this.messageContainerRef}>
           {messages}
         </div>
       </div>
     );
   }
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     void this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     this.props.clearTooltip();
     void this.possiblyLoadMoreMessages();
     this.debounceEditModeAfterScrollToMessage();
   };
 
   debounceEditModeAfterScrollToMessage: () => void = _debounce(() => {
     if (this.state.scrollingEndCallback) {
       this.state.scrollingEndCallback();
     }
     this.setState({ scrollingEndCallback: null });
   }, 100);
 
   async possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
 
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
 
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
 
     try {
       await this.props.fetchMessages();
     } finally {
       this.loadingFromScroll = false;
     }
   }
 }
 
 const ConnectedChatMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatMessageList(
     props: BaseProps,
   ): React.Node {
     const { threadInfo } = props;
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = !!useSelector(state => {
       const activeID = threadInfo.id;
       if (!activeID) {
         return null;
       }
 
       if (threadIsPending(activeID)) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const fetchMessages = useFetchMessages(threadInfo);
 
     const inputState = React.useContext(InputStateContext);
 
     const { clearTooltip } = useTooltipContext();
 
     const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(
       threadInfo,
       chatMentionCandidates,
     );
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     const {
       editState,
       addScrollToMessageListener,
       removeScrollToMessageListener,
     } = useEditModalContext();
     const isEditState = editState !== null;
 
     const viewerID = useSelector(state => state.currentUserInfo?.id);
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
           activeChatThreadID={threadInfo.id}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           inputState={inputState}
           clearTooltip={clearTooltip}
           isEditState={isEditState}
           addScrollToMessageListener={addScrollToMessageListener}
           removeScrollToMessageListener={removeScrollToMessageListener}
           viewerID={viewerID}
           fetchMessages={fetchMessages}
         />
       </MessageListContext.Provider>
     );
   });
 
 export default ConnectedChatMessageList;
diff --git a/web/components/message-result.react.js b/web/components/message-result.react.js
index dc674e712..b46eaf332 100644
--- a/web/components/message-result.react.js
+++ b/web/components/message-result.react.js
@@ -1,70 +1,69 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 
 import css from './message-result.css';
 import { MessageListContext } from '../chat/message-list-types.js';
 import Message from '../chat/message.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 
 type MessageResultProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +scrollable: boolean,
 };
 
 function MessageResult(props: MessageResultProps): React.Node {
   const { item, threadInfo, scrollable } = props;
 
   const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
   const getTextMessageMarkdownRules = useTextMessageRulesFunc(
     threadInfo,
     chatMentionCandidates,
   );
   const messageListContext = React.useMemo(() => {
     if (!getTextMessageMarkdownRules) {
       return undefined;
     }
     return { getTextMessageMarkdownRules };
   }, [getTextMessageMarkdownRules]);
 
   const shouldShowUsername = !item.startsConversation && !item.startsCluster;
   const username = useStringForUser(
     shouldShowUsername ? item.messageInfo.creator : null,
   );
 
   const messageContainerClassNames = classNames({
     [css.messageContainer]: true,
     [css.messageContainerOverflow]: scrollable,
   });
 
   return (
     <div className={messageContainerClassNames}>
       <div>
         <div className={css.creator}>{username}</div>
         <div className={css.messageContent}>
           <MessageListContext.Provider value={messageListContext}>
             <Message
               item={item}
               threadInfo={threadInfo}
               shouldDisplayPinIndicator={false}
-              key={item.messageInfo.id}
             />
           </MessageListContext.Provider>
         </div>
         <div className={css.messageDate}>
           {longAbsoluteDate(item.messageInfo.time)}
         </div>
       </div>
     </div>
   );
 }
 
 export default MessageResult;
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
index 8d5010afe..43828fae0 100644
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -1,180 +1,181 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPinnedMessageActionTypes,
   useFetchPinnedMessages,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import {
   type ChatMessageInfoItem,
   messageListData,
 } from 'lib/selectors/chat-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './pinned-messages-modal.css';
 import MessageResult from '../../components/message-result.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal from '../modal.react.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function PinnedMessagesModal(props: Props): React.Node {
   const { threadInfo } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const loadingStatus = useSelector(loadingStatusSelector);
 
   React.useEffect(() => {
     void dispatchActionPromise(
       fetchPinnedMessageActionTypes,
       (async () => {
         const result = await callFetchPinnedMessages({ threadID });
         setRawMessageResults(result.pinnedMessages);
       })(),
     );
   }, [dispatchActionPromise, callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return ([]: ChatMessageInfoItem[]);
     }
 
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
         item.isPinned &&
         !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
     const uniqueChatMessageInfoItemsMap = new Map<
       string,
       ChatMessageInfoItem,
     >();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
       const rawMessageID = rawMessageResults[i].id;
       if (!rawMessageID) {
         continue;
       }
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageID),
       );
     }
 
     return sortedChatMessageInfoItems;
   }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     if (modifiedItems.length === 0) {
       return (
         <div className={css.noPinnedMessages}>
           No pinned messages in this thread.
         </div>
       );
     }
 
     const items = modifiedItems.map(item => (
       <MessageResult
-        key={item.messageInfo.id}
+        key={chatMessageItemKey(item)}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ));
     return <>{items}</>;
   }, [modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <div className={css.loadingIndicator}>
           <LoadingIndicator status="loading" size="medium" />
         </div>
       );
     }
     return null;
   }, [loadingStatus]);
 
   const modalName = pinnedMessageCountText(modifiedItems.length);
 
   const subheader = React.useMemo(() => <hr className={css.separator} />, []);
 
   return (
     <Modal
       name={modalName}
       onClose={popModal}
       size="large"
       subheader={subheader}
     >
       <div className={css.container}>
         <div className={css.topSpace}>{loadingIndicator}</div>
         <div className={css.messageResultsContainer}>
           {messageResultsToDisplay}
         </div>
       </div>
     </Modal>
   );
 }
 
 export default PinnedMessagesModal;
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
index 47c5a7d7c..996e3a605 100644
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -1,161 +1,162 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import { chatMessageItemKey } from 'lib/shared/chat-message-item-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './message-search-modal.css';
 import { useParseSearchResults } from './message-search-utils.react.js';
 import Button from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Search from '../../components/search.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js';
 import { useTooltipContext } from '../../tooltips/tooltip-provider.js';
 import Modal from '../modal.react.js';
 
 type ContentProps = {
   +threadInfo: ThreadInfo,
 };
 
 function MessageSearchModal(props: ContentProps): React.Node {
   const { threadInfo } = props;
 
   const {
     getQuery,
     setQuery,
     clearQuery,
     searchMessages,
     getSearchResults,
     getEndReached,
   } = useMessageSearchContext();
 
   const [input, setInput] = React.useState(getQuery(threadInfo.id));
 
   const onPressSearch = React.useCallback(() => {
     setQuery(input, threadInfo.id);
     searchMessages(threadInfo.id);
   }, [setQuery, input, searchMessages, threadInfo.id]);
 
   const onKeyDown = React.useCallback(
     (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter') {
         onPressSearch();
       }
     },
     [onPressSearch],
   );
 
   const modifiedItems = useParseSearchResults(
     threadInfo,
     getSearchResults(threadInfo.id),
   );
 
   const { clearTooltip } = useTooltipContext();
 
   const messageContainer = React.useRef<?HTMLDivElement>(null);
 
   const possiblyLoadMoreMessages = React.useCallback(() => {
     if (!messageContainer.current) {
       return;
     }
 
     const loaderTopOffset = 32;
     const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
     if (Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight) {
       return;
     }
     searchMessages(threadInfo.id);
   }, [searchMessages, threadInfo.id]);
 
   const onScroll = React.useCallback(() => {
     clearTooltip();
     possiblyLoadMoreMessages();
   }, [clearTooltip, possiblyLoadMoreMessages]);
 
   const renderItem = React.useCallback(
     (item: ChatMessageInfoItem) => (
       <MessageResult
-        key={item.messageInfo.id}
+        key={chatMessageItemKey(item)}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ),
     [threadInfo],
   );
 
   const messages = React.useMemo(
     () => modifiedItems.map(item => renderItem(item)),
     [modifiedItems, renderItem],
   );
 
   const endReached = getEndReached(threadInfo.id);
   const query = getQuery(threadInfo.id);
 
   const footer = React.useMemo(() => {
     if (query === '') {
       return (
         <div className={css.footer}>Your search results will appear here</div>
       );
     }
     if (!endReached) {
       return (
         <div key="search-loader" className={css.loading}>
           <LoadingIndicator status="loading" size="medium" color="white" />
         </div>
       );
     }
     if (modifiedItems.length > 0) {
       return <div className={css.footer}>End of results</div>;
     }
     return (
       <div className={css.footer}>
         No results. Please try using different keywords to refine your search
       </div>
     );
   }, [query, endReached, modifiedItems.length]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   const searchPlaceholder = `Searching in ${uiName}`;
   const { popModal } = useModalContext();
 
   const clearQueryWrapper = React.useCallback(
     () => clearQuery(threadInfo.id),
     [clearQuery, threadInfo.id],
   );
 
   return (
     <Modal name="Search messages" onClose={popModal} size="large">
       <div className={css.container}>
         <div className={css.header}>
           <div className={css.searchBarContainer}>
             <Search
               onChangeText={setInput}
               searchText={input}
               placeholder={searchPlaceholder}
               onClearText={clearQueryWrapper}
               onKeyDown={onKeyDown}
             />
           </div>
           <Button
             onClick={onPressSearch}
             variant="filled"
             className={css.button}
           >
             Search
           </Button>
         </div>
         <div className={css.content} ref={messageContainer} onScroll={onScroll}>
           {messages}
           {footer}
         </div>
       </div>
     </Modal>
   );
 }
 
 export default MessageSearchModal;