perf: image gallery rendering improvements (#3108)

isekovanic · isekovanic · commit 8d4965ea08e2 · 2025-05-30T13:30:12.000+02:00
diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
 import type { Channel, StreamChat } from 'stream-chat';
@@ -13,8 +13,7 @@ import { useSyncDatabase } from './hooks/useSyncDatabase';
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
-import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
-import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -158,6 +157,11 @@ const ChatWithContext = <
   // Setup translators
   const translators = useStreami18n(i18nInstance);
 
+  const translationContextValue = useMemo(
+    () => ({ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }),
+    [client.user?.language, translators],
+  );
+
   /**
    * Setup connection event listeners
    */
@@ -295,9 +299,7 @@ const ChatWithContext = <
 
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>
-      <TranslationProvider
-        value={{ ...translators, userLanguage: client.user?.language || DEFAULT_USER_LANGUAGE }}
-      >
+      <TranslationProvider value={translationContextValue}>
         <ThemeProvider style={style}>
           <ChannelsStateProvider<StreamChatGenerics>>{children}</ChannelsStateProvider>
         </ThemeProvider>
@@ -332,7 +334,7 @@ export const Chat = <
 >(
   props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
-  const { style } = useOverlayContext();
+  const { theme } = useTheme();
 
-  return <ChatWithContext {...{ style }} {...props} />;
+  return <ChatWithContext style={theme as DeepPartial<Theme>} {...props} />;
 };
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -132,9 +132,6 @@ export const ImageGallery = <
     numberOfImageGalleryGridColumns,
     overlayOpacity,
   } = props;
-  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
-    Photo<StreamChatGenerics>[]
-  >([]);
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
@@ -198,13 +195,6 @@ export const ImageGallery = <
    */
   const [currentImageHeight, setCurrentImageHeight] = useState<number>(fullWindowHeight);
 
-  /**
-   * JS and UI index values, the JS follows the UI but is needed
-   * for rendering the virtualized image list
-   */
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const index = useSharedValue(0);
-
   /**
    * Header visible value for animating in out
    */
@@ -224,57 +214,86 @@ export const ImageGallery = <
    * photo attachments
    */
 
-  const photos = messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
-    const attachmentImages =
-      cur.attachments
-        ?.filter(
-          (attachment) =>
-            (attachment.type === FileTypes.Giphy &&
-              (attachment.giphy?.[giphyVersion]?.url ||
-                attachment.thumb_url ||
-                attachment.image_url)) ||
-            (attachment.type === FileTypes.Image &&
-              !attachment.title_link &&
-              !attachment.og_scrape_url &&
-              getUrlOfImageAttachment(attachment)) ||
-            (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
-        )
-        .reverse() || [];
-
-    const attachmentPhotos = attachmentImages.map((a) => {
-      const imageUrl = getUrlOfImageAttachment(a) as string;
-      const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
-      const isInitiallyPaused = !autoPlayVideo;
-
-      return {
-        channelId: cur.cid,
-        created_at: cur.created_at,
-        duration: 0,
-        id: `photoId-${cur.id}-${imageUrl}`,
-        messageId: cur.id,
-        mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
-        original_height: a.original_height,
-        original_width: a.original_width,
-        paused: isInitiallyPaused,
-        progress: 0,
-        thumb_url: a.thumb_url,
-        type: a.type,
-        uri:
-          a.type === 'giphy'
-            ? giphyURL
-            : getResizedImageUrl({
-                height: fullWindowHeight,
-                resizableCDNHosts,
-                url: imageUrl,
-                width: fullWindowWidth,
-              }),
-        user: cur.user,
-        user_id: cur.user_id,
-      };
-    });
+  const photos = useMemo(
+    () =>
+      messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
+        const attachmentImages =
+          cur.attachments
+            ?.filter(
+              (attachment) =>
+                (attachment.type === FileTypes.Giphy &&
+                  (attachment.giphy?.[giphyVersion]?.url ||
+                    attachment.thumb_url ||
+                    attachment.image_url)) ||
+                (attachment.type === FileTypes.Image &&
+                  !attachment.title_link &&
+                  !attachment.og_scrape_url &&
+                  getUrlOfImageAttachment(attachment)) ||
+                (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
+            )
+            .reverse() || [];
+
+        const attachmentPhotos = attachmentImages.map((a) => {
+          const imageUrl = getUrlOfImageAttachment(a) as string;
+          const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
+          const isInitiallyPaused = !autoPlayVideo;
+
+          return {
+            channelId: cur.cid,
+            created_at: cur.created_at,
+            duration: 0,
+            id: `photoId-${cur.id}-${imageUrl}`,
+            messageId: cur.id,
+            mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
+            original_height: a.original_height,
+            original_width: a.original_width,
+            paused: isInitiallyPaused,
+            progress: 0,
+            thumb_url: a.thumb_url,
+            type: a.type,
+            uri:
+              a.type === 'giphy'
+                ? giphyURL
+                : getResizedImageUrl({
+                    height: fullWindowHeight,
+                    resizableCDNHosts,
+                    url: imageUrl,
+                    width: fullWindowWidth,
+                  }),
+            user: cur.user,
+            user_id: cur.user_id,
+          };
+        });
 
-    return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
-  }, []);
+        return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
+      }, []),
+    [autoPlayVideo, fullWindowHeight, fullWindowWidth, giphyVersion, messages, resizableCDNHosts],
+  );
+
+  /**
+   * The URL for the images may differ because of dimensions passed as
+   * part of the query.
+   */
+  const stripQueryFromUrl = (url: string) => url.split('?')[0];
+
+  const photoSelectedIndex = useMemo(() => {
+    const idx = photos.findIndex(
+      (photo) =>
+        photo.messageId === selectedMessage?.messageId &&
+        stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
+    );
+
+    return idx === -1 ? 0 : idx;
+  }, [photos, selectedMessage]);
+
+  /**
+   * JS and UI index values, the JS follows the UI but is needed
+   * for rendering the virtualized image list
+   */
+  const [selectedIndex, setSelectedIndex] = useState(photoSelectedIndex);
+  const index = useSharedValue(photoSelectedIndex);
+
+  const [imageGalleryAttachments, setImageGalleryAttachments] = useState<Photo<StreamChatGenerics>[]>(photos);
 
   /**
    * Photos length needs to be kept as a const here so if the length
@@ -284,17 +303,6 @@ export const ImageGallery = <
    */
   const photoLength = photos.length;
 
