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]);