[PAY-1370] Fix reaction touch targets (#3513)

packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx

@@ -67,6 +67,8 @@ export const ReactionList = (props: ReactionListProps) => {
   // Whether or not the user is currently interacting with the reactions
   const [interacting, setInteracting] = useState<ReactionTypes | null>(null)
   const positions = useRef<Positions>(initialPositions)
+  const xOffset = useRef(0)
+  const reactionContainerRef = useRef<View | null>(null)
 
   const handleGesture = useCallback(
     (_, gestureState: PanResponderGestureState) => {
@@ -76,10 +78,10 @@ export const ReactionList = (props: ReactionListProps) => {
         positions.current
       ) as PositionEntries
 
-      // based on the current x0 and moveX, determine which reaction the
-      // user is interacting with.
+      // Based on the current x0 and moveX, determine which reaction the user
+      // is interacting with. Offset by the distance from the left edge of screen.
       const currentReaction = positionEntries.find(([, { x, width }]) => {
-        const currentPosition = moveX || x0
+        const currentPosition = (moveX || x0) - xOffset.current
         return currentPosition > x && currentPosition <= x + width
       })
 
@@ -118,13 +120,21 @@ export const ReactionList = (props: ReactionListProps) => {
     })
   )
 
+  const handleLayout = useCallback(() => {
+    reactionContainerRef.current?.measure(
+      (x, y, width, height, pageX, pageY) => {
+        xOffset.current = pageX
+      }
+    )
+  }, [])
+
   const handleMeasure: OnMeasure = useCallback((config) => {
     const { x, width, reactionType } = config
     positions.current = { ...positions.current, [reactionType]: { x, width } }
   }, [])
 
   return (
-    <View>
+    <View onLayout={handleLayout} ref={reactionContainerRef}>
       <View style={styles.root} {...panResponder.current.panHandlers}>
         {reactionOrder.map((reactionType) => {
           const Reaction = reactionMap[reactionType]