feat: svg aware images (#3616)

isekovanic · web-flow · commit 3eaeb773d137 · 2026-05-23T00:34:42.000+02:00
## 🎯 Goal This PR provides SVG image awareness to our default `Image` rendering component. Historically, we've never supported SVG rendering within the `ImageGallery`, message images as well as the `ImageGrid`. This PR should address that. The default component used for `ImageComponent` is now `SvgAwareImage` from the SDK. This should of course be non-breaking as it doesn't affect rendering at all. Unfortunately, not all places could default to using `ImageComponent`, specifically `AnimatedGalleryImage.tsx` and the images within `ImageGrid.tsx`. The reason behind this is the fact that also historically, we've only used `ImageComponent` within the confines of the `Chat` component. This means that some integrations might actually depend on this in respect to rendering the `ImageComponent` itself (a popular usecase would be to `useChatContext` to know if we're offline or not, for example). Since the gallery still lives typically outside of `Chat`, we can't safely move this up there without breaking various integrations. This will be addressed in the next major version for sure and is now on my radar. And last, but not least, this PR addresses a similar issue where opening the `ImageGrid` with videos would crash. The reason is of course the usage of `LoadingImage`, which also assumes it lives within `Chat`. ## 🛠 Implementation details  ## 🎨 UI Changes  <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td>  </td> <td>  </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td>  </td> <td>  </td> </tr> </tbody> </table> </details> ## 🧪 Testing  ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
diff --git a/package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx b/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',
+  },
+});
diff --git a/package/src/components/ImageGallery/components/ImageGrid.tsx b/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]);
 };
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx b/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 }}
diff --git a/package/src/components/UIComponents/SvgAwareImage.tsx b/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>
+  );
+};
diff --git a/package/src/components/UIComponents/index.ts b/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';
diff --git a/package/src/components/index.ts b/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';
diff --git a/package/src/contexts/componentsContext/defaultComponents.ts b/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,
 };
 
 /**
diff --git a/package/src/hooks/index.ts b/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';
diff --git a/package/src/hooks/useIsSvg.ts b/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]);
