stream-chat-react-native-core 9.3.0-beta.3 → 9.3.0

package/lib/typescript/contexts/componentsContext/defaultComponents.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageProps, TextInputProps } from 'react-native';
+import { TextInputProps } from 'react-native';
 import type { LocalMessage, UserResponse } from 'stream-chat';
 import { KeyboardCompatibleView } from '../../components/KeyboardCompatibleView/KeyboardCompatibleView';
 import type { MessageTextProps } from '../../components/Message/MessageItemView/MessageTextContainer';
@@ -293,7 +293,7 @@ declare const components: {
     };
     ImageGalleryVideoControls: React.MemoExoticComponent<(props: import("../..").ImageGalleryVideoControlProps) => React.JSX.Element>;
     MessageOverlayBackground: () => React.JSX.Element;
-    ImageComponent: React.ComponentType<ImageProps>;
+    ImageComponent: (props: import("react-native").ImageProps) => React.JSX.Element;
 };
 /**
  * Optional component slots that have no default implementation.

package/lib/typescript/contexts/componentsContext/defaultComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultComponents.d.ts","sourceRoot":"","sources":["../../../../src/contexts/componentsContext/defaultComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiD9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gEAAgE,CAAC;AAmBxG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAC;AAiFtG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAEjG;;;;;GAKG;AACH,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC1F,CAAC;AAEF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2JW,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;CACzD,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,mCAAmC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1D,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,wBAAwB,CAAC,EAAE,cAAc,CAAC;QAC1C,QAAQ,EAAE,MAAM,YAAY,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1C,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1D,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/C,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChD,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5C,0BAA0B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjD,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;IACjE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,CAAC,OAAO,UAAU,CAAc,CAAC"}
+{"version":3,"file":"defaultComponents.d.ts","sourceRoot":"","sources":["../../../../src/contexts/componentsContext/defaultComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiD9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,gEAAgE,CAAC;AAmBxG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAC;AAkFtG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAEjG;;;;;GAKG;AACH,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC1F,CAAC;AAEF,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Jf,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,mCAAmC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1D,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,wBAAwB,CAAC,EAAE,cAAc,CAAC;QAC1C,QAAQ,EAAE,MAAM,YAAY,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC1C,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1D,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/C,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChD,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5C,0BAA0B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjD,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;IACjE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,CAAC,OAAO,UAAU,CAAc,CAAC"}

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

@@ -7,6 +7,7 @@ export * from './useStateStore';
 export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';
 export * from './useLoadingImage';
+export * from './useIsSvg';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
 export * from './useAfterKeyboardOpenCallback';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}

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

@@ -0,0 +1,15 @@
+/**
+ * Returns true if `uri` points to an SVG (either by `.svg` extension or by
+ * `image/svg+xml` data-URI prefix). Exported as a pure function for non-React
+ * callers; React components should prefer `useIsSvg` so the check is memoized
+ * per URI.
+ */
+export declare const isSvgUri: (uri: string | null | undefined) => boolean;
+/**
+ * Memoized variant of `isSvgUri`. Re-runs the string check only when `uri`
+ * actually changes — useful in hot render paths like the gallery where the
+ * surrounding component re-renders frequently (animated styles, swipe state)
+ * but the URI is stable.
+ */
+export declare const useIsSvg: (uri: string | null | undefined) => boolean;
+//# sourceMappingURL=useIsSvg.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsSvg.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsSvg.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,OAUzD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,OACrB,CAAC"}

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.3.0-beta.3",
+  "version": "9.3.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,16 +1,18 @@
 import React, { useMemo } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
 import { useChatConfigContext } from '../../../contexts/chatConfigContext/ChatConfigContext';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useStateStore } from '../../../hooks';
+import { useIsSvg } from '../../../hooks/useIsSvg';
 import {
   ImageGalleryAsset,
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { getResizedImageUrl } from '../../../utils/getResizedImageUrl';
+import { SvgAwareImage } from '../../UIComponents/SvgAwareImage';
 import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
 const oneEighth = 1 / 8;
@@ -59,6 +61,7 @@ export const AnimatedGalleryImage = React.memo(
       });
     }, [photo.uri, resizableCDNHosts, screenHeight, screenWidth]);
 
+    const isSvg = useIsSvg(uri);
     const selected = currentIndex === index;
     const previous = currentIndex > index;
     const shouldRender = Math.abs(currentIndex - index) < 4;
@@ -83,6 +86,27 @@ export const AnimatedGalleryImage = React.memo(
       return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
     }
 
