diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index d8ffa2debf..b1c288de78 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -1,4 +1,4 @@ -import {memo, useCallback, useEffect, useMemo} from 'react' +import {memo, useCallback, useEffect, useMemo, useRef} from 'react' import { type GestureResponderEvent, LayoutAnimation, @@ -106,6 +106,7 @@ let MessageItem = ({ const queryClient = useQueryClient() const reactionsControl = useDialogControl() + const reactionTapRef = useRef(false) const {message, nextMessage, prevMessage} = item const isPending = item.type === 'pending-message' @@ -328,6 +329,16 @@ let MessageItem = ({ transform: [{translateY: -8}], }, ]} + onPressIn={() => { + // Don't toggle the date divider when tapping a reaction. + reactionTapRef.current = true + }} + onPressOut={() => { + // Include a delay here to account for tap-and-drag before release. + setTimeout(() => { + reactionTapRef.current = false + }, 100) + }} onPress={() => (isGroupChat ? reactionsControl.open() : undefined)}> {groupedReactions.map(group => ( { + if (reactionTapRef.current) return if (!hasLargeGapFromPrev) { LayoutAnimation.configureNext( LayoutAnimation.Presets.easeInEaseOut,