stream-chat-react-native-core 5.28.0-beta.2 → 5.28.0-beta.4

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -76,7 +76,7 @@ const MessageFooterWithContext = <
 
   if (isDeleted) {
     return (
-      <View style={metaContainer} testID='message-deleted'>
+      <View style={[styles.container, metaContainer]} testID='message-deleted'>
         {deletedMessagesVisibilityType === 'sender' && (
           <>
             <Eye pathFill={grey_dark} {...eyeIcon} />
@@ -115,7 +115,7 @@ const MessageFooterWithContext = <
   }
 
   return (
-    <View style={metaContainer} testID='message-status-time'>
+    <View style={[styles.container, metaContainer]} testID='message-status-time'>
       {otherAttachments.length && otherAttachments[0].actions ? (
         <>
           <Eye pathFill={grey_dark} {...eyeIcon} />
@@ -249,3 +249,10 @@ export const MessageFooter = <
     />
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: 4,
+  },
+});

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

@@ -14,9 +14,6 @@ const styles = StyleSheet.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    marginBottom: 8,
-    marginLeft: 30,
-    marginTop: 5,
   },
   label: {},
 });

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

@@ -18,6 +18,13 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     flexDirection: 'row',
   },
+  lastMessageContainer: {
+    marginBottom: 12,
+  },
+  messageGroupedSingleOrBottomContainer: {
+    marginBottom: 8,
+  },
+  messageGroupedTopContainer: {},
 });
 
 export type MessageSimplePropsWithContext<
@@ -32,7 +39,6 @@ export type MessageSimplePropsWithContext<
     | 'myMessageTheme'
     | 'MessageAvatar'
     | 'MessageContent'
-    | 'MessagePinnedHeader'
     | 'ReactionList'
   >;
 
@@ -50,13 +56,17 @@ const MessageSimpleWithContext = <
     message,
     MessageAvatar,
     MessageContent,
-    MessagePinnedHeader,
     ReactionList,
   } = props;
 
   const {
     theme: {
-      messageSimple: { container },
+      messageSimple: {
+        container,
+        lastMessageContainer,
+        messageGroupedSingleOrBottomContainer,
+        messageGroupedTopContainer,
+      },
     },
   } = useTheme();
 
@@ -65,23 +75,30 @@ const MessageSimpleWithContext = <
   const isVeryLastMessage =
     channel?.state.messages[channel?.state.messages.length - 1]?.id === message.id;
 
-  const hasMarginBottom = groupStyles.includes('single') || groupStyles.includes('bottom');
+  const messageGroupedSingleOrBottom =
+    groupStyles.includes('single') || groupStyles.includes('bottom');
 
   const showReactions = hasReactions && ReactionList;
 
