diff --git a/native/chat/chat-item-height-measurer.react.js b/native/chat/chat-item-height-measurer.react.js --- a/native/chat/chat-item-height-measurer.react.js +++ b/native/chat/chat-item-height-measurer.react.js @@ -3,6 +3,7 @@ import invariant from 'invariant'; import * as React from 'react'; +import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getInlineEngagementSidebarText, reactionsToRawString, @@ -55,9 +56,15 @@ item.itemType === 'message', 'NodeHeightMeasurer asked for dummy for non-message item', ); - const { messageInfo } = item; + const { messageInfo, hasBeenEdited } = item; if (messageInfo.type === messageTypes.TEXT) { - return dummyNodeForTextMessageHeightMeasurement(messageInfo.text); + const label = getMessageLabel(hasBeenEdited, messageInfo.threadID); + return dummyNodeForTextMessageHeightMeasurement( + messageInfo.text, + label, + item.threadCreatedFromMessage, + item.reactions, + ); } else if (item.robotext) { return dummyNodeForRobotextMessageHeightMeasurement( item.robotext, diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js --- a/native/chat/inner-text-message.react.js +++ b/native/chat/inner-text-message.react.js @@ -4,9 +4,12 @@ import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native'; import Animated from 'react-native-reanimated'; +import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; import { colorIsDark } from 'lib/shared/color-utils.js'; +import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useComposedMessageMaxWidth } from './composed-message-width.js'; +import { DummyInlineEngagementNode } from './inline-engagement.react.js'; import { useTextMessageMarkdownRules } from './message-list-types.js'; import { allCorners, @@ -29,8 +32,20 @@ function dummyNodeForTextMessageHeightMeasurement( text: string, -): React.Element { - return {text}; + editedLabel?: ?string, + sidebarInfo: ?ThreadInfo, + reactions: ReactionInfo, +): React.Element { + return ( + + {text} + + + ); } type DummyTextNodeProps = { diff --git a/native/chat/utils.js b/native/chat/utils.js --- a/native/chat/utils.js +++ b/native/chat/utils.js @@ -6,16 +6,11 @@ import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js'; import { colorIsDark } from 'lib/shared/color-utils.js'; -import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { messageKey } from 'lib/shared/message-utils.js'; import { viewerIsMember } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; -import { - inlineEngagementLabelStyle, - clusterEndHeight, - inlineEngagementStyle, -} from './chat-constants.js'; +import { clusterEndHeight } from './chat-constants.js'; import { ChatContext, useHeightMeasurer } from './chat-context.js'; import { failedSendHeight } from './failed-send.react.js'; import { @@ -62,8 +57,7 @@ function textMessageItemHeight( item: ChatTextMessageInfoItemWithHeight, ): number { - const { messageInfo, contentHeight, startsCluster, endsCluster, threadInfo } = - item; + const { messageInfo, contentHeight, startsCluster, endsCluster } = item; const { isViewer } = messageInfo.creator; let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage if (!isViewer && startsCluster) { @@ -75,18 +69,7 @@ if (textMessageSendFailed(item)) { height += failedSendHeight; } - const label = getMessageLabel(item.hasBeenEdited, threadInfo.id); - if (item.threadCreatedFromMessage || Object.keys(item.reactions).length > 0) { - height += - inlineEngagementStyle.height + - inlineEngagementStyle.marginTop + - inlineEngagementStyle.marginBottom; - } else if (label) { - height += - inlineEngagementLabelStyle.height + - inlineEngagementStyle.marginTop + - inlineEngagementStyle.marginBottom; - } + return height; }