fix: spacing between message in MessageList

examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx

@@ -160,12 +160,11 @@ export const MessageLocation = ({ message }: MessageLocationProps) => {
 const IMAGE_SIZE = 35;
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: {},
   mapView: {
-    height: 250,
-    width: 250,
+    height: 252,
+    width: 252,
+    borderRadius: 12,
   },
   textStyle: {
     fontSize: 12,

package/src/components/Channel/Channel.tsx

@@ -140,6 +140,7 @@ import {
   KeyboardCompatibleViewProps,
 } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
+import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
@@ -148,7 +149,6 @@ import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimpl
 import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
 import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
-import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
 import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';

package/src/components/Message/Message.tsx

@@ -821,7 +821,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       >
         <View
           style={[
-            { marginTop: 2, paddingHorizontal: screenPadding },
+            { paddingHorizontal: screenPadding },
             wrapper,
             (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
               ? {
@@ -969,8 +969,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
-  const groupStylesEqual =
-    prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
+  const groupStylesEqual = prevGroupStyles === nextGroupStyles;
   if (!groupStylesEqual) {
     return false;
   }

package/src/components/Message/MessageSimple/MessagePinnedHeader.tsx → package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import {
   MessageContextValue,
   useMessageContext,
-} from '../../../contexts/messageContext/MessageContext';
-import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { NewPin } from '../../../icons/NewPin';
-import { primitives } from '../../../theme';
+} from '../../../../contexts/messageContext/MessageContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { NewPin } from '../../../../icons/NewPin';
+import { primitives } from '../../../../theme';
 
 export type MessagePinnedHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
 
@@ -30,7 +30,7 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
 
   return (
     <View accessibilityLabel='Message Pinned Header' style={styles.container}>
-      <NewPin height={12} width={12} stroke={semantics.textPrimary} />
+      <NewPin height={16} width={16} stroke={semantics.textPrimary} />
       <Text style={styles.label}>
         {t('Pinned by')}{' '}
         {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
@@ -61,7 +61,7 @@ const useStyles = () => {
       label: {
         color: semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
-        fontWeight: primitives.typographyFontWeightRegular,
+        fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...label,
       },

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

@@ -423,9 +423,7 @@ const areEqual = (
     return false;
   }
 
-  const groupStylesEqual =
-    prevGroupStyles.length === nextGroupStyles.length &&
-    prevGroupStyles?.[0] === nextGroupStyles?.[0];
+  const groupStylesEqual = prevGroupStyles === nextGroupStyles;
   if (!groupStylesEqual) {
     return false;
   }

package/src/components/Message/MessageSimple/MessageDeleted.tsx

@@ -61,7 +61,7 @@ const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
         <CircleBan height={16} width={16} stroke={semantics.textSecondary} />
         <Text style={[styles.deletedText, deletedText]}>{t('Message deleted')}</Text>
       </View>
-      <MessageFooter date={date} isDeleted />
+      <MessageFooter date={date} />
     </View>
   );
 };

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -18,77 +18,37 @@ import {
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Eye } from '../../../icons';
 
 import { primitives } from '../../../theme';
 import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
 
 type MessageFooterComponentProps = {
   date?: string | Date;
   formattedDate?: string | Date;
-  isDeleted?: boolean;
 };
 
 type MessageFooterPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
   | 'members'
   | 'message'
-  | 'otherAttachments'
   | 'showMessageStatus'
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<
-    MessagesContextValue,
-    'deletedMessagesVisibilityType' | 'MessageStatus' | 'MessageTimestamp'
-  > &
+  Pick<MessagesContextValue, 'MessageStatus'> &
   MessageFooterComponentProps;
 
-const OnlyVisibleToYouComponent = ({ alignment }: { alignment: Alignment }) => {
-  const {
-    theme: {
-      colors: { grey_dark },
-      messageSimple: {
-        content: { eyeIcon, metaText },
-      },
-    },
-  } = useTheme();
-  const { t } = useTranslationContext();
-
-  return (
-    <>
-      <Eye pathFill={grey_dark} {...eyeIcon} />
-      <Text
-        style={[
-          {
-            color: grey_dark,
-            textAlign: alignment,
-          },
-          metaText,
-        ]}
-        testID='only-visible-to-you'
-      >
-        {t('Only visible to you')}
-      </Text>
-    </>
-  );
-};
-
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   const {
     alignment,
     date,
-    deletedMessagesVisibilityType,
     formattedDate,
-    isDeleted,
     isMessageAIGenerated,
     lastGroupMessage,
     members,
     message,
     MessageStatus,
-    MessageTimestamp,
-    otherAttachments,
     showMessageStatus,
   } = props;
   const styles = useStyles();
@@ -107,17 +67,6 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     [message, isMessageAIGenerated],
   );
 
-  if (isDeleted) {
-    return (
-      <View style={[styles.container, container]}>
-        {deletedMessagesVisibilityType === 'sender' && (
-          <OnlyVisibleToYouComponent alignment={alignment} />
-        )}
-        <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
-      </View>
-    );
-  }
-
   if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
     return null;
   }
@@ -126,9 +75,6 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
 
   return (
     <View style={[styles.container, container]} testID='message-status-time'>
-      {otherAttachments.length && otherAttachments[0].actions ? (
-        <OnlyVisibleToYouComponent alignment={alignment} />
-      ) : null}
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
         <Text style={[styles.name, name]}>{message.user.name}</Text>
       ) : null}
@@ -149,7 +95,6 @@ const areEqual = (
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
-    otherAttachments: prevOtherAttachments,
     showMessageStatus: prevShowMessageStatus,
   } = prevProps;
   const {
@@ -159,7 +104,6 @@ const areEqual = (
     lastGroupMessage: nextLastGroupMessage,
     members: nextMembers,
     message: nextMessage,
-    otherAttachments: nextOtherAttachments,
     showMessageStatus: nextShowMessageStatus,
   } = nextProps;
 
@@ -178,12 +122,6 @@ const areEqual = (
     return false;
   }
 
-  const deletedMessagesVisibilityTypeEqual =
-    prevProps.deletedMessagesVisibilityType === nextProps.deletedMessagesVisibilityType;
-  if (!deletedMessagesVisibilityTypeEqual) {
-    return false;
-  }
-
   const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
   const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 
@@ -198,13 +136,6 @@ const areEqual = (
     return false;
   }
 
-  const otherAttachmentsEqual =
-    prevOtherAttachments.length === nextOtherAttachments.length &&
-    prevOtherAttachments?.[0]?.actions?.length === nextOtherAttachments?.[0]?.actions?.length;
-  if (!otherAttachmentsEqual) {
-    return false;
-  }
-
   const showMessageStatusEqual = prevShowMessageStatus === nextShowMessageStatus;
   if (!showMessageStatusEqual) {
     return false;
@@ -239,30 +170,21 @@ export type MessageFooterProps = Partial<Pick<ChannelContextValue, 'members'>> &
   };
 
 export const MessageFooter = (props: MessageFooterProps) => {
-  const {
-    alignment,
-    isMessageAIGenerated,
-    lastGroupMessage,
-    members,
-    message,
-    otherAttachments,
-    showMessageStatus,
-  } = useMessageContext();
+  const { alignment, isMessageAIGenerated, lastGroupMessage, members, message, showMessageStatus } =
+    useMessageContext();
 
-  const { deletedMessagesVisibilityType, MessageStatus, MessageTimestamp } = useMessagesContext();
+  const { MessageStatus, MessageTimestamp } = useMessagesContext();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
-        deletedMessagesVisibilityType,
         isMessageAIGenerated,
         lastGroupMessage,
         members,
         message,
         MessageStatus,
         MessageTimestamp,
-        otherAttachments,
         showMessageStatus,
       }}
       {...props}