diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js
--- a/native/chat/chat-constants.js
+++ b/native/chat/chat-constants.js
@@ -9,18 +9,16 @@
   height: 38,
   marginTop: 5,
   marginBottom: 3,
-};
-export const inlineEngagementLeftStyle = {
   topOffset: -10,
 };
 
 export const inlineEngagementCenterStyle = {
   topOffset: -5,
+  marginRight: 22,
 };
 
 export const inlineEngagementRightStyle = {
-  marginRight: 22,
-  topOffset: -10,
+  marginLeft: 22,
 };
 
 export const inlineEngagementLabelStyle = {
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
@@ -11,7 +11,6 @@
 
 import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
-import { stringForReactionList } from 'lib/shared/reaction-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import {
@@ -19,7 +18,6 @@
   inlineEngagementStyle,
   inlineEngagementCenterStyle,
   inlineEngagementRightStyle,
-  inlineEngagementLeftStyle,
   composedMessageStyle,
   avatarOffset,
 } from './chat-constants.js';
@@ -34,7 +32,7 @@
   +sidebarInfo: ?ThreadInfo,
   +reactions?: ReactionInfo,
   +disabled?: boolean,
-  +positioning?: 'left' | 'right',
+  +positioning?: 'left' | 'right' | 'center',
   +label?: ?string,
 };
 function InlineEngagement(props: Props): React.Node {
@@ -45,13 +43,32 @@
     positioning,
     label,
   } = props;
-  const repliesText = useInlineEngagementText(sidebarInfo);
+
+  const isLeft = positioning === 'left';
+  const isRight = positioning === 'right';
+  const isCenter = positioning === 'center';
 
   const navigateToThread = useNavigateToThread();
   const { navigate } = useNavigation();
 
   const styles = useStyles(unboundStyles);
 
+  const editedLabel = React.useMemo(() => {
+    if (!label) {
+      return null;
+    }
+
+    const labelLeftRight = isLeft
+      ? styles.messageLabelLeft
+      : styles.messageLabelRight;
+
+    return (
+      <View>
+        <Text style={[styles.messageLabel, labelLeftRight]}>{label}</Text>
+      </View>
+    );
+  }, [isLeft, label, styles]);
+
   const unreadStyle = sidebarInfo?.currentUser.unread ? styles.unread : null;
   const repliesStyles = React.useMemo(
     () => [styles.repliesText, unreadStyle],
@@ -64,6 +81,8 @@
     }
   }, [disabled, navigateToThread, sidebarInfo]);
 
+  const repliesText = useInlineEngagementText(sidebarInfo);
+
   const sidebarItem = React.useMemo(() => {
     if (!sidebarInfo) {
       return null;
@@ -94,91 +113,65 @@
     });
   }, [navigate, reactions]);
 
-  const marginLeft = React.useMemo(
-    () => (sidebarItem ? styles.reactionMarginLeft : null),
-    [sidebarItem, styles.reactionMarginLeft],
-  );
-
   const reactionList = React.useMemo(() => {
     if (!reactions || Object.keys(reactions).length === 0) {
       return null;
     }
 
-    const reactionText = stringForReactionList(reactions);
-    const reactionItems = <Text style={styles.reaction}>{reactionText}</Text>;
-
-    return (
-      <GestureTouchableOpacity
-        style={[styles.reactionsContainer, marginLeft]}
-        onPress={onPressReactions}
-        activeOpacity={0.7}
-      >
-        {reactionItems}
-      </GestureTouchableOpacity>
-    );
-  }, [
-    marginLeft,
-    onPressReactions,
-    reactions,
-    styles.reaction,
-    styles.reactionsContainer,
-  ]);
-
-  const isLeft = positioning === 'left';
-
-  const editedLabel = React.useMemo(() => {
-    if (!label) {
-      return null;
-    }
-
-    const labelLeftRight = isLeft
-      ? styles.messageLabelLeft
-      : styles.messageLabelRight;
-
-    return <Text style={[styles.messageLabel, labelLeftRight]}>{label}</Text>;
-  }, [isLeft, label, styles]);
+    return Object.keys(reactions).map(reaction => {
+      const numOfReacts = reactions[reaction].users.length;
+      return (
+        <GestureTouchableOpacity
+          style={styles.reactionsContainer}
+          onPress={onPressReactions}
+          activeOpacity={0.7}
+          key={reaction}
+        >
+          <Text style={styles.reaction}>{`${reaction} ${numOfReacts}`}</Text>
+        </GestureTouchableOpacity>
+      );
+    });
+  }, [onPressReactions, reactions, styles.reaction, styles.reactionsContainer]);
 
   const inlineEngagementPositionStyle = React.useMemo(() => {
     const styleResult = [styles.inlineEngagement];
-    if (!isLeft) {
+    if (isRight) {
       styleResult.push(styles.rightInlineEngagement);
+    } else if (isCenter) {
+      styleResult.push(styles.centerInlineEngagement);
     }
     return styleResult;
-  }, [isLeft, styles.inlineEngagement, styles.rightInlineEngagement]);
-
-  let body;
-  if (isLeft) {
-    body = (
-      <>
-        {editedLabel}
-        {sidebarItem}
-        {reactionList}
-      </>
-    );
-  } else {
-    body = (
-      <>
-        {sidebarItem}
-        {reactionList}
-        {editedLabel}
-      </>
-    );
-  }
+  }, [
+    isCenter,
+    isRight,
+    styles.centerInlineEngagement,
+    styles.inlineEngagement,
+    styles.rightInlineEngagement,
+  ]);
 