+    if (isSvg) {
+      // The outer Animated.View is sized at 8× screen so raster images stay
+      // crisp under pinch zoom (see useAnimatedGalleryStyle). rn-svg on
+      // Android rasterizes the SVG to a bitmap at its layout size and an
+      // 8x screen bitmap exceeds RecordingCanvas's per draw byte limit. The
+      // inner SvgAwareImage is sized at 1x screen with a counter scale of 8 so
+      // the bitmap stays small while the composed visible scale (1/8 × 8 === 1)
+      // is unchanged.
+      return (
+        <Animated.View
+          accessibilityLabel={accessibilityLabel}
+          style={[...animatedStyles, style, styles.svgOuter]}
+        >
+          <SvgAwareImage
+            source={{ uri }}
+            style={[{ height: screenHeight, width: screenWidth }, styles.svgInner]}
+          />
+        </Animated.View>
+      );
+    }
+
     return (
       <Animated.Image
         accessibilityLabel={accessibilityLabel}
@@ -106,3 +130,13 @@ export const AnimatedGalleryImage = React.memo(
 );
 
 AnimatedGalleryImage.displayName = 'AnimatedGalleryImage';
+
+const styles = StyleSheet.create({
+  svgInner: {
+    transform: [{ scale: 8 }],
+  },
+  svgOuter: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -3,7 +3,6 @@ import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import type { ImageGalleryGridProps } from './types';
 
-import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -14,7 +13,9 @@ import type {
 } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
+import { VideoPlayIndicator } from '../../ui/VideoPlayIndicator';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
+import { SvgAwareImage } from '../../UIComponents/SvgAwareImage';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -42,11 +43,14 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
   return (
     <Pressable accessibilityLabel='Grid Image' onPress={selectAndClose}>
       {type === FileTypes.Video ? (
-        <View style={[styles.image, { height: size, width: size }]}>
-          <VideoThumbnail thumb_url={thumb_url} />
+        <View style={[styles.image, { height: size, width: size }, styles.videoCell]}>
+          {thumb_url ? <Image source={{ uri: thumb_url }} style={StyleSheet.absoluteFill} /> : null}
+          <View pointerEvents='none' style={[StyleSheet.absoluteFill, styles.playIndicator]}>
+            <VideoPlayIndicator size='md' />
+          </View>
         </View>
       ) : (
-        <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />
+        <SvgAwareImage source={{ uri }} style={[styles.image, { height: size, width: size }]} />
       )}
     </Pressable>
   );
@@ -114,6 +118,13 @@ const useStyles = () => {
         ...contentContainer,
       },
       image: { margin: 1, ...gridImage },
+      playIndicator: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      videoCell: {
+        overflow: 'hidden',
+      },
     });
   }, [contentContainer, gridImage, semantics]);
 };

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Image, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { LocalImageAttachment } from 'stream-chat';
 
