stream-chat-react-native-core 5.27.0-beta.9 → 5.27.1-beta.1

package/src/components/MessageList/InlineLoadingMoreIndicator.tsx

@@ -17,24 +17,25 @@ export type InlineLoadingMoreIndicatorPropsWithContext = {
   loadingMore?: boolean;
 };
 
-export const InlineLoadingMoreIndicatorWithContext: React.FC<InlineLoadingMoreIndicatorPropsWithContext> =
-  ({ loadingMore }) => {
-    const { theme } = useTheme();
-
-    const {
-      colors: { accent_blue },
-    } = theme;
-
-    if (!loadingMore) {
-      return null;
-    }
-
-    return (
-      <View style={styles.activityIndicatorContainer}>
-        <ActivityIndicator color={accent_blue} size='small' />
-      </View>
-    );
-  };
+export const InlineLoadingMoreIndicatorWithContext = ({
+  loadingMore,
+}: InlineLoadingMoreIndicatorPropsWithContext) => {
+  const { theme } = useTheme();
+
+  const {
+    colors: { accent_blue },
+  } = theme;
+
+  if (!loadingMore) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
 
 const areEqual = (
   prevProps: InlineLoadingMoreIndicatorPropsWithContext,

package/src/components/MessageList/InlineLoadingMoreRecentIndicator.tsx

@@ -17,24 +17,25 @@ export type InlineLoadingMoreRecentIndicatorPropsWithContext = {
   loadingMoreRecent?: boolean;
 };
 
-export const InlineLoadingMoreRecentIndicatorWithContext: React.FC<InlineLoadingMoreRecentIndicatorPropsWithContext> =
-  ({ loadingMoreRecent }) => {
-    const { theme } = useTheme();
-
-    const {
-      colors: { accent_blue },
-    } = theme;
-
-    if (!loadingMoreRecent) {
-      return null;
-    }
-
-    return (
-      <View style={styles.activityIndicatorContainer}>
-        <ActivityIndicator color={accent_blue} size='small' />
-      </View>
-    );
-  };
+export const InlineLoadingMoreRecentIndicatorWithContext = ({
+  loadingMoreRecent,
+}: InlineLoadingMoreRecentIndicatorPropsWithContext) => {
+  const { theme } = useTheme();
+
+  const {
+    colors: { accent_blue },
+  } = theme;
+
+  if (!loadingMoreRecent) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
 
 const areEqual = (
   prevProps: InlineLoadingMoreRecentIndicatorPropsWithContext,

package/src/components/MessageList/InlineLoadingMoreThreadIndicator.tsx

@@ -17,24 +17,25 @@ export type InlineLoadingMoreThreadIndicatorPropsWithContext = {
   threadLoadingMore?: boolean;
 };
 
-export const InlineLoadingMoreThreadIndicatorWithContext: React.FC<InlineLoadingMoreThreadIndicatorPropsWithContext> =
-  ({ threadLoadingMore }) => {
-    const { theme } = useTheme();
-
-    const {
-      colors: { accent_blue },
-    } = theme;
-
-    if (!threadLoadingMore) {
-      return null;
-    }
-
-    return (
-      <View style={styles.activityIndicatorContainer}>
-        <ActivityIndicator color={accent_blue} size='small' />
-      </View>
-    );
-  };
+export const InlineLoadingMoreThreadIndicatorWithContext = ({
+  threadLoadingMore,
+}: InlineLoadingMoreThreadIndicatorPropsWithContext) => {
+  const { theme } = useTheme();
+
+  const {
+    colors: { accent_blue },
+  } = theme;
+
+  if (!threadLoadingMore) {
+    return null;
+  }
+
+  return (
+    <View style={styles.activityIndicatorContainer}>
+      <ActivityIndicator color={accent_blue} size='small' />
+    </View>
+  );
+};
 
 const areEqual = (
   prevProps: InlineLoadingMoreThreadIndicatorPropsWithContext,

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const InlineUnreadIndicator: React.FC = () => {
+export const InlineUnreadIndicator = () => {
   const {
     theme: {
       colors: { bg_gradient_end, bg_gradient_start, grey },
@@ -41,7 +41,7 @@ export const InlineUnreadIndicator: React.FC = () => {
           </LinearGradient>
         </Defs>
       </Svg>
-      <Text style={[styles.text, { color: grey }, text]}>{t('Unread Messages')}</Text>
+      <Text style={[styles.text, { color: grey }, text]}>{t<string>('Unread Messages')}</Text>
     </View>
   );
 };

package/src/components/MessageList/MessageList.tsx

@@ -1045,6 +1045,7 @@ const MessageListWithContext = <
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
   };
+
   const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = (event) => {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);

package/src/components/MessageList/MessageSystem.tsx

@@ -87,7 +87,7 @@ export const MessageSystem = <
         <Text style={[styles.text, { color: grey }, text]}>
           {message.text?.toUpperCase() || ''}
         </Text>
-        <Text style={[styles.text, { color: grey }, dateText]}>{date}</Text>
+        <Text style={[styles.text, { color: grey }, dateText]}>{date.toString()}</Text>
       </View>
       <View style={[styles.line, { backgroundColor: grey_whisper }, line]} />
     </View>

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -55,7 +55,7 @@ export type ScrollToBottomButtonProps = {
   unreadCount?: number;
 };
 
-export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = (props) => {
+export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const { onPress, showNotification = true, unreadCount } = props;
 
   const {

package/src/components/MessageList/TypingIndicatorContainer.tsx

@@ -51,12 +51,12 @@ const TypingIndicatorContainerWithContext = <
 
 export type TypingIndicatorContainerProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<TypingIndicatorContainerPropsWithContext<StreamChatGenerics>>;
+> = PropsWithChildren<Partial<TypingIndicatorContainerPropsWithContext<StreamChatGenerics>>>;
 
 export const TypingIndicatorContainer = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: PropsWithChildren<TypingIndicatorContainerProps<StreamChatGenerics>>,
+  props: TypingIndicatorContainerProps<StreamChatGenerics>,
 ) => {
   const { typing } = useTypingContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();

package/src/components/MessageList/__tests__/MessageSystem.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
@@ -36,7 +36,7 @@ describe('MessageSystem', () => {
     const translators = await i18nInstance.getTranslators();
     const user = generateStaticUser(0);
     const message = generateStaticMessage('Hello World', { user });
-    const { toJSON } = render(
+    render(
       <ThemeProvider style={defaultTheme}>
         <TranslationProvider value={translators}>
           <MessageSystem message={message} />
@@ -45,7 +45,7 @@ describe('MessageSystem', () => {
     );
 
     await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
+      expect(screen.toJSON()).toMatchSnapshot();
     });
   });
 });

package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.js.snap

@@ -3,56 +3,56 @@
 exports[`MessageSystem should match the snapshot for message system 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
         "marginBottom": 10,
       },
       undefined,
-      Object {},
+      {},
     ]
   }
   testID="message-system"
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "flex": 1,
           "height": 0.5,
         },
-        Object {
+        {
           "backgroundColor": "#ECEBEB",
         },
-        Object {},
+        {},
       ]
     }
   />
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "flex": 3,
           "marginTop": 10,
         },
-        Object {},
+        {},
       ]
     }
   >
     <Text
       style={
-        Array [
-          Object {
+        [
+          {
             "fontSize": 10,
             "fontWeight": "bold",
             "textAlign": "center",
           },
-          Object {
+          {
             "color": "#7A7A7A",
           },
-          Object {},
+          {},
         ]
       }
     >
@@ -60,16 +60,16 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
     </Text>
     <Text
       style={
-        Array [
-          Object {
+        [
+          {
             "fontSize": 10,
             "fontWeight": "bold",
             "textAlign": "center",
           },
-          Object {
+          {
             "color": "#7A7A7A",
           },
-          Object {},
+          {},
         ]
       }
     >
@@ -78,15 +78,15 @@ exports[`MessageSystem should match the snapshot for message system 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "flex": 1,
           "height": 0.5,
         },
-        Object {
+        {
           "backgroundColor": "#ECEBEB",
         },
-        Object {},
+        {},
       ]
     }
   />

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`ScrollToBottomButton should render the message notification and match snapshot 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -13,7 +30,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "bottom": 20,
       "opacity": 1,
       "position": "absolute",
@@ -24,26 +41,26 @@ exports[`ScrollToBottomButton should render the message notification and match s
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "height": 50,
           "justifyContent": "flex-end",
         },
-        Object {},
+        {},
       ]
     }
   >
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "borderRadius": 20,
             "elevation": 5,
             "height": 40,
             "justifyContent": "center",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 2,
               "width": 0,
             },
@@ -51,11 +68,11 @@ exports[`ScrollToBottomButton should render the message notification and match s
             "shadowRadius": 4,
             "width": 40,
           },
-          Object {
+          {
             "backgroundColor": "#FFFFFF",
             "shadowColor": "#000000",
           },
-          Object {},
+          {},
         ]
       }
     >
@@ -70,12 +87,12 @@ exports[`ScrollToBottomButton should render the message notification and match s
         minY={0}
         pathFill="#000000"
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Object {
+            {
               "flex": 0,
               "height": 24,
               "width": 24,
@@ -86,14 +103,26 @@ exports[`ScrollToBottomButton should render the message notification and match s
         vbWidth={24}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M5.305 8.306a1.046 1.046 0 000 1.478l5.904 5.91c.228.228.536.33.834.302.27 0 .539-.101.744-.306l5.907-5.907a1.044 1.044 0 10-1.477-1.477l-5.22 5.22-5.216-5.22a1.043 1.043 0 00-1.476 0z"
-            fill={4278190080}
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
             fillRule={0}
             propList={
-              Array [
+              [
                 "fill",
                 "fillRule",
               ]

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -3,29 +3,29 @@
 exports[`TypingIndicator should match typing indicator snapshot 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "alignItems": "center",
         "flexDirection": "row",
         "height": 24,
         "justifyContent": "flex-start",
       },
-      Object {
+      {
         "backgroundColor": "#FCFCFCE6",
       },
-      Object {},
+      {},
     ]
   }
   testID="typing-indicator"
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "flexDirection": "row",
         },
-        Object {},
-        Object {
+        {},
+        {
           "marginLeft": 8,
         },
       ]
@@ -33,18 +33,18 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "#000000",
             "borderRadius": 2,
             "height": 4,
             "width": 4,
           },
-          Object {
+          {
             "marginRight": 2,
           },
-          Object {},
-          Object {
+          {},
+          {
             "opacity": -0.3333333333333333,
           },
         ]
@@ -52,18 +52,18 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     />
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "#000000",
             "borderRadius": 2,
             "height": 4,
             "width": 4,
           },
-          Object {
+          {
             "marginHorizontal": 2,
           },
-          Object {},
-          Object {
+          {},
+          {
             "opacity": 0.3333333333333333,
           },
         ]
@@ -71,18 +71,18 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     />
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "#000000",
             "borderRadius": 2,
             "height": 4,
             "width": 4,
           },
-          Object {
+          {
             "marginLeft": 2,
           },
-          Object {},
-          Object {
+          {},
+          {
             "opacity": 1,
           },
         ]
@@ -91,14 +91,14 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
   </View>
   <Text
     style={
-      Array [
-        Object {
+      [
+        {
           "marginLeft": 8,
         },
-        Object {
+        {
           "color": "#7A7A7A",
         },
-        Object {
+        {
           "fontSize": 14,
         },
       ]

package/src/components/MessageList/__tests__/useMessageList.test.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-native';
 
 import type { DefaultGenerics, StreamChat } from 'stream-chat';
 

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -43,11 +43,11 @@ export const getGroupStyles = <
 
   for (let i = 0; i < messagesFilteredForNonUser.length; i++) {
     const previousMessage = messagesFilteredForNonUser[i - 1] as
-      | typeof messagesFilteredForNonUser[0]
+      | (typeof messagesFilteredForNonUser)[0]
       | undefined;
     const message = messagesFilteredForNonUser[i];
     const nextMessage = messagesFilteredForNonUser[i + 1] as
-      | typeof messagesFilteredForNonUser[0]
+      | (typeof messagesFilteredForNonUser)[0]
       | undefined;
     const groupStyles: GroupType[] = [];
 

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -35,14 +35,14 @@ const MessageActionListWithContext = <
 ) => {
   const {
     alignment,
-    messageActions,
-    showScreen,
-    MessageActionListItem = DefaultMessageActionListItem,
+    error,
     isMyMessage,
+    isThreadMessage,
     message,
+    MessageActionListItem = DefaultMessageActionListItem,
+    messageActions,
     messageReactions,
-    error,
-    isThreadMessage,
+    showScreen,
   } = props;
 
   const messageActionProps = {

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -112,21 +112,24 @@ const MessageOverlayWithContext = <
 ) => {
   const {
     alignment,
-    ownCapabilities,
+    chatContext,
     clientId,
+    error,
     files,
     groupStyles,
     handleReaction,
     images,
-    chatContext,
+    isMyMessage,
+    isThreadMessage,
     message,
-    messageActions,
     MessageActionList = DefaultMessageActionList,
     MessageActionListItem,
+    messageActions,
     messageContext,
+    messageReactions,
     messageReactionTitle,
-    messageTextNumberOfLines = DefaultMessageTextNumberOfLines,
     messagesContext,
+    messageTextNumberOfLines = DefaultMessageTextNumberOfLines,
     onlyEmojis,
     otherAttachments,
     overlay,
@@ -134,13 +137,10 @@ const MessageOverlayWithContext = <
     OverlayReactionList = OverlayReactionListDefault,
     OverlayReactions = DefaultOverlayReactions,
     OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
+    ownCapabilities,
     setOverlay,
     threadList,
     videos,
-    isMyMessage,
-    messageReactions,
-    error,
-    isThreadMessage,
   } = props;
 
   const messageActionProps = {