[PAY-1149] Mobile chat reactions add android offset (#3531)

packages/mobile/src/screens/chat-screen/ReactionPopup.tsx

@@ -7,7 +7,7 @@ import type {
 } from '@audius/common'
 import { chatActions, encodeHashId, accountSelectors } from '@audius/common'
 import Clipboard from '@react-native-clipboard/clipboard'
-import { Dimensions, Pressable, Animated } from 'react-native'
+import { Dimensions, Pressable, Animated, Platform } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { usePopupAnimation } from 'app/hooks/usePopupAnimation'
@@ -21,6 +21,7 @@ import { ReactionList } from '../notifications-screen/Reaction'
 import { ChatMessageListItem } from './ChatMessageListItem'
 import { CopyMessagesButton } from './CopyMessagesButton'
 import {
+  REACTION_ANDROID_OFFSET,
   REACTION_CONTAINER_HEIGHT,
   REACTION_CONTAINER_TOP_OFFSET
 } from './constants'
@@ -99,22 +100,24 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 
 type ReactionPopupProps = {
   chatId: string
-  messageTop: number
-  messageHeight: number
   containerTop: number
   containerBottom: number
+  messageTop: number
+  messageHeight: number
   isAuthor: boolean
   message: ChatMessageWithExtras
   shouldShowPopup: boolean
   onClose: () => void
 }
 
+const addAndroidOffset = (value: number) => value + REACTION_ANDROID_OFFSET
+
 export const ReactionPopup = ({
   chatId,
-  messageTop,
+  containerTop: containerTopProp,
+  containerBottom: containerBottomProp,
+  messageTop: messageTopProp,
   messageHeight,
-  containerTop,
-  containerBottom,
   isAuthor,
   message,
   shouldShowPopup,
@@ -129,6 +132,18 @@ export const ReactionPopup = ({
   const selectedReaction = message.reactions?.find(
     (r) => r.user_id === userIdEncoded
   )?.reaction
+  const messageTop =
+    Platform.OS === 'android'
+      ? addAndroidOffset(messageTopProp)
+      : messageTopProp
+  const containerBottom =
+    Platform.OS === 'android'
+      ? addAndroidOffset(containerBottomProp)
+      : containerBottomProp
+  const containerTop =
+    Platform.OS === 'android'
+      ? addAndroidOffset(containerTopProp)
+      : containerTopProp
 
   const [
     backgroundOpacityAnim,

packages/mobile/src/screens/chat-screen/constants.ts

@@ -1,6 +1,7 @@
 export const REACTION_LONGPRESS_DELAY = 100
 export const REACTION_CONTAINER_HEIGHT = 70
 export const REACTION_CONTAINER_TOP_OFFSET = 20
+export const REACTION_ANDROID_OFFSET = 52
 export const BACKGROUND_OPACITY = 0.3
 export const MOUNT_ANIMATION_DURATION_MS = 100
 export const UNMOUNT_ANIMATION_DURATION_MS = 100