-  useEffect(() => {
-    setImageGalleryAttachments(photos);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /**
-   * The URL for the images may differ because of dimensions passed as
-   * part of the query.
-   */
-  const stripQueryFromUrl = (url: string) => url.split('?')[0];
-
   /**
    * Set selected photo when changed via pressing in the message list
    */
@@ -316,8 +324,7 @@ export const ImageGallery = <
     );
 
     runOnUI(updatePosition)(newIndex);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedMessage, photoLength]);
+  }, [selectedMessage, photos, index, translationX, fullWindowWidth]);
 
   /**
    * Image heights are not provided and therefore need to be calculated.
@@ -328,22 +335,24 @@ export const ImageGallery = <
   const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri;
 
   useEffect(() => {
-    setCurrentImageHeight(fullWindowHeight);
+    let currentImageHeight = fullWindowHeight;
     const photo = imageGalleryAttachments[index.value];
     const height = photo?.original_height;
     const width = photo?.original_width;
 
     if (height && width) {
       const imageHeight = Math.floor(height * (fullWindowWidth / width));
-      setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
+      currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
     } else if (photo?.uri) {
       if (photo.type === FileTypes.Image) {
         Image.getSize(photo.uri, (width, height) => {
           const imageHeight = Math.floor(height * (fullWindowWidth / width));
-          setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
+          currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
         });
       }
     }
+
+    setCurrentImageHeight(currentImageHeight);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -42,10 +42,6 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
-import {
-  OverlayContextValue,
-  useOverlayContext,
-} from '../../contexts/overlayContext/OverlayContext';
 import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
@@ -166,7 +162,6 @@ type MessageListPropsWithContext<
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
   Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
-  Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'DateHeader'
@@ -299,7 +294,6 @@ const MessageListWithContext = <
     noGroupByUser,
     onListScroll,
     onThreadSelect,
-    overlay,
     reloadChannel,
     ScrollToBottomButton,
     selectedPicker,
@@ -1276,7 +1270,6 @@ const MessageListWithContext = <
           onViewableItemsChanged={stableOnViwableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
-          scrollEnabled={overlay === 'none'}
           showsVerticalScrollIndicator={!shouldApplyAndroidWorkaround}
           style={flatListStyle}
           testID='message-flat-list'
@@ -1359,7 +1352,6 @@ export const MessageList = <
     UnreadMessagesNotification,
   } = useMessagesContext<StreamChatGenerics>();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
-  const { overlay } = useOverlayContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } =
     useThreadContext<StreamChatGenerics>();
 
@@ -1395,7 +1387,6 @@ export const MessageList = <
         MessageSystem,
         myMessageTheme,
         NetworkDownIndicator,
-        overlay,
         reloadChannel,
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -170,7 +170,6 @@ exports[`Thread should match thread snapshot 1`] = `
         onViewableItemsChanged={[Function]}
         removeClippedSubviews={false}
         renderItem={[Function]}
-        scrollEnabled={false}
         scrollEventThrottle={0.0001}
         showsVerticalScrollIndicator={true}
         stickyHeaderIndices={[]}
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
@@ -208,8 +208,8 @@ export const OverlayProvider = <
       <OverlayContext.Provider value={overlayContext}>
         <AttachmentPickerProvider value={attachmentPickerContext}>
           <ImageGalleryProvider>
-            {children}
             <ThemeProvider style={overlayContext.style}>
+              {children}
               {overlay === 'gallery' && (
                 <ImageGallery<StreamChatGenerics>
                   autoPlayVideo={autoPlayVideo}
