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 @@ -83,6 +83,28 @@ const repliesText = useInlineEngagementText(sidebarInfo); + const sidebarStyle = React.useMemo(() => { + const stylesResult = [styles.sidebar]; + + if (!reactions || Object.keys(reactions).length === 0) { + return stylesResult; + } + + if (isRight) { + stylesResult.push(styles.sidebarMarginLeft); + } else { + stylesResult.push(styles.sidebarMarginRight); + } + + return stylesResult; + }, [ + isRight, + reactions, + styles.sidebar, + styles.sidebarMarginLeft, + styles.sidebarMarginRight, + ]); + const sidebarItem = React.useMemo(() => { if (!sidebarInfo) { return null; @@ -91,7 +113,7 @@ {repliesText} @@ -100,7 +122,7 @@ }, [ sidebarInfo, onPressSidebar, - styles.sidebar, + sidebarStyle, styles.icon, repliesStyles, repliesText, @@ -113,6 +135,23 @@ }); }, [navigate, reactions]); + const reactionStyle = React.useMemo(() => { + const style = [styles.reactionsContainer]; + + if (isRight) { + style.push(styles.reactionsContainerMarginLeft); + } else { + style.push(styles.reactionsContainerMarginRight); + } + + return style; + }, [ + isRight, + styles.reactionsContainer, + styles.reactionsContainerMarginLeft, + styles.reactionsContainerMarginRight, + ]); + const reactionList = React.useMemo(() => { if (!reactions || Object.keys(reactions).length === 0) { return null; @@ -122,7 +161,7 @@ const numOfReacts = reactions[reaction].users.length; return ( ); }); - }, [onPressReactions, reactions, styles.reaction, styles.reactionsContainer]); + }, [onPressReactions, reactionStyle, reactions, styles.reaction]); const inlineEngagementPositionStyle = React.useMemo(() => { const styleResult = [styles.inlineEngagement]; @@ -182,6 +221,12 @@ borderRadius: 8, marginTop: inlineEngagementStyle.marginTop, }, + sidebarMarginLeft: { + marginLeft: 4, + }, + sidebarMarginRight: { + marginRight: 4, + }, icon: { color: 'inlineEngagementLabel', marginRight: 4, @@ -205,6 +250,12 @@ borderRadius: 8, marginTop: inlineEngagementStyle.marginTop, }, + reactionsContainerMarginLeft: { + marginLeft: 4, + }, + reactionsContainerMarginRight: { + marginRight: 4, + }, reaction: { color: 'inlineEngagementLabel', fontSize: 14,