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
@@ -9,13 +9,7 @@
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 
-import {
-  clusterEndHeight,
-  inlineEngagementStyle,
-  inlineEngagementLeftStyle,
-  inlineEngagementRightStyle,
-  composedMessageStyle,
-} from './chat-constants.js';
+import { clusterEndHeight, composedMessageStyle } from './chat-constants.js';
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { FailedSend } from './failed-send.react.js';
 import { InlineEngagement } from './inline-engagement.react.js';
@@ -143,17 +137,12 @@
       Object.keys(item.reactions).length > 0
     ) {
       const positioning = isViewer ? 'right' : 'left';
-      const inlineEngagementPositionStyle =
-        positioning === 'left'
-          ? styles.leftInlineEngagement
-          : styles.rightInlineEngagement;
       inlineEngagement = (
-        <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
-          <InlineEngagement
-            threadInfo={item.threadCreatedFromMessage}
-            reactions={item.reactions}
-          />
-        </View>
+        <InlineEngagement
+          threadInfo={item.threadCreatedFromMessage}
+          reactions={item.reactions}
+          positioning={positioning}
+        />
       );
     }
 
@@ -199,30 +188,15 @@
     marginLeft: 2,
     width: 16,
   },
-  inlineEngagement: {
-    marginBottom: inlineEngagementStyle.marginBottom,
-    marginTop: inlineEngagementStyle.marginTop,
-  },
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
-  leftInlineEngagement: {
-    justifyContent: 'flex-start',
-    position: 'relative',
-    top: inlineEngagementLeftStyle.topOffset,
-  },
   messageBox: {
     marginRight: 5,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
-  rightInlineEngagement: {
-    alignSelf: 'flex-end',
-    position: 'relative',
-    right: inlineEngagementRightStyle.marginRight,
-    top: inlineEngagementRightStyle.topOffset,
-  },
 });
 
 const ConnectedComposedMessage: React.ComponentType<BaseProps> =
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
@@ -17,6 +17,7 @@
   inlineEngagementStyle,
   inlineEngagementCenterStyle,
   inlineEngagementRightStyle,
+  inlineEngagementLeftStyle,
   composedMessageStyle,
 } from './chat-constants.js';
 import { useNavigateToThread } from './message-list-types.js';
@@ -30,9 +31,10 @@
   +threadInfo: ?ThreadInfo,
   +reactions?: ReactionInfo,
   +disabled?: boolean,
+  +positioning?: 'left' | 'right',
 };
 function InlineEngagement(props: Props): React.Node {
-  const { disabled = false, reactions, threadInfo } = props;
+  const { disabled = false, reactions, threadInfo, positioning } = props;
   const repliesText = useInlineEngagementText(threadInfo);
 
   const navigateToThread = useNavigateToThread();
@@ -112,10 +114,23 @@
     styles.reactionsContainer,
   ]);
 
+  const container = React.useMemo(() => {
+    return (
+      <View style={styles.container}>
+        {sidebarItem}
+        {reactionList}
+      </View>
+    );
+  }, [reactionList, sidebarItem, styles.container]);
+
+  const inlineEngagementPositionStyle =
+    positioning === 'left'
+      ? styles.leftInlineEngagement
+      : styles.rightInlineEngagement;
+
   return (
-    <View style={styles.container}>
-      {sidebarItem}
-      {reactionList}
+    <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
+      {container}
     </View>
   );
 }
@@ -134,10 +149,27 @@
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
+  rightInlineEngagement: {
+    alignSelf: 'flex-end',
+    position: 'relative',
+    right: inlineEngagementRightStyle.marginRight,
+    top: inlineEngagementRightStyle.topOffset,
+  },
+  leftInlineEngagement: {
+    justifyContent: 'flex-start',
+    position: 'relative',
+    top: inlineEngagementLeftStyle.topOffset,
+  },
   sidebar: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  inlineEngagement: {
+    flexDirection: 'row',
+    marginBottom: inlineEngagementStyle.marginBottom,
+    marginTop: inlineEngagementStyle.marginTop,
+    alignItems: 'center',
+  },
   icon: {
     color: 'inlineEngagementLabel',
     marginRight: 4,
@@ -192,8 +224,7 @@
       return {
         position: 'absolute',
         top:
-          inlineEngagementStyle.marginTop +
-          inlineEngagementRightStyle.topOffset,
+          inlineEngagementStyle.marginTop + inlineEngagementLeftStyle.topOffset,
         left: composedMessageStyle.marginLeft,
       };
     } else if (positioning === 'right') {