DMAPP-136: Fix chat UI issue in group chat

- Resolve issue where profile icon and wallet address were appearing inside the message bubble in group chats.
push-protocol · Nov 29, 2024 · 98af9ab · 98af9ab
1 parent 1fb1158
commit 98af9ab
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/navigation/screens/chats/components/MessageComponent.tsx b/src/navigation/screens/chats/components/MessageComponent.tsx
@@ -113,6 +113,15 @@ const MessageComponent = React.memo(
             componentType={componentType}
           />
 
+          {isGroupMessage && componentType === 'RECEIVER' && (
+            <ProfilePicture address={caip10ToWallet(fromDID)} />
+          )}
+          {isGroupMessage && componentType === 'RECEIVER' && (
+            <Text style={messageStyle.groupAddress}>
+              {getTrimmedAddress(caip10ToWallet(fromDID))}
+            </Text>
+          )}
+
           {/* Render the message content */}
           <Swipeable
             containerStyle={styles.bubbleAlignment}
@@ -156,17 +165,8 @@ const MessageComponent = React.memo(
                   />
                 )}
 
-                {isGroupMessage && componentType === 'RECEIVER' && (
-                  <ProfilePicture address={caip10ToWallet(fromDID)} />
-                )}
-
                 {/* Render the main message content */}
                 <View>
-                  {isGroupMessage && componentType === 'RECEIVER' && (
-                    <Text style={messageStyle.groupAddress}>
-                      {getTrimmedAddress(caip10ToWallet(fromDID))}
-                    </Text>
-                  )}
                   {(messageType === 'GIF' || messageType === 'MediaEmbed') && (
                     <ImageMessage imageSource={messageContent} time={time} />
                   )}