-  return <View style={inlineEngagementPositionStyle}>{body}</View>;
+  return (
+    <View style={inlineEngagementPositionStyle}>
+      {editedLabel}
+      {sidebarItem}
+      {reactionList}
+    </View>
+  );
 }
 
 const unboundStyles = {
   inlineEngagement: {
     flexDirection: 'row',
     marginBottom: inlineEngagementStyle.marginBottom,
-    marginTop: inlineEngagementStyle.marginTop,
     marginLeft: avatarOffset,
-    top: inlineEngagementLeftStyle.topOffset,
+    flexWrap: 'wrap',
+    top: inlineEngagementStyle.topOffset,
+  },
+  centerInlineEngagement: {
+    right: inlineEngagementCenterStyle.marginRight,
   },
   rightInlineEngagement: {
-    alignSelf: 'flex-end',
-    right: inlineEngagementRightStyle.marginRight,
+    flexDirection: 'row-reverse',
+    marginLeft: inlineEngagementRightStyle.marginLeft,
   },
   sidebar: {
     flexDirection: 'row',
@@ -187,6 +180,7 @@
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 8,
+    marginTop: inlineEngagementStyle.marginTop,
   },
   icon: {
     color: 'inlineEngagementLabel',
@@ -209,21 +203,20 @@
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 8,
+    marginTop: inlineEngagementStyle.marginTop,
   },
   reaction: {
     color: 'inlineEngagementLabel',
     fontSize: 14,
     lineHeight: 22,
   },
-  reactionMarginLeft: {
-    marginLeft: 12,
-  },
   messageLabel: {
     color: 'messageLabel',
     paddingHorizontal: 3,
     fontSize: 13,
     top: inlineEngagementLabelStyle.topOffset,
     height: inlineEngagementLabelStyle.height,
+    marginTop: inlineEngagementStyle.marginTop,
   },
   messageLabelLeft: {
     marginLeft: 9,
@@ -269,19 +262,16 @@
     if (positioning === 'left') {
       return {
         position: 'absolute',
-        top:
-          inlineEngagementStyle.marginTop + inlineEngagementLeftStyle.topOffset,
+        top: inlineEngagementStyle.marginTop + inlineEngagementStyle.topOffset,
         left: composedMessageStyle.marginLeft,
       };
     } else if (positioning === 'right') {
       return {
         position: 'absolute',
         right:
-          inlineEngagementRightStyle.marginRight +
+          inlineEngagementRightStyle.marginLeft +
           composedMessageStyle.marginRight,
-        top:
-          inlineEngagementStyle.marginTop +
-          inlineEngagementRightStyle.topOffset,
+        top: inlineEngagementStyle.marginTop + inlineEngagementStyle.topOffset,
       };
     } else if (positioning === 'center') {
       return {
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
@@ -68,6 +68,7 @@
         <InlineEngagement
           sidebarInfo={item.threadCreatedFromMessage}
           reactions={item.reactions}
+          positioning="center"
         />
       </View>
     );