diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js --- a/native/chat/multimedia-message.react.js +++ b/native/chat/multimedia-message.react.js @@ -13,6 +13,7 @@ import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils'; import type { MediaInfo } from 'lib/types/media-types'; +import { ChatContext, type ChatContextType } from '../chat/chat-context'; import { OverlayContext } from '../navigation/overlay-context'; import type { OverlayContextType } from '../navigation/overlay-context'; import { @@ -44,6 +45,7 @@ +navigation: NavigationProp, +route: LeafRoute<>, +overlayContext: ?OverlayContextType, + +chatContext: ?ChatContextType, +canCreateSidebarFromMessage: boolean, }; type State = { @@ -151,6 +153,10 @@ margin = aboveMargin; } + const currentInputBarHeight = + this.props.chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? + 0; + this.props.navigation.navigate<'MultimediaMessageTooltipModal'>({ name: MultimediaMessageTooltipModalRouteName, params: { @@ -161,6 +167,7 @@ location: 'fixed', margin, visibleEntryIDs, + chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); @@ -183,6 +190,7 @@ navigation, route, overlayContext, + chatContext, canCreateSidebarFromMessage, ...viewProps } = this.props; @@ -220,6 +228,7 @@ const navigation = useNavigation(); const route = useRoute(); const overlayContext = React.useContext(OverlayContext); + const chatContext = React.useContext(ChatContext); const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage( props.item.threadInfo, props.item.messageInfo, @@ -230,6 +239,7 @@ navigation={navigation} route={route} overlayContext={overlayContext} + chatContext={chatContext} canCreateSidebarFromMessage={canCreateSidebarFromMessage} /> ); diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -7,6 +7,7 @@ import { messageKey } from 'lib/shared/message-utils'; import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils'; +import { ChatContext } from '../chat/chat-context'; import { KeyboardContext } from '../keyboard/keyboard-state'; import { OverlayContext } from '../navigation/overlay-context'; import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names'; @@ -60,6 +61,7 @@ ); } + const chatContext = React.useContext(ChatContext); const keyboardState = React.useContext(KeyboardContext); const key = messageKey(item.messageInfo); const onPress = React.useCallback(() => { @@ -111,6 +113,9 @@ margin = aboveMargin; } + const currentInputBarHeight = + chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0; + props.navigation.navigate<'RobotextMessageTooltipModal'>({ name: RobotextMessageTooltipModalRouteName, params: { @@ -121,11 +126,19 @@ location: 'fixed', margin, item, + chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); }, - [item, props.navigation, props.route.key, verticalBounds, visibleEntryIDs], + [ + item, + props.navigation, + props.route.key, + verticalBounds, + visibleEntryIDs, + chatContext, + ], ); const onLongPress = React.useCallback(() => { diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js --- a/native/chat/text-message.react.js +++ b/native/chat/text-message.react.js @@ -11,6 +11,7 @@ } from 'lib/shared/thread-utils'; import { threadPermissions } from 'lib/types/thread-types'; +import { ChatContext, type ChatContextType } from '../chat/chat-context'; import { MarkdownLinkContext } from '../markdown/markdown-link-context'; import { OverlayContext, @@ -43,6 +44,7 @@ // withOverlayContext +overlayContext: ?OverlayContextType, // MarkdownLinkContext + +chatContext: ?ChatContextType, +linkModalActive: boolean, +linkIsBlockingPresses: boolean, }; @@ -58,6 +60,7 @@ toggleFocus, verticalBounds, overlayContext, + chatContext, linkModalActive, linkIsBlockingPresses, canCreateSidebarFromMessage, @@ -178,6 +181,10 @@ margin = aboveMargin; } + const currentInputBarHeight = + this.props.chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? + 0; + this.props.navigation.navigate<'TextMessageTooltipModal'>({ name: TextMessageTooltipModalRouteName, params: { @@ -188,6 +195,7 @@ location: 'fixed', margin, item, + chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); @@ -198,6 +206,7 @@ const ConnectedTextMessage: React.ComponentType = React.memo( function ConnectedTextMessage(props: BaseProps) { const overlayContext = React.useContext(OverlayContext); + const chatContext = React.useContext(ChatContext); const [linkModalActive, setLinkModalActive] = React.useState(false); const [linkPressActive, setLinkPressActive] = React.useState(false); @@ -220,6 +229,7 @@ {...props} canCreateSidebarFromMessage={canCreateSidebarFromMessage} overlayContext={overlayContext} + chatContext={chatContext} linkModalActive={linkModalActive} linkIsBlockingPresses={linkIsBlockingPresses} /> diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -81,6 +81,7 @@ +location?: 'above' | 'below' | 'fixed', +margin?: number, +visibleEntryIDs?: $ReadOnlyArray, + +chatInputBarHeight?: number, }; export type TooltipRoute> = RouteProp< TooltipModalParamList, @@ -298,7 +299,11 @@ get tooltipContainerStyle() { const { dimensions, route } = this.props; - const { initialCoordinates, verticalBounds } = route.params; + const { + initialCoordinates, + verticalBounds, + chatInputBarHeight, + } = route.params; const { x, y, width, height } = initialCoordinates; const { margin, location } = this; @@ -318,14 +323,22 @@ style.minWidth = width + 2 * extraRightSpace; } + const inputBarHeight = chatInputBarHeight ?? 0; + const fullScreenHeight = dimensions.height; + if (location === 'fixed') { + const padding = 8; + style.minWidth = dimensions.width - 16; style.left = 8; style.right = 8; - } - - if (location === 'above') { - const fullScreenHeight = dimensions.height; + style.bottom = + fullScreenHeight - + verticalBounds.height - + verticalBounds.y - + inputBarHeight + + padding; + } else if (location === 'above') { style.bottom = fullScreenHeight - Math.max(y, verticalBounds.y) + margin; style.transform.push({ translateY: this.tooltipVerticalAbove });