+  const lastMessageInMessageListStyles = [styles.lastMessageContainer, lastMessageContainer];
+  const messageGroupedSingleOrBottomStyles = [
+    styles.messageGroupedSingleOrBottomContainer,
+    messageGroupedSingleOrBottomContainer,
+  ];
+  const messageGroupedTopStyles = [styles.messageGroupedTopContainer, messageGroupedTopContainer];
+
   return (
     <>
-      {message.pinned && <MessagePinnedHeader />}
       <View
         style={[
           styles.container,
+          messageGroupedSingleOrBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? lastMessageInMessageListStyles
+              : messageGroupedSingleOrBottomStyles
+            : messageGroupedTopStyles,
           {
             justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-            marginBottom: hasMarginBottom
-              ? isVeryLastMessage && enableMessageGroupingByUser
-                ? 30
-                : 8
-              : 0,
             marginTop: showReactions ? 2 : 0,
           },
           container,
@@ -136,8 +153,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.text === nextMessage.text;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -208,7 +224,6 @@ export const MessageSimple = <
     enableMessageGroupingByUser,
     MessageAvatar,
     MessageContent,
-    MessagePinnedHeader,
     myMessageTheme,
     ReactionList,
   } = useMessagesContext<StreamChatGenerics>();
@@ -225,7 +240,6 @@ export const MessageSimple = <
         message,
         MessageAvatar,
         MessageContent,
-        MessagePinnedHeader,
         myMessageTheme,
         ReactionList,
       }}

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -7,9 +7,6 @@ exports[`MessagePinnedHeader should render message pinned 1`] = `
       {
         "display": "flex",
         "flexDirection": "row",
-        "marginBottom": 8,
-        "marginLeft": 30,
-        "marginTop": 5,
       },
       {
         "justifyContent": "flex-start",

package/src/components/MessageInput/hooks/useCountdown.ts

@@ -15,7 +15,7 @@ export const useCountdown = (end: Date) => {
    * the `end` is in the future.
    **/
   useEffect(() => {
-    let intervalId: NodeJS.Timeout;
+    let intervalId: ReturnType<typeof setInterval>;
 
     const startCountdown = (seconds: number) => {
       setSeconds(seconds);

package/src/components/MessageList/MessageList.tsx

@@ -352,17 +352,17 @@ const MessageListWithContext = <
   /**
    * The timeout id used to debounce our scrollToIndex calls on messageList updates
    */
-  const scrollToDebounceTimeoutRef = useRef<NodeJS.Timeout>();
+  const scrollToDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * The timeout id used to lazier load the initial scroll set flag
    */
-  const initialScrollSettingTimeoutRef = useRef<NodeJS.Timeout>();
+  const initialScrollSettingTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * The timeout id used to temporarily load the initial scroll set flag
    */
-  const onScrollEventTimeoutRef = useRef<NodeJS.Timeout>();
+  const onScrollEventTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * Last messageID that was scrolled to after loading a new message list,
@@ -861,7 +861,7 @@ const MessageListWithContext = <
   };
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
-  const failScrollTimeoutId = useRef<NodeJS.Timeout>();
+  const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>();
   const onScrollToIndexFailedRef = useRef<
     FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
   >((info) => {

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -277,9 +277,14 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                           },
+                          [
+                            {
+                              "marginBottom": 8,
+                            },
+                            {},
+                          ],
                           {
                             "justifyContent": "flex-start",
-                            "marginBottom": 8,
                             "marginTop": 0,
                           },
                           {},
@@ -459,10 +464,13 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                         <View
                           style={
-                            {
-                              "flexDirection": "row",
-                              "marginTop": 4,
-                            }
+                            [
+                              {
+                                "flexDirection": "row",
+                                "marginTop": 4,
+                              },
+                              {},
+                            ]
                           }
                           testID="message-status-time"
                         >
@@ -547,9 +555,14 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                           },
+                          [
+                            {
+                              "marginBottom": 8,
+                            },
+                            {},
+                          ],
                           {
                             "justifyContent": "flex-start",
-                            "marginBottom": 8,
                             "marginTop": 0,
                           },
                           {},
@@ -729,10 +742,13 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                         <View
                           style={
-                            {
-                              "flexDirection": "row",
-                              "marginTop": 4,
-                            }
+                            [
+                              {
+                                "flexDirection": "row",
+                                "marginTop": 4,
+                              },
+                              {},
+                            ]
                           }
                           testID="message-status-time"
                         >
@@ -817,9 +833,14 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                           },
+                          [
+                            {
+                              "marginBottom": 8,
+                            },
+                            {},
+                          ],
                           {
                             "justifyContent": "flex-start",
-                            "marginBottom": 8,
                             "marginTop": 0,
                           },
                           {},
@@ -999,10 +1020,13 @@ exports[`Thread should match thread snapshot 1`] = `
                         </View>
                         <View
                           style={
-                            {
-                              "flexDirection": "row",
-                              "marginTop": 4,
-                            }
+                            [
+                              {
+                                "flexDirection": "row",
+                                "marginTop": 4,
+                              },
+                              {},
+                            ]
                           }
                           testID="message-status-time"
                         >
