diff --git a/native/chat/reaction-message-utils.js b/native/chat/reaction-message-utils.js --- a/native/chat/reaction-message-utils.js +++ b/native/chat/reaction-message-utils.js @@ -119,18 +119,22 @@ +margin: ?number, }; +type ReactionSelectionPopoverPosition = { + +containerStyle: ViewStyle, + +popoverLocation: 'above' | 'below', +}; function useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, margin, -}: ReactionSelectionPopoverPositionArgs): ViewStyle { +}: ReactionSelectionPopoverPositionArgs): ReactionSelectionPopoverPosition { const reactionSelectionPopoverHeight = 56; const calculatedMargin = margin ?? 16; const windowWidth = useSelector(state => state.dimensions.width); - const reactionSelectionPopoverLocation: 'above' | 'below' = (() => { + const popoverLocation: 'above' | 'below' = (() => { const { y, height } = initialCoordinates; const contentTop = y; const contentBottom = y + height; @@ -149,7 +153,7 @@ return 'below'; })(); - return React.useMemo(() => { + const containerStyle = React.useMemo(() => { const { x, width, height } = initialCoordinates; const style = {}; @@ -164,19 +168,21 @@ style.right = 0; } - if (reactionSelectionPopoverLocation === 'above') { + if (popoverLocation === 'above') { style.bottom = height + calculatedMargin / 2; } else { style.top = height + calculatedMargin / 2; } return style; - }, [ - calculatedMargin, - initialCoordinates, - reactionSelectionPopoverLocation, - windowWidth, - ]); + }, [calculatedMargin, initialCoordinates, popoverLocation, windowWidth]); + return React.useMemo( + () => ({ + popoverLocation, + containerStyle, + }), + [popoverLocation, containerStyle], + ); } export { useSendReaction, useReactionSelectionPopoverPosition }; diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js --- a/native/chat/reaction-selection-popover.react.js +++ b/native/chat/reaction-selection-popover.react.js @@ -24,7 +24,7 @@ const { navigation, route, openEmojiPicker, sendReaction } = props; const { verticalBounds, initialCoordinates, margin } = route.params; - const reactionSelectionPopoverContainerStyle = + const { containerStyle: popoverContainerStyle } = useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, @@ -34,14 +34,8 @@ const styles = useStyles(unboundStyles); const containerStyle = React.useMemo( - () => [ - styles.reactionSelectionPopoverContainer, - reactionSelectionPopoverContainerStyle, - ], - [ - reactionSelectionPopoverContainerStyle, - styles.reactionSelectionPopoverContainer, - ], + () => [styles.reactionSelectionPopoverContainer, popoverContainerStyle], + [popoverContainerStyle, styles.reactionSelectionPopoverContainer], ); const tooltipRouteKey = route.key;