@@ -26,6 +26,7 @@ export const ImageAttachmentUploadPreview = ({
   const [loading, setLoading] = useState(true);
   const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const {
+    ImageComponent,
     ImageLoadingIndicator,
     ImageUploadInProgressIndicator,
     ImageUploadRetryIndicator,
@@ -67,7 +68,7 @@ export const ImageAttachmentUploadPreview = ({
   return (
     <View style={[styles.wrapper, wrapper]} testID={'image-attachment-upload-preview'}>
       <View style={[styles.image, upload]}>
-        <Image
+        <ImageComponent
           onError={onErrorHandler}
           onLoadEnd={onLoadEndHandler}
           source={{ uri: previewUri }}

package/src/components/MessageList/MessageFlashList.tsx

@@ -55,7 +55,7 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
-import { bumpOverlayLayoutRevision } from '../../state-store';
+import { bumpOverlayLayoutRevision, useHasActiveId } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
@@ -400,13 +400,18 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [autoscrollToRecent, hasPendingInitialTargetLoad]);
 
+  // While the message overlay is open we suppress autoscroll-to-recent so that
+  // incoming messages do not shift visible content and invalidate the overlay's
+  // anchored geometry. Content anchoring (startRenderingFromBottom) stays on.
+  const isOverlayOpen = useHasActiveId();
+
   const maintainVisibleContentPosition = useMemo(() => {
     return {
       animateAutoscrollToBottom: true,
-      autoscrollToBottomThreshold: autoscrollToRecent ? 1 : undefined,
+      autoscrollToBottomThreshold: autoscrollToRecent && !isOverlayOpen ? 1 : undefined,
       startRenderingFromBottom: true,
     };
-  }, [autoscrollToRecent]);
+  }, [isOverlayOpen, autoscrollToRecent]);
 
   useEffect(() => {
     if (disabled) {

package/src/components/MessageList/MessageList.tsx

@@ -68,7 +68,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
-import { bumpOverlayLayoutRevision } from '../../state-store';
+import { bumpOverlayLayoutRevision, useHasActiveId } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
@@ -440,7 +440,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const minIndexForVisible = Math.min(1, processedMessageList.length);
 
-  const autoscrollToTopThreshold = autoscrollToRecent ? (isLiveStreaming ? 300 : 10) : undefined;
+  // While the message overlay is open we suppress autoscroll-to-recent so that
+  // incoming messages do not shift visible content and invalidate the overlay's
+  // anchored geometry. Content anchoring (minIndexForVisible) stays on.
+  const isOverlayOpen = useHasActiveId();
+
+  const autoscrollToTopThreshold =
+    autoscrollToRecent && !isOverlayOpen ? (isLiveStreaming ? 300 : 10) : undefined;
 
   const maintainVisibleContentPosition = useMemo(
     () => ({

package/src/components/UIComponents/SvgAwareImage.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Image, ImageProps, View } from 'react-native';
+
+import { SvgUri } from 'react-native-svg';
+
+import { useIsSvg } from '../../hooks/useIsSvg';
+
+const getSourceUri = (source: ImageProps['source']): string | undefined => {
+  if (!source || typeof source !== 'object' || Array.isArray(source)) {
+    return undefined;
+  }
+  return source.uri;
+};
+
+/**
+ * Default `ImageComponent` for the SDK. Behaves exactly like RN's `Image` for
+ * raster sources, but transparently renders SVG URIs (`.svg`, `image/svg+xml`
+ * data URIs) via `SvgUri` from `react-native-svg`. Integrators who override
+ * `ImageComponent` with a custom image library (e.g. FastImage) are
+ * responsible for SVG handling in their override.
+ */
+export const SvgAwareImage = (props: ImageProps) => {
+  const uri = getSourceUri(props.source);
+  const isSvg = useIsSvg(uri);
+
+  if (!isSvg || !uri) {
+    return <Image {...props} />;
+  }
+
+  const { accessibilityLabel, onError, onLoad, onLoadEnd, style, testID } = props;
+
+  return (
+    <View accessibilityLabel={accessibilityLabel} style={style} testID={testID}>
+      <SvgUri
+        height='100%'
+        onError={(error) => {
+          onError?.({ nativeEvent: { error } } as never);
+          onLoadEnd?.();
+        }}
+        onLoad={() => {
+          onLoad?.({} as never);
+          onLoadEnd?.();
+        }}
+        uri={uri}
+        width='100%'
+      />
+    </View>
+  );
+};

package/src/components/UIComponents/index.ts

@@ -1,6 +1,7 @@
 export * from './BottomSheetModal';
 export * from './StreamBottomSheetModalFlatList';
 export * from './ImageBackground';
+export * from './SvgAwareImage';
 export * from './Spinner';
 export * from './SwipableWrapper';
 export * from './PortalWhileClosingView';

package/src/components/index.ts

@@ -188,6 +188,7 @@ export * from './ui';
 export * from './UIComponents/BottomSheetModal';
 export * from './UIComponents/StreamBottomSheetModalFlatList';
 export * from './UIComponents/ImageBackground';
+export * from './UIComponents/SvgAwareImage';
 export * from './UIComponents/Spinner';
 export * from './UIComponents/SwipableWrapper';
 export * from './UIComponents/PortalWhileClosingView';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, ImageProps, TextInputProps } from 'react-native';
+import { TextInputProps } from 'react-native';
 
 import type { LocalMessage, UserResponse } from 'stream-chat';
 
@@ -149,6 +149,7 @@ import { ThreadListItemMessagePreview } from '../../components/ThreadList/Thread
 import { ThreadListUnreadBanner } from '../../components/ThreadList/ThreadListUnreadBanner';
 import { ThreadMessagePreviewDeliveryStatus } from '../../components/ThreadList/ThreadMessagePreviewDeliveryStatus';
 import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
+import { SvgAwareImage } from '../../components/UIComponents/SvgAwareImage';
 import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 import type { MessageActionsProps } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 
@@ -317,7 +318,7 @@ const components = {
   MessageOverlayBackground: DefaultMessageOverlayBackground,
 
   // Image
-  ImageComponent: Image as React.ComponentType<ImageProps>,
+  ImageComponent: SvgAwareImage,
 };
 
 /**

package/src/hooks/index.ts

@@ -7,6 +7,7 @@ export * from './useStateStore';
 export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';
 export * from './useLoadingImage';
+export * from './useIsSvg';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
 export * from './useAfterKeyboardOpenCallback';

package/src/hooks/useIsSvg.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+
+/**
+ * Returns true if `uri` points to an SVG (either by `.svg` extension or by
+ * `image/svg+xml` data-URI prefix). Exported as a pure function for non-React
+ * callers; React components should prefer `useIsSvg` so the check is memoized
+ * per URI.
+ */
+export const isSvgUri = (uri: string | null | undefined): boolean => {
+  if (typeof uri !== 'string' || uri.length === 0) {
+    return false;
+  }
+  const lower = uri.toLowerCase();
+  if (lower.startsWith('data:image/svg+xml')) {
+    return true;
+  }
+  const pathOnly = lower.split('#')[0].split('?')[0];
+  return pathOnly.endsWith('.svg');
+};
+
+/**
+ * Memoized variant of `isSvgUri`. Re-runs the string check only when `uri`
+ * actually changes — useful in hot render paths like the gallery where the
+ * surrounding component re-renders frequently (animated styles, swipe state)
+ * but the URI is stable.
+ */
+export const useIsSvg = (uri: string | null | undefined): boolean =>
+  useMemo(() => isSvgUri(uri), [uri]);

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.3.0-beta.3"
+  "version": "9.3.0"
 }