diff --git a/native/chat/message-header.react.js b/native/chat/message-header.react.js index 126c26d4a..9b1acc7a9 100644 --- a/native/chat/message-header.react.js +++ b/native/chat/message-header.react.js @@ -1,92 +1,105 @@ // @flow +import { useRoute } from '@react-navigation/native'; import * as React from 'react'; import { View } from 'react-native'; import { useStringForUser } from 'lib/hooks/ens-cache.js'; import { clusterEndHeight, avatarOffset } from './chat-constants.js'; import type { DisplayType } from './timestamp.react.js'; import { Timestamp, timestampHeight } from './timestamp.react.js'; import { SingleLine } from '../components/single-line.react.js'; +import { MessageListRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; type Props = { +item: ChatMessageInfoItemWithHeight, +focused: boolean, +display: DisplayType, }; function MessageHeader(props: Props): React.Node { const styles = useStyles(unboundStyles); const { item, focused, display } = props; const { creator, time } = item.messageInfo; const { isViewer } = creator; + const route = useRoute(); const modalDisplay = display === 'modal'; const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster); const stringForUser = useStringForUser(shouldShowUsername ? creator : null); const shouldRenderAvatars = useShouldRenderAvatars(); let authorName = null; if (stringForUser) { const style = [styles.authorName]; if (modalDisplay) { style.push(styles.modal); } if (shouldRenderAvatars) { style.push({ marginLeft: 12 + avatarOffset }); } else { style.push({ marginLeft: 12 }); } authorName = {stringForUser}; } + // We only want to render the top-placed timestamp for a message if it's + // rendered in the message list, and not any separate screens (i.e. + // the MessageResultsScreen). + const presentedFromMessageList = + typeof route.params?.presentedFrom === 'string' && + route.params.presentedFrom.startsWith(MessageListRouteName); + + const messageInMessageList = + route.name === MessageListRouteName || presentedFromMessageList; + const timestamp = - modalDisplay || item.startsConversation ? ( + messageInMessageList && (modalDisplay || item.startsConversation) ? ( ) : null; let style = null; if (focused && !modalDisplay) { let topMargin = 0; if (!item.startsCluster && !item.messageInfo.creator.isViewer) { topMargin += authorNameHeight + clusterEndHeight; } if (!item.startsConversation) { topMargin += timestampHeight; } style = { marginTop: topMargin }; } return ( {timestamp} {authorName} ); } const authorNameHeight = 25; const unboundStyles = { authorName: { bottom: 0, color: 'listBackgroundSecondaryLabel', fontSize: 14, height: authorNameHeight, marginRight: 7, paddingHorizontal: 12, paddingVertical: 4, }, modal: { // high contrast framed against OverlayNavigator-dimmed background color: 'white', }, }; export { MessageHeader, authorNameHeight };