stream-chat-react-native-core 9.1.2 → 9.1.3-beta.2

package/lib/typescript/hooks/useTranslatedMessage.d.ts

@@ -32,6 +32,8 @@ export declare const useTranslatedMessage: (message?: LocalMessage | MessageResp
     member?: import("stream-chat").ChannelMemberResponse | undefined;
     mentioned_users?: import("stream-chat").UserResponse[] | undefined;
     mentioned_channel?: boolean | undefined;
+    mentioned_here?: boolean | undefined;
+    mentioned_roles?: string[] | undefined;
     message_text_updated_at?: string | undefined;
     moderation?: import("stream-chat").ModerationResponse | undefined;
     moderation_details?: import("stream-chat").ModerationDetailsResponse | undefined;
@@ -58,8 +60,8 @@ export declare const useTranslatedMessage: (message?: LocalMessage | MessageResp
     pinned_at: Date | null;
     status: string;
     updated_at: Date;
-    error?: import("stream-chat").ErrorFromResponse<import("stream-chat").APIErrorResponse>;
-    quoted_message?: import("stream-chat").LocalMessageBase;
+    error?: import("stream-chat").ErrorFromResponse<import("stream-chat").APIErrorResponse> | null;
+    quoted_message?: import("stream-chat").LocalMessageBase | null;
 } | {
     id: string;
     attachments?: import("stream-chat").Attachment[];
@@ -96,6 +98,8 @@ export declare const useTranslatedMessage: (message?: LocalMessage | MessageResp
     member?: import("stream-chat").ChannelMemberResponse;
     mentioned_users?: import("stream-chat").UserResponse[];
     mentioned_channel?: boolean;
+    mentioned_here?: boolean;
+    mentioned_roles?: string[];
     message_text_updated_at?: string;
     moderation?: import("stream-chat").ModerationResponse;
     moderation_details?: import("stream-chat").ModerationDetailsResponse;

package/lib/typescript/hooks/useTranslatedMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslatedMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTranslatedMessage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMvF,eAAO,MAAM,oBAAoB,GAAI,UAAU,YAAY,GAAG,eAAe;;;;;;;;;;;;;;;;;;;;;;;YAkBy/jB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aADtkkB,CAAC"}
+{"version":3,"file":"useTranslatedMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTranslatedMessage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMvF,eAAO,MAAM,oBAAoB,GAAI,UAAU,YAAY,GAAG,eAAe;;;;;;;;;;;;;;;;;;;;;;;YAkB+tkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAD5ykB,CAAC"}

package/lib/typescript/utils/utils.d.ts

@@ -121,7 +121,7 @@ export declare const findInMessagesByDate: (messages: MessageResponse[] | Channe
  * If any of the properties differ, it returns false, indicating that the messages are not equal.
  * Useful for the `areEqual` logic in the React.memo of the Message component/sub-components.
  */
-export declare const checkMessageEquality: (prevMessage?: LocalMessage, nextMessage?: LocalMessage) => boolean;
+export declare const checkMessageEquality: (prevMessage?: LocalMessage | null, nextMessage?: LocalMessage | null) => boolean;
 /**
  * The purpose of this function is to compare two quoted messages and determine if they are equal.
  * It checks various properties of the messages, such as status, type, text, updated_at timestamp, and deleted_at.
@@ -129,7 +129,7 @@ export declare const checkMessageEquality: (prevMessage?: LocalMessage, nextMess
  * If any of the properties differ, it returns false, indicating that the messages are not equal.
  * Useful for the `areEqual` logic in the React.memo of the Message component/sub-components.
  */
-export declare const checkQuotedMessageEquality: (prevQuotedMessage?: LocalMessage, nextQuotedMessage?: LocalMessage) => boolean;
+export declare const checkQuotedMessageEquality: (prevQuotedMessage?: LocalMessage | null, nextQuotedMessage?: LocalMessage | null) => boolean;
 /**
  * Utility to get initials from name.
  * @param name string

package/lib/typescript/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.1.2",
+  "version": "9.1.3-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -83,7 +83,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
-    "stream-chat": "^9.43.0",
+    "stream-chat": "^9.43.1",
     "use-sync-external-store": "^1.5.0"
   },
   "peerDependencies": {

package/src/components/Attachment/Gallery.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { ImageErrorEvent, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
-import { GalleryImage } from './GalleryImage';
+import { LoadableGalleryImage } from './GalleryImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -35,8 +35,6 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { useLoadingImage } from '../../hooks/useLoadingImage';
-import { useStableCallback } from '../../hooks/useStableCallback';
 import { isVideoPlayerAvailable } from '../../native';
 import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
@@ -331,15 +329,6 @@ const GalleryImageThumbnail = ({
   borderRadius,
   thumbnail,
 }: Pick<GalleryThumbnailProps, 'thumbnail' | 'borderRadius'>) => {
-  const { AttachmentUploadIndicator, ImageLoadingFailedIndicator, ImageLoadingIndicator } =
-    useComponentsContext();
-  const {
-    isLoadingImage,
-    isLoadingImageError,
-    onReloadImage,
-    setLoadingImage,
-    setLoadingImageError,
-  } = useLoadingImage();
   const {
     theme: {
       messageItemView: { gallery },
@@ -347,44 +336,14 @@ const GalleryImageThumbnail = ({
   } = useTheme();
   const styles = useStyles();
 
-  const onLoadStart = useStableCallback(() => {
-    setLoadingImageError(false);
-    setLoadingImage(true);
-  });
-  const onLoad = useStableCallback(() => {
-    setTimeout(() => {
-      setLoadingImage(false);
-      setLoadingImageError(false);
-    }, 0);
-  });
-  const onError = useStableCallback(({ nativeEvent: { error } }: ImageErrorEvent) => {
-    console.warn(error);
-    setLoadingImage(false);
-    setLoadingImageError(true);
-  });
   return (
-    <View style={[styles.image, borderRadius]}>
-      {isLoadingImageError ? (
-        <ImageLoadingFailedIndicator onReloadImage={onReloadImage} />
-      ) : (
-        <>
-          <GalleryImage
-            onError={onError}
-            onLoad={onLoad}
-            onLoadStart={onLoadStart}
-            resizeMode={thumbnail.resizeMode}
-            style={gallery.image}
-            uri={thumbnail.url}
-          />
-          {isLoadingImage ? <ImageLoadingIndicator /> : null}
-          <AttachmentUploadIndicator
-            localId={thumbnail.localId}
-            sourceUrl={thumbnail.url}
-            variant='overlay'
-          />
-        </>
-      )}
-    </View>
+    <LoadableGalleryImage
+      containerStyle={[styles.image, borderRadius]}
+      imageStyle={gallery.image}
+      localId={thumbnail.localId}
+      resizeMode={thumbnail.resizeMode}
+      uri={thumbnail.url}
+    />
   );
 };
 const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWithContext) => {

package/src/components/Attachment/GalleryImage.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
-import { Image, ImageProps, StyleSheet } from 'react-native';
+import {
+  Image,
+  ImageErrorEvent,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
+import { useStableCallback } from '../../hooks/useStableCallback';
 
 import { getUrlWithoutParams, isLocalUrl, makeImageCompatibleUrl } from '../../utils/utils';
 
@@ -10,7 +21,13 @@ export type GalleryImageWithContextProps = GalleryImageProps & {
 };
 
 export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
-  const { ImageComponent = Image, uri, style, ...rest } = props;
+  const {
+    accessibilityLabel = 'Gallery Image',
+    ImageComponent = Image,
+    uri,
+    style,
+    ...rest
+  } = props;
 
   // Caching image components such as FastImage will not work with local images.
   // This for the case of local uris, we use the default Image component.
@@ -18,7 +35,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
     return (
       <ImageComponent
         {...rest}
-        accessibilityLabel='Gallery Image'
+        accessibilityLabel={accessibilityLabel}
         style={[styles.image, style]}
         source={{
           uri: makeImageCompatibleUrl(uri),
@@ -30,7 +47,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
   return (
     <Image
       {...rest}
-      accessibilityLabel='Gallery Image'
+      accessibilityLabel={accessibilityLabel}
       style={[styles.image, style]}
       source={{
         uri: makeImageCompatibleUrl(uri),
@@ -54,6 +71,75 @@ export const GalleryImage = (props: GalleryImageProps) => {
   return <MemoizedGalleryImage ImageComponent={ImageComponent} {...props} />;
 };
 
+export type LoadableGalleryImageProps = Pick<
+  GalleryImageProps,
+  'accessibilityLabel' | 'resizeMode' | 'uri'
+> & {
+  children?: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+  localId?: string;
+};
+
+export const LoadableGalleryImage = ({
+  accessibilityLabel = 'Gallery Image',
+  children,
+  containerStyle,
+  imageStyle,
+  localId,
+  resizeMode,
+  uri,
+}: LoadableGalleryImageProps) => {
+  const { AttachmentUploadIndicator, ImageLoadingFailedIndicator, ImageLoadingIndicator } =
+    useComponentsContext();
+  const {
+    isLoadingImage,
+    isLoadingImageError,
+    onReloadImage,
+    setLoadingImage,
+    setLoadingImageError,
+  } = useLoadingImage();
+
+  const onLoadStart = useStableCallback(() => {
+    setLoadingImageError(false);
+    setLoadingImage(true);
+  });
+  const onLoad = useStableCallback(() => {
+    setTimeout(() => {
+      setLoadingImage(false);
+      setLoadingImageError(false);
+    }, 0);
+  });
+  const onError = useStableCallback(({ nativeEvent: { error } }: ImageErrorEvent) => {
+    console.warn(error);
+    setLoadingImage(false);
+    setLoadingImageError(true);
+  });
+
+  return (
+    <View style={[styles.image, containerStyle]}>
+      {isLoadingImageError ? (
+        <ImageLoadingFailedIndicator onReloadImage={onReloadImage} />
+      ) : (
+        <>
+          <GalleryImage
+            accessibilityLabel={accessibilityLabel}
+            onError={onError}
+            onLoad={onLoad}
+            onLoadStart={onLoadStart}
+            resizeMode={resizeMode}
+            style={imageStyle}
+            uri={uri}
+          />
+          {children}
+          {isLoadingImage ? <ImageLoadingIndicator /> : null}
+          <AttachmentUploadIndicator localId={localId} sourceUrl={uri} variant='overlay' />
+        </>
+      )}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   image: {
     flex: 1,

package/src/components/Attachment/ImageLoadingIndicator.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { useTheme } from '../../contexts';
 import { NativeShimmerView } from '../UIComponents/NativeShimmerView';
 
-export const ImageLoadingIndicator = () => {
+export const ImageLoadingIndicator = React.memo(() => {
   const {
     theme: { semantics },
   } = useTheme();
@@ -15,18 +15,6 @@ export const ImageLoadingIndicator = () => {
       enabled
       gradientColor={semantics.skeletonLoadingHighlight}
       style={StyleSheet.absoluteFill}
-    >
-      <View pointerEvents='none' style={styles.centered}>
-        <ActivityIndicator />
-      </View>
-    </NativeShimmerView>
+    />
   );
-};
-
-const styles = StyleSheet.create({
-  centered: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
 });

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { LoadableGalleryImage } from './GalleryImage';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
@@ -12,6 +13,10 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
+  playIndicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export type VideoThumbnailProps = {
@@ -32,18 +37,26 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
       },
     },
   } = useTheme();
-  const { AttachmentUploadIndicator, ImageComponent } = useComponentsContext();
   const { imageStyle, localId, style, thumb_url } = props;
 
   return (
     <View style={[styles.container, container, style]}>
-      <ImageComponent
-        accessibilityLabel='Video Thumbnail'
-        source={{ uri: thumb_url }}
-        style={[StyleSheet.absoluteFill, imageStyle]}
-      />
-      <VideoPlayIndicator size='md' />
-      <AttachmentUploadIndicator localId={localId} sourceUrl={thumb_url} variant='overlay' />
+      {thumb_url ? (
+        <LoadableGalleryImage
+          accessibilityLabel='Video Thumbnail'
+          containerStyle={StyleSheet.absoluteFill}
+          imageStyle={imageStyle}
+          localId={localId}
+          uri={thumb_url}
+        >
+          <View
+            pointerEvents='none'
+            style={[StyleSheet.absoluteFill, styles.playIndicatorContainer]}
+          >
+            <VideoPlayIndicator size='md' />
+          </View>
+        </LoadableGalleryImage>
+      ) : null}
     </View>
   );
 };

package/src/components/Attachment/__tests__/VideoThumbnail.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ImageProps, View } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { VideoThumbnail } from '../VideoThumbnail';
+
+const CustomImageComponent = (props: ImageProps) => (
+  <View accessibilityLabel={props.accessibilityLabel} testID='custom-image-component' />
+);
+
+const renderVideoThumbnail = (thumb_url: string) =>
+  render(
+    <ThemeProvider>
+      <WithComponents overrides={{ ImageComponent: CustomImageComponent }}>
+        <VideoThumbnail thumb_url={thumb_url} />
+      </WithComponents>
+    </ThemeProvider>,
+  );
+
+describe('VideoThumbnail', () => {
+  it('uses the configured ImageComponent for remote thumbnail URLs', () => {
+    renderVideoThumbnail('https://example.com/video-thumbnail.jpg');
+
+    expect(screen.getByTestId('custom-image-component')).toBeTruthy();
+  });
+
+  it('uses the default Image fallback for local thumbnail paths', () => {
+    renderVideoThumbnail('file:///tmp/video-thumbnail.jpg');
+
+    expect(screen.queryByTestId('custom-image-component')).toBeNull();
+    expect(screen.getByLabelText('Video Thumbnail')).toBeTruthy();
+  });
+
+  it('renders the image loading indicator while the thumbnail is loading', () => {
+    renderVideoThumbnail('file:///tmp/video-thumbnail.jpg');
+
+    fireEvent(screen.getByLabelText('Video Thumbnail'), 'loadStart');
+
+    expect(screen.getByLabelText('Image Loading Indicator')).toBeTruthy();
+  });
+});

package/src/utils/utils.ts

@@ -325,8 +325,8 @@ export const findInMessagesByDate = (
  * Useful for the `areEqual` logic in the React.memo of the Message component/sub-components.
  */
 export const checkMessageEquality = (
-  prevMessage?: LocalMessage,
-  nextMessage?: LocalMessage,
+  prevMessage?: LocalMessage | null,
+  nextMessage?: LocalMessage | null,
 ): boolean => {
   const prevMessageExists = !!prevMessage;
   const nextMessageExists = !!nextMessage;
@@ -357,8 +357,8 @@ export const checkMessageEquality = (
  * Useful for the `areEqual` logic in the React.memo of the Message component/sub-components.
  */
 export const checkQuotedMessageEquality = (
-  prevQuotedMessage?: LocalMessage,
-  nextQuotedMessage?: LocalMessage,
+  prevQuotedMessage?: LocalMessage | null,
+  nextQuotedMessage?: LocalMessage | null,
 ): boolean => {
   const prevQuotedMessageExists = !!prevQuotedMessage;
   const nextQuotedMessageExists = !!nextQuotedMessage;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.1.2"
+  "version": "9.1.3-beta.2"
 }