fix: make sure leading and trailing views respect message alignment

Author: isekovanic

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -57,6 +57,7 @@ const useReplyStyles = () => {
 
 export type MessageContentPropsWithContext = Pick<
   MessageContextValue,
+  | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
   | 'isMyMessage'
@@ -121,6 +122,7 @@ export type MessageContentPropsWithContext = Pick<
 const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
+    alignment,
     Attachment,
     backgroundColor,
     enableMessageGroupingByUser,
@@ -371,7 +373,13 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         >
           {MessageContentTopView ? <MessageContentTopView /> : null}
           {hasContentSideViews ? (
-            <View style={styles.contentRow}>
+            <View
+              style={[
+                styles.contentRow,
+                alignment === 'right' ? styles.rightAlignContentRow : undefined,
+              ]}
+              testID='message-content-row'
+            >
               {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
               <View style={styles.contentBody}>{contentBody}</View>
               {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
@@ -391,6 +399,7 @@ const areEqual = (
   nextProps: MessageContentPropsWithContext,
 ) => {
   const {
+    alignment: prevAlignment,
     backgroundColor: prevBackgroundColor,
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
@@ -403,6 +412,7 @@ const areEqual = (
     t: prevT,
   } = prevProps;
   const {
+    alignment: nextAlignment,
     backgroundColor: nextBackgroundColor,
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
@@ -418,6 +428,10 @@ const areEqual = (
     return false;
   }
 
+  if (prevAlignment !== nextAlignment) {
+    return false;
+  }
+
   if (prevPreventPress !== nextPreventPress) {
     return false;
   }
@@ -547,6 +561,7 @@ export type MessageContentProps = Partial<
  */
 export const MessageContent = (props: MessageContentProps) => {
   const {
+    alignment,
     goToMessage,
     groupStyles,
     isMessageAIGenerated,
@@ -617,6 +632,7 @@ export const MessageContent = (props: MessageContentProps) => {
     <MemoizedMessageContent
       {...{
         additionalPressableProps,
+        alignment,
         Attachment,
         enableMessageGroupingByUser,
         FileAttachmentGroup,
@@ -668,6 +684,9 @@ const styles = StyleSheet.create({
   contentRow: {
     flexDirection: 'row',
   },
+  rightAlignContentRow: {
+    flexDirection: 'row-reverse',
+  },
   leftAlignContent: {
     justifyContent: 'flex-start',
   },

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -199,6 +199,56 @@ describe('MessageContent', () => {
     });
   });
 
+  it('orders leading and trailing content views based on alignment', async () => {
+    const otherUser = generateUser({ id: 'other-user' });
+    const leftAlignedMessage = generateMessage({ user: otherUser });
+    const rightAlignedMessage = generateMessage({ user });
+
+    const { rerender } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={leftAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    let contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row');
+
+    rerender(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={rightAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row-reverse');
+  });
+
   it('renders a time component when MessageFooter does not exist', async () => {
     const user = generateUser();
     const message = generateMessage({ user });