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
@@ -138,37 +138,28 @@
return {label};
}, [isLeft, label, styles]);
- const container = React.useMemo(() => {
- if (!sidebarItem && !reactionList) {
- return null;
+ const inlineEngagementPositionStyle = React.useMemo(() => {
+ const styleResult = [styles.inlineEngagement];
+ if (!isLeft) {
+ styleResult.push(styles.rightInlineEngagement);
}
- return (
-
- {sidebarItem}
- {reactionList}
-
- );
- }, [reactionList, sidebarItem, styles.container]);
-
- const inlineEngagementPositionStyle = [styles.inlineEngagement];
- if (isLeft) {
- inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
- } else {
- inlineEngagementPositionStyle.push(styles.rightInlineEngagement);
- }
+ return styleResult;
+ }, [isLeft, styles.inlineEngagement, styles.rightInlineEngagement]);
let body;
if (isLeft) {
body = (
<>
{editedLabel}
- {container}
+ {sidebarItem}
+ {reactionList}
>
);
} else {
body = (
<>
- {container}
+ {sidebarItem}
+ {reactionList}
{editedLabel}
>
);
@@ -182,32 +173,21 @@
flexDirection: 'row',
marginBottom: inlineEngagementStyle.marginBottom,
marginTop: inlineEngagementStyle.marginTop,
- alignItems: 'center',
marginLeft: avatarOffset,
- },
- leftInlineEngagement: {
- justifyContent: 'flex-start',
- position: 'relative',
top: inlineEngagementLeftStyle.topOffset,
},
rightInlineEngagement: {
alignSelf: 'flex-end',
- position: 'relative',
right: inlineEngagementRightStyle.marginRight,
top: inlineEngagementRightStyle.topOffset,
},
- container: {
- flexDirection: 'row',
- height: inlineEngagementStyle.height,
- borderRadius: 16,
- backgroundColor: 'inlineEngagementBackground',
- alignSelf: 'baseline',
- alignItems: 'center',
- padding: 8,
- },
sidebar: {
flexDirection: 'row',
alignItems: 'center',
+ backgroundColor: 'inlineEngagementBackground',
+ paddingHorizontal: 8,
+ paddingVertical: 4,
+ borderRadius: 8,
},
icon: {
color: 'inlineEngagementLabel',
@@ -226,6 +206,10 @@
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
+ backgroundColor: 'inlineEngagementBackground',
+ paddingHorizontal: 8,
+ paddingVertical: 4,
+ borderRadius: 8,
},
reaction: {
color: 'inlineEngagementLabel',