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',