From 4217f0efbf488f92bc7391fc53d9d453fb1870c4 Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Wed, 17 May 2023 09:48:08 -0400
Subject: [PATCH] [PAY-1151] Handle chat reactions near top of screen on mobile

---
 .../src/screens/chat-screen/ChatScreen.tsx    |  1 +
 .../src/screens/chat-screen/ReactionPopup.tsx | 19 +++++++++++++++----
 .../src/screens/chat-screen/constants.ts      |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
index 68d42bedb3..729904520d 100644
--- a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
+++ b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -428,6 +428,7 @@ export const ChatScreen = () => {
             <ReactionPopup
               chatId={chatId}
               messageTop={messageTop.current}
+              containerTop={chatContainerTop.current}
               containerBottom={chatContainerBottom.current}
               isAuthor={decodeHashId(popupMessage?.sender_user_id) === userId}
               message={popupMessage}
diff --git a/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx b/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx
index a79b7d73e8..3b952926d3 100644
--- a/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx
+++ b/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx
@@ -16,7 +16,10 @@ import { spacing } from 'app/styles/spacing'
 import { ReactionList } from '../notifications-screen/Reaction'
 
 import { ChatMessageListItem } from './ChatMessageListItem'
-import { REACTION_CONTAINER_HEIGHT } from './constants'
+import {
+  REACTION_CONTAINER_HEIGHT,
+  REACTION_CONTAINER_TOP_OFFSET
+} from './constants'
 
 const { getUserId } = accountSelectors
 const { setMessageReaction } = chatActions
@@ -69,6 +72,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 type ReactionPopupProps = {
   chatId: string
   messageTop: number
+  containerTop: number
   containerBottom: number
   isAuthor: boolean
   message: ChatMessageWithExtras
@@ -79,6 +83,7 @@ type ReactionPopupProps = {
 export const ReactionPopup = ({
   chatId,
   messageTop,
+  containerTop,
   containerBottom,
   isAuthor,
   message,
@@ -136,7 +141,8 @@ export const ReactionPopup = ({
         style={[
           styles.popupContainer,
           {
-            height: containerBottom
+            height: containerBottom - containerTop,
+            top: containerTop
           }
         ]}
       >
@@ -152,7 +158,7 @@ export const ReactionPopup = ({
             style={[
               styles.popupChatMessage,
               {
-                top: messageTop,
+                top: messageTop - containerTop,
                 alignSelf: isAuthor ? 'flex-end' : 'flex-start',
                 right: isAuthor ? spacing(6) : undefined,
                 left: !isAuthor ? spacing(6) : undefined
@@ -164,7 +170,12 @@ export const ReactionPopup = ({
           style={[
             styles.reactionsContainer,
             {
-              top: messageTop - REACTION_CONTAINER_HEIGHT,
+              top: Math.max(
+                messageTop - containerTop - REACTION_CONTAINER_HEIGHT,
+                containerTop -
+                  REACTION_CONTAINER_HEIGHT -
+                  REACTION_CONTAINER_TOP_OFFSET
+              ),
               opacity: otherOpacityAnim.current,
               transform: [
                 {
diff --git a/packages/mobile/src/screens/chat-screen/constants.ts b/packages/mobile/src/screens/chat-screen/constants.ts
index b1be90ae0e..54eb9840ba 100644
--- a/packages/mobile/src/screens/chat-screen/constants.ts
+++ b/packages/mobile/src/screens/chat-screen/constants.ts
@@ -1,5 +1,6 @@
 export const REACTION_LONGPRESS_DELAY = 100
 export const REACTION_CONTAINER_HEIGHT = 70
+export const REACTION_CONTAINER_TOP_OFFSET = 20
 export const BACKGROUND_OPACITY = 0.3
 export const MOUNT_ANIMATION_DURATION_MS = 100
 export const UNMOUNT_ANIMATION_DURATION_MS = 100