diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js --- a/native/chat/inline-engagement.react.js +++ b/native/chat/inline-engagement.react.js @@ -12,6 +12,7 @@ import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; import { localIDPrefix } from 'lib/shared/message-utils.js'; +import { useViewerAlreadySelectedMessageReactions } from 'lib/shared/reaction-utils.js'; import type { MessageInfo } from 'lib/types/message-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; @@ -158,6 +159,9 @@ }); }, [navigate, reactions]); + const viewerAlreadySelectedMessageReactions = + useViewerAlreadySelectedMessageReactions(reactions); + const reactionStyle = React.useMemo(() => { const stylesResult = [styles.reactionsContainer]; @@ -182,9 +186,17 @@ return Object.keys(reactions).map(reaction => { const numOfReacts = reactions[reaction].users.length; + + const viewerReacted = + viewerAlreadySelectedMessageReactions.includes(reaction); + + const style = viewerReacted + ? [...reactionStyle, styles.reactionsContainerSelected] + : reactionStyle; + return ( onPressReaction(reaction)} onLongPress={onLongPressReaction} activeOpacity={0.7} @@ -200,6 +212,8 @@ reactionStyle, reactions, styles.reaction, + styles.reactionsContainerSelected, + viewerAlreadySelectedMessageReactions, ]); const inlineEngagementPositionStyle = React.useMemo(() => { @@ -280,6 +294,12 @@ borderRadius: 8, marginTop: inlineEngagementStyle.marginTop, }, + reactionsContainerSelected: { + borderWidth: 1, + borderColor: 'inlineEngagementLabel', + paddingHorizontal: 7, + paddingVertical: 3, + }, reactionsContainerMarginLeft: { marginLeft: 4, },