@@ -1127,9 +1151,14 @@ exports[`Thread should match thread snapshot 1`] = `
                                 "alignItems": "flex-end",
                                 "flexDirection": "row",
                               },
+                              [
+                                {
+                                  "marginBottom": 12,
+                                },
+                                {},
+                              ],
                               {
                                 "justifyContent": "flex-start",
-                                "marginBottom": 30,
                                 "marginTop": 0,
                               },
                               {},
@@ -1309,10 +1338,13 @@ exports[`Thread should match thread snapshot 1`] = `
                             </View>
                             <View
                               style={
-                                {
-                                  "flexDirection": "row",
-                                  "marginTop": 4,
-                                }
+                                [
+                                  {
+                                    "flexDirection": "row",
+                                    "marginTop": 4,
+                                  },
+                                  {},
+                                ]
                               }
                               testID="message-status-time"
                             >

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -63,7 +63,7 @@ export const OverlayProvider = <
 >(
   props: PropsWithChildren<OverlayProviderProps<StreamChatGenerics>>,
 ) => {
-  const bottomSheetCloseTimeoutRef = useRef<NodeJS.Timeout>();
+  const bottomSheetCloseTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const {
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
     attachmentPickerBottomSheetHandleHeight,

package/src/contexts/themeContext/utils/theme.ts

@@ -470,10 +470,13 @@ export type Theme = {
       shuffle: TextStyle;
       title: TextStyle;
     };
+    lastMessageContainer: ViewStyle;
     loadingIndicator: {
       container: ViewStyle;
       roundedView: ViewStyle;
     };
+    messageGroupedSingleOrBottomContainer: ViewStyle;
+    messageGroupedTopContainer: ViewStyle;
     pinnedHeader: {
       container: ViewStyle;
       label: TextStyle;
@@ -957,10 +960,7 @@ export const defaultTheme: Theme = {
         fontWeight: '700',
         paddingRight: 6,
       },
-      metaContainer: {
-        flexDirection: 'row',
-        marginTop: 4,
-      },
+      metaContainer: {},
       metaText: {
         fontSize: 12,
       },
@@ -1012,10 +1012,13 @@ export const defaultTheme: Theme = {
       shuffle: {},
       title: {},
     },
+    lastMessageContainer: {},
     loadingIndicator: {
       container: {},
       roundedView: {},
     },
+    messageGroupedSingleOrBottomContainer: {},
+    messageGroupedTopContainer: {},
     pinnedHeader: {
       container: {},
       label: {},

package/src/i18n/es.json

@@ -1,9 +1,9 @@
 {
-  "1 Reply": "1 respuesta",
+  "1 Reply": "",
   "1 Thread Reply": "1 respuesta de hilo",
   "Allow access to your Gallery": "",
   "Allow camera access in device settings": "",
-  "Also send to channel": "También enviar al canal",
+  "Also send to channel": "",
   "Are you sure you want to permanently delete this message?": "",
   "Are you sure?": "",
   "Block User": "",
@@ -16,50 +16,50 @@
   "Device camera is used to take photos or videos.": "",
   "Do you want to send a copy of this message to a moderator for further investigation?": "",
   "Edit Message": "",
-  "Editing Message": "",
+  "Editing Message": "Editando mensaje",
   "Emoji matching": "",
-  "Empty message...": "Mensaje vacío...",
-  "Error loading": "Error al cargar",
-  "Error loading channel list...": "Error al cargar la lista de canales...",
-  "Error loading messages for this channel...": "Error al cargar los mensajes de este canal...",
-  "Error while loading, please reload/refresh": "Error al cargar, por favor recarga/actualiza",
+  "Empty message...": "",
+  "Error loading": "",
+  "Error loading channel list...": "",
+  "Error loading messages for this channel...": "",
+  "Error while loading, please reload/refresh": "",
   "File type not supported": "",
   "Flag": "",
   "Flag Message": "",
   "Flag action failed either due to a network issue or the message is already flagged": "",
-  "How about sending your first message to a friend?": "¿Qué tal enviar tu primer mensaje a un amigo?",
+  "How about sending your first message to a friend?": "",
   "Instant Commands": "",
-  "Let's start chatting!": "¡Empecemos a charlar!",
-  "Links are disabled": "Los enlaces están desactivados",
+  "Let's start chatting!": "",
+  "Links are disabled": "",
   "Loading channels...": "",
   "Loading messages...": "",
   "Loading...": "",
-  "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "El archivo supera el tamaño máximo permitido. Por favor, selecciona un archivo menor a {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.",
+  "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
   "Message Reactions": "",
   "Message deleted": "Mensaje eliminado",
   "Message flagged": "",
   "Mute User": "",
   "Not supported": "",
-  "Nothing yet...": "Aún no hay nada...",
+  "Nothing yet...": "",
   "Ok": "",
-  "Only visible to you": "Solo visible para ti",
+  "Only visible to you": "",
   "Open Settings": "",
   "Photo": "Foto",
   "Photos and Videos": "",
   "Pin to Conversation": "",
-  "Pinned by": "Fijado por",
+  "Pinned by": "",
   "Please enable access to your photos and videos so you can share them.": "",
   "Please select a channel first": "",
   "Reconnecting...": "Reconectando...",
   "Reply": "",
   "Reply to Message": "Responder al mensaje",
   "Resend": "",
-  "Search GIFs": "Buscar GIFs",
+  "Search GIFs": "",
   "Select More Photos": "",
   "Send Anyway": "",
-  "Send a message": "Enviar un mensaje",
-  "Sending links is not allowed in this conversation": "No está permitido enviar enlaces en esta conversación",
-  "Slow mode ON": "Modo lento ACTIVADO",
+  "Send a message": "",
+  "Sending links is not allowed in this conversation": "",
+  "Slow mode ON": "",
   "The message has been reported to a moderator.": "",
   "Thread Reply": "",
   "Unblock User": "",
@@ -68,12 +68,12 @@
   "Unpin from Conversation": "",
   "Unread Messages": "Mensajes no leídos",
   "Video": "Video",
-  "You": "Tú",
+  "You": "",
   "You can't send messages in this channel": "",
-  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} y {{ nonSelfUserLength }} más están escribiendo",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
   "{{ index }} of {{ photoLength }}": "",
-  "{{ replyCount }} Replies": "{{ replyCount }} Respuestas",
+  "{{ replyCount }} Replies": "",
   "{{ replyCount }} Thread Replies": "{{ replyCount }} respuestas de hilo",
-  "{{ user }} is typing": "{{ user }} está escribiendo",
-  "🏙 Attachment...": "🏙 Adjunto..."
+  "{{ user }} is typing": "",
+  "🏙 Attachment...": ""
 }

package/src/i18n/fr.json

@@ -1,9 +1,9 @@
 {
-  "1 Reply": "1 Réponse",
+  "1 Reply": "",
   "1 Thread Reply": "Réponse à 1 fil",
   "Allow access to your Gallery": "",
   "Allow camera access in device settings": "",
-  "Also send to channel": "Envoyer également à la chaîne",
+  "Also send to channel": "",
   "Are you sure you want to permanently delete this message?": "",
   "Are you sure?": "",
   "Block User": "",
@@ -16,50 +16,50 @@
   "Device camera is used to take photos or videos.": "",
   "Do you want to send a copy of this message to a moderator for further investigation?": "",
   "Edit Message": "",
-  "Editing Message": "",
+  "Editing Message": "Édite un message",
   "Emoji matching": "",
-  "Empty message...": "Message vide...",
-  "Error loading": "Erreur lors du chargement",
-  "Error loading channel list...": "Erreur lors du chargement de la liste de canaux...",
-  "Error loading messages for this channel...": "Erreur lors du chargement des messages de ce canal...",
-  "Error while loading, please reload/refresh": "Erreur lors du chargement, veuillez recharger/rafraîchir",
+  "Empty message...": "",
+  "Error loading": "",
+  "Error loading channel list...": "",
+  "Error loading messages for this channel...": "",
+  "Error while loading, please reload/refresh": "",
   "File type not supported": "",
   "Flag": "",
   "Flag Message": "",
   "Flag action failed either due to a network issue or the message is already flagged": "",
-  "How about sending your first message to a friend?": "Et si vous envoyiez votre premier message à un ami ?",
+  "How about sending your first message to a friend?": "",
   "Instant Commands": "",
-  "Let's start chatting!": "Commençons à discuter !",
-  "Links are disabled": "Links are disabled",
+  "Let's start chatting!": "",
+  "Links are disabled": "",
   "Loading channels...": "",
   "Loading messages...": "",
   "Loading...": "",
-  "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "Taille maximale de téléchargement de fichier atteinte. Veuillez télécharger un fichier inférieur à {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} Mo.",
+  "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "",
   "Message Reactions": "",
   "Message deleted": "Message supprimé",
   "Message flagged": "",
   "Mute User": "",
   "Not supported": "",
-  "Nothing yet...": "Aucun message...",
+  "Nothing yet...": "",
   "Ok": "",
-  "Only visible to you": "Seulement visible par vous",
+  "Only visible to you": "",
   "Open Settings": "",
   "Photo": "Photo",
   "Photos and Videos": "",
   "Pin to Conversation": "",
-  "Pinned by": "Épinglé par",
+  "Pinned by": "",
   "Please enable access to your photos and videos so you can share them.": "",
   "Please select a channel first": "",
   "Reconnecting...": "Se Reconnecter...",
   "Reply": "",
   "Reply to Message": "Répondre au message",
   "Resend": "",
-  "Search GIFs": "Rechercher des GIF",
+  "Search GIFs": "",
   "Select More Photos": "",
   "Send Anyway": "",
-  "Send a message": "Envoyer un message",
-  "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
-  "Slow mode ON": "Mode lent activé",
+  "Send a message": "",
+  "Sending links is not allowed in this conversation": "",
+  "Slow mode ON": "",
   "The message has been reported to a moderator.": "",
   "Thread Reply": "",
   "Unblock User": "",
@@ -68,12 +68,12 @@
   "Unpin from Conversation": "",
   "Unread Messages": "Messages non lus",
   "Video": "Vidéo",
-  "You": "Toi",
+  "You": "",
   "You can't send messages in this channel": "",
-  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} et {{ nonSelfUserLength }} autres sont en train d'écrire",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
   "{{ index }} of {{ photoLength }}": "",
-  "{{ replyCount }} Replies": "{{ replyCount }} Réponses",
+  "{{ replyCount }} Replies": "",
   "{{ replyCount }} Thread Replies": "{{replyCount}} Réponses à la discussion",
-  "{{ user }} is typing": "{{ user }} est en train d'écrire",
-  "🏙 Attachment...": "🏙 Pièce jointe..."
+  "{{ user }} is typing": "",
+  "🏙 Attachment...": ""
 }