diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -138,7 +138,7 @@ ); let inlineSidebar = null; - if (item.threadCreatedFromMessage) { + if (item.threadCreatedFromMessage || item.reactions) { const positioning = isViewer ? 'right' : 'left'; const inlineSidebarPositionStyle = positioning === 'left' @@ -146,7 +146,10 @@ : styles.rightInlineSidebar; inlineSidebar = ( - + ); } diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js --- a/native/chat/inline-sidebar.react.js +++ b/native/chat/inline-sidebar.react.js @@ -8,6 +8,7 @@ } from 'react-native-reanimated'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; +import type { ReactionMessageInfo } from 'lib/types/message-types'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../components/comm-icon.react'; @@ -24,7 +25,7 @@ type Props = { +threadInfo: ?ThreadInfo, - +reactions?: $ReadOnlyArray, + +reactions?: $ReadOnlyArray, +disabled?: boolean, }; function InlineSidebar(props: Props): React.Node { @@ -44,13 +45,12 @@ if (!reactions || reactions.length === 0) { return null; } - const reactionItems = reactions.map(reaction => { - return ( - - {reaction} - - ); - }); + let reactionText = reactions[0].reaction; + if (reactions.length > 1) { + reactionText += reactions.length; + } + const reactionItems = {reactionText}; + return {reactionItems}; }, [reactions, styles.reaction, styles.reactionsContainer]);