diff --git a/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx b/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx index bcd513929bf..9c0f1eea728 100644 --- a/packages/mobile/src/screens/notifications-screen/Reaction/ReactionList.tsx +++ b/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(null) const positions = useRef(initialPositions) + const xOffset = useRef(0) + const reactionContainerRef = useRef(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 ( - + {reactionOrder.map((reactionType) => { const Reaction = reactionMap[reactionType]