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.size > 0) { 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,8 @@ } from 'react-native-reanimated'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; +import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; +import { stringForReactionList } from 'lib/shared/reaction-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../components/comm-icon.react'; @@ -24,7 +26,7 @@ type Props = { +threadInfo: ?ThreadInfo, - +reactions?: $ReadOnlyArray, + +reactions?: $ReadOnlyMap, +disabled?: boolean, }; function InlineSidebar(props: Props): React.Node { @@ -41,16 +43,13 @@ const styles = useStyles(unboundStyles); const reactionList = React.useMemo(() => { - if (!reactions || reactions.length === 0) { + if (!reactions || reactions.size === 0) { return null; } - const reactionItems = reactions.map(reaction => { - return ( - - {reaction} - - ); - }); + + const reactionText = stringForReactionList(reactions); + const reactionItems = {reactionText}; + return {reactionItems}; }, [reactions, styles.reaction, styles.reactionsContainer]); diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -53,10 +53,13 @@ const styles = useStyles(unboundStyles); let inlineSidebar = null; - if (item.threadCreatedFromMessage) { + if (item.threadCreatedFromMessage || item.reactions.size > 0) { inlineSidebar = ( - + ); }