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
@@ -32,9 +32,10 @@
+reactions?: ReactionInfo,
+disabled?: boolean,
+positioning?: 'left' | 'right',
+ +label?: ?string,
};
function InlineEngagement(props: Props): React.Node {
- const { disabled = false, reactions, threadInfo, positioning } = props;
+ const { disabled = false, reactions, threadInfo, positioning, label } = props;
const repliesText = useInlineEngagementText(threadInfo);
const navigateToThread = useNavigateToThread();
@@ -114,7 +115,24 @@
styles.reactionsContainer,
]);
+ const isLeft = positioning === 'left';
+
+ const editedLabel = React.useMemo(() => {
+ const labelLeftRight = isLeft
+ ? styles.messageLabelLeft
+ : styles.messageLabelRight;
+
+ if (!label) {
+ return null;
+ }
+
+ return {label};
+ }, [isLeft, label, styles]);
+
const container = React.useMemo(() => {
+ if (!(sidebarItem || reactionList)) {
+ return null;
+ }
return (
{sidebarItem}
@@ -128,9 +146,18 @@
? styles.leftInlineEngagement
: styles.rightInlineEngagement;
+ const components = [container];
+ if (isLeft) {
+ components.unshift(editedLabel);
+ } else {
+ components.push(editedLabel);
+ }
+
return (
- {container}
+ {components.map((component, index) => (
+ {component}
+ ))}
);
}
@@ -192,6 +219,19 @@
flexDirection: 'row',
alignItems: 'center',
},
+ messageLabel: {
+ color: 'listBackgroundLabel',
+ paddingHorizontal: 3,
+ top: 10,
+ },
+ messageLabelLeft: {
+ marginLeft: 9,
+ marginRight: 4,
+ },
+ messageLabelRight: {
+ marginRight: 10,
+ marginLeft: 4,
+ },
};
type TooltipInlineEngagementProps = {