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
@@ -12,9 +12,6 @@
 
 import {
   clusterEndHeight,
-  inlineEngagementStyle,
-  inlineEngagementLeftStyle,
-  inlineEngagementRightStyle,
   composedMessageStyle,
   avatarOffset,
 } from './chat-constants.js';
@@ -172,24 +169,13 @@
       Object.keys(item.reactions).length > 0
     ) {
       const positioning = isViewer ? 'right' : 'left';
-
-      const inlineEngagementPositionStyle = [];
-      if (positioning === 'left') {
-        inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
-      } else {
-        inlineEngagementPositionStyle.push(styles.rightInlineEngagement);
-      }
-      if (this.props.shouldRenderAvatars) {
-        inlineEngagementPositionStyle.push({ marginLeft: avatarOffset });
-      }
-
       inlineEngagement = (
-        <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
-          <InlineEngagement
-            threadInfo={item.threadCreatedFromMessage}
-            reactions={item.reactions}
-          />
-        </View>
+        <InlineEngagement
+          threadInfo={item.threadCreatedFromMessage}
+          reactions={item.reactions}
+          positioning={positioning}
+          shouldRenderAvatars={shouldRenderAvatars}
+        />
       );
     }
 
@@ -241,18 +227,9 @@
     marginLeft: 2,
     width: 16,
   },
-  inlineEngagement: {
-    marginBottom: inlineEngagementStyle.marginBottom,
-    marginTop: inlineEngagementStyle.marginTop,
-  },
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
-  leftInlineEngagement: {
-    justifyContent: 'flex-start',
-    position: 'relative',
-    top: inlineEngagementLeftStyle.topOffset,
-  },
   messageBoxContainer: {
     flex: 1,
     marginRight: 5,
@@ -260,12 +237,6 @@
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
-  rightInlineEngagement: {
-    alignSelf: 'flex-end',
-    position: 'relative',
-    right: inlineEngagementRightStyle.marginRight,
-    top: inlineEngagementRightStyle.topOffset,
-  },
   swipeableContainer: {
     alignItems: 'flex-end',
     flexDirection: 'row',
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,7 +17,9 @@
   inlineEngagementStyle,
   inlineEngagementCenterStyle,
   inlineEngagementRightStyle,
+  inlineEngagementLeftStyle,
   composedMessageStyle,
+  avatarOffset,
 } from './chat-constants.js';
 import { useNavigateToThread } from './message-list-types.js';
 import CommIcon from '../components/comm-icon.react.js';
@@ -30,9 +32,17 @@
   +threadInfo: ?ThreadInfo,
   +reactions?: ReactionInfo,
   +disabled?: boolean,
+  +positioning?: 'left' | 'right',
+  +shouldRenderAvatars?: boolean,
 };
 function InlineEngagement(props: Props): React.Node {
-  const { disabled = false, reactions, threadInfo } = props;
+  const {
+    disabled = false,
+    reactions,
+    threadInfo,
+    positioning,
+    shouldRenderAvatars,
+  } = props;
   const repliesText = useInlineEngagementText(threadInfo);
 
   const navigateToThread = useNavigateToThread();
@@ -112,10 +122,28 @@
     styles.reactionsContainer,
   ]);
 
+  const container = React.useMemo(() => {
+    return (
+      <View style={styles.container}>
+        {sidebarItem}
+        {reactionList}
+      </View>
+    );
+  }, [reactionList, sidebarItem, styles.container]);
+
+  const inlineEngagementPositionStyle = [];
+  if (positioning === 'left') {
+    inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
+  } else {
+    inlineEngagementPositionStyle.push(styles.rightInlineEngagement);
+  }
+  if (shouldRenderAvatars) {
+    inlineEngagementPositionStyle.push({ marginLeft: avatarOffset });
+  }
+
   return (
-    <View style={styles.container}>
-      {sidebarItem}
-      {reactionList}
+    <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
+      {container}
     </View>
   );
 }
@@ -134,10 +162,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,
@@ -160,6 +205,9 @@
     flexDirection: 'row',
     alignItems: 'center',
   },
+  avatarOffset: {
+    width: avatarOffset,
+  },
 };
 
 type TooltipInlineEngagementProps = {
@@ -192,8 +240,7 @@
       return {
         position: 'absolute',
         top:
-          inlineEngagementStyle.marginTop +
-          inlineEngagementRightStyle.topOffset,
+          inlineEngagementStyle.marginTop + inlineEngagementLeftStyle.topOffset,
         left: composedMessageStyle.marginLeft,
       };
     } else if (positioning === 'right') {