fix: move image gallery inside channel component

khushal87 · khushal87 · commit ca6b9903a096 · 2025-12-15T18:08:11.000+05:30
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -50,7 +50,11 @@ import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/c
 import {
   AttachmentPickerContextValue,
   AttachmentPickerProvider,
+  ImageGalleryProvider,
+  ImageGalleryProviderProps,
   MessageContextValue,
+  OverlayContextValue,
+  useOverlayContext,
 } from '../../contexts';
 import {
   AudioPlayerContextProps,
@@ -140,6 +144,7 @@ import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent }
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
+import { ImageGallery } from '../ImageGallery/ImageGallery';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import {
   LoadingErrorIndicator as LoadingErrorIndicatorDefault,
@@ -263,6 +268,8 @@ const debounceOptions = {
 };
 
 export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
+  Partial<ImageGalleryProviderProps> &
+  Pick<OverlayContextValue, 'overlay' | 'overlayOpacity'> &
   Partial<
     Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset' | 'disableAttachmentPicker'>
   > &
@@ -575,7 +582,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     attachmentPickerErrorText,
     numberOfAttachmentImagesToLoadPerCall = 60,
     numberOfAttachmentPickerImageColumns = 3,
-
+    autoPlayVideo = false,
+    giphyVersion = 'fixed_height',
+    imageGalleryCustomComponents,
+    imageGalleryGridHandleHeight = 40,
+    imageGalleryGridSnapPoints,
+    numberOfImageGalleryGridColumns = 3,
+    overlay,
+    overlayOpacity,
     bottomInset = 0,
     CameraSelectorIcon = DefaultCameraSelectorIcon,
     FileSelectorIcon = DefaultFileSelectorIcon,
@@ -620,7 +634,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     Gallery = GalleryDefault,
     getMessagesGroupStyles,
     Giphy = GiphyDefault,
-    giphyVersion = 'fixed_height',
     handleAttachButtonPress,
     handleBan,
     handleCopy,
@@ -1747,6 +1760,25 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     ],
   );
 
+  const imageGalleryProviderProps = useMemo(
+    () => ({
+      autoPlayVideo,
+      giphyVersion,
+      imageGalleryCustomComponents,
+      imageGalleryGridHandleHeight,
+      imageGalleryGridSnapPoints,
+      numberOfImageGalleryGridColumns,
+    }),
+    [
+      autoPlayVideo,
+      giphyVersion,
+      imageGalleryCustomComponents,
+      imageGalleryGridHandleHeight,
+      imageGalleryGridSnapPoints,
+      numberOfImageGalleryGridColumns,
+    ],
+  );
+
   const attachmentPickerContext = useMemo(
     () => ({
       bottomInset,
@@ -2044,37 +2076,40 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   }
 
   return (
-    <KeyboardCompatibleView
-      behavior={keyboardBehavior}
-      enabled={!disableKeyboardCompatibleView}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      {...additionalKeyboardAvoidingViewProps}
-    >
-      <ChannelProvider value={channelContext}>
-        <OwnCapabilitiesProvider value={ownCapabilitiesContext}>
-          <TypingProvider value={typingContext}>
-            <PaginatedMessageListProvider value={messageListContext}>
-              <MessagesProvider value={messagesContext}>
-                <ThreadProvider value={threadContext}>
-                  <AttachmentPickerProvider value={attachmentPickerContext}>
-                    <MessageComposerProvider value={messageComposerContext}>
-                      <MessageInputProvider value={inputMessageInputContext}>
-                        <AudioPlayerProvider value={audioPlayerContext}>
-                          <View style={{ height: '100%' }}>{children}</View>
-                          {!disableAttachmentPicker && (
-                            <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-                          )}
-                        </AudioPlayerProvider>
-                      </MessageInputProvider>
-                    </MessageComposerProvider>
-                  </AttachmentPickerProvider>
-                </ThreadProvider>
-              </MessagesProvider>
-            </PaginatedMessageListProvider>
-          </TypingProvider>
-        </OwnCapabilitiesProvider>
-      </ChannelProvider>
-    </KeyboardCompatibleView>
+    <ImageGalleryProvider value={imageGalleryProviderProps}>
+      <KeyboardCompatibleView
+        behavior={keyboardBehavior}
+        enabled={!disableKeyboardCompatibleView}
+        keyboardVerticalOffset={keyboardVerticalOffset}
+        {...additionalKeyboardAvoidingViewProps}
+      >
+        <ChannelProvider value={channelContext}>
+          <OwnCapabilitiesProvider value={ownCapabilitiesContext}>
+            <TypingProvider value={typingContext}>
+              <PaginatedMessageListProvider value={messageListContext}>
+                <MessagesProvider value={messagesContext}>
+                  <ThreadProvider value={threadContext}>
+                    <AttachmentPickerProvider value={attachmentPickerContext}>
+                      <MessageComposerProvider value={messageComposerContext}>
+                        <MessageInputProvider value={inputMessageInputContext}>
+                          <AudioPlayerProvider value={audioPlayerContext}>
+                            <View style={{ height: '100%' }}>{children}</View>
+                            {!disableAttachmentPicker && (
+                              <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+                            )}
+                          </AudioPlayerProvider>
+                        </MessageInputProvider>
+                      </MessageComposerProvider>
+                    </AttachmentPickerProvider>
+                  </ThreadProvider>
+                </MessagesProvider>
+              </PaginatedMessageListProvider>
+            </TypingProvider>
+          </OwnCapabilitiesProvider>
+        </ChannelProvider>
+      </KeyboardCompatibleView>
+      {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
+    </ImageGalleryProvider>
   );
 };
 
@@ -2094,6 +2129,7 @@ export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'th
 export const Channel = (props: PropsWithChildren<ChannelProps>) => {
   const { client, enableOfflineSupport, isOnline, isMessageAIGenerated } = useChatContext();
   const { t } = useTranslationContext();
+  const { overlay, overlayOpacity } = useOverlayContext();
 
   const threadFromProps = props?.thread;
   const threadInstance = (threadFromProps as ThreadType)?.threadInstance as Thread;
@@ -2125,6 +2161,8 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
       {...{
         isMessageAIGenerated,
         isOnline,
+        overlay,
+        overlayOpacity,
         setThreadMessages,
         thread,
         threadMessages,
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -36,7 +36,6 @@ import {
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks';
 import { useViewport } from '../../hooks/useViewport';
@@ -100,30 +99,25 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
   currentIndex: state.currentIndex,
 });
 
-type Props = ImageGalleryCustomComponents & {
+type Props = {
   overlayOpacity: SharedValue<number>;
-} & Pick<
-    OverlayProviderProps,
-    | 'imageGalleryGridSnapPoints'
-    | 'imageGalleryGridHandleHeight'
-    | 'numberOfImageGalleryGridColumns'
-  >;
+};
 
 export const ImageGallery = (props: Props) => {
-  const {
-    imageGalleryCustomComponents,
-    imageGalleryGridHandleHeight = 40,
-    imageGalleryGridSnapPoints,
-    numberOfImageGalleryGridColumns,
-    overlayOpacity,
-  } = props;
+  const { overlayOpacity } = props;
   const {
     theme: {
       colors: { white_snow },
       imageGallery: { backgroundColor, pager, slide },
     },
   } = useTheme();
-  const { imageGalleryStateStore } = useImageGalleryContext();
+  const {
+    imageGalleryStateStore,
+    imageGalleryCustomComponents,
+    imageGalleryGridHandleHeight,
+    imageGalleryGridSnapPoints,
+    numberOfImageGalleryGridColumns,
+  } = useImageGalleryContext();
   const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { assets, videoPlayerPool } = imageGalleryStateStore;
 
@@ -136,7 +130,7 @@ export const ImageGallery = (props: Props) => {
   const halfScreenHeight = fullWindowHeight / 2;
   const quarterScreenHeight = fullWindowHeight / 4;
   const snapPoints = React.useMemo(
-    () => [(fullWindowHeight * 3) / 4, fullWindowHeight - imageGalleryGridHandleHeight],
+    () => [(fullWindowHeight * 3) / 4, fullWindowHeight - (imageGalleryGridHandleHeight ?? 0)],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
diff --git a/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx b/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx
@@ -2,19 +2,25 @@ import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } fr
 
 import { Attachment } from 'stream-chat';
 
+import { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type ImageGalleryContextValue = {
+export type ImageGalleryProviderProps = ImageGalleryCustomComponents & {
   autoPlayVideo?: boolean;
-  imageGalleryStateStore: ImageGalleryStateStore;
+  /**
+   * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
+   * */
+  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+  imageGalleryGridHandleHeight?: number;
+  imageGalleryGridSnapPoints?: [string | number, string | number];
+  numberOfImageGalleryGridColumns?: number;
 };
 
-export type ImageGalleryProviderProps = {
-  autoPlayVideo?: boolean;
-  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+export type ImageGalleryContextValue = ImageGalleryProviderProps & {
+  imageGalleryStateStore: ImageGalleryStateStore;
 };
 
 export const ImageGalleryContext = React.createContext(
@@ -38,8 +44,9 @@ export const ImageGalleryProvider = ({
     () => ({
       autoPlayVideo: value?.autoPlayVideo,
       imageGalleryStateStore,
+      ...value,
     }),
-    [value?.autoPlayVideo, imageGalleryStateStore],
+    [imageGalleryStateStore, value],
   );
 
   return (
diff --git a/package/src/contexts/overlayContext/OverlayContext.tsx b/package/src/contexts/overlayContext/OverlayContext.tsx
@@ -1,8 +1,6 @@
 import React, { useContext } from 'react';
 
-import type { Attachment } from 'stream-chat';
-
-import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
+import { SharedValue } from 'react-native-reanimated';
 
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import type { DeepPartial } from '../themeContext/ThemeContext';
@@ -15,6 +13,7 @@ export type Overlay = 'alert' | 'gallery' | 'none';
 
 export type OverlayContextValue = {
   overlay: Overlay;
+  overlayOpacity: SharedValue<number>;
   setOverlay: React.Dispatch<React.SetStateAction<Overlay>>;
   style?: DeepPartial<Theme>;
 };
@@ -23,17 +22,9 @@ export const OverlayContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as OverlayContextValue,
 );
 
-export type OverlayProviderProps = ImageGalleryCustomComponents & {
-  autoPlayVideo?: boolean;
-  /**
-   * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
-   * */
-  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+export type OverlayProviderProps = {
   /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
   i18nInstance?: Streami18n;
-  imageGalleryGridHandleHeight?: number;
-  imageGalleryGridSnapPoints?: [string | number, string | number];
-  numberOfImageGalleryGridColumns?: number;
   value?: Partial<OverlayContextValue>;
 };
 
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
@@ -1,19 +1,13 @@
-import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
 import { BackHandler } from 'react-native';
 
 import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
-import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
-
 import { useStreami18n } from '../../hooks/useStreami18n';
 
-import {
-  ImageGalleryProvider,
-  ImageGalleryProviderProps,
-} from '../imageGalleryContext/ImageGalleryContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -41,17 +35,7 @@ import {
  * @example ./OverlayProvider.md
  */
 export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>) => {
-  const {
-    autoPlayVideo,
-    children,
-    giphyVersion,
-    i18nInstance,
-    imageGalleryCustomComponents,
-    imageGalleryGridHandleHeight = 40,
-    imageGalleryGridSnapPoints,
-    numberOfImageGalleryGridColumns,
-    value,
-  } = props;
+  const { children, i18nInstance, value } = props;
 
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
@@ -85,37 +69,17 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overlay]);
 
-  const imageGalleryProviderProps: ImageGalleryProviderProps = useMemo(
-    () => ({
-      autoPlayVideo,
-      giphyVersion,
-    }),
-    [autoPlayVideo, giphyVersion],
-  );
-
   const overlayContext = {
     overlay,
+    overlayOpacity,
     setOverlay,
     style: value?.style,
   };
 
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
-        <ImageGalleryProvider value={imageGalleryProviderProps}>
-          <ThemeProvider style={overlayContext.style}>
-            {children}
-            {overlay === 'gallery' && (
-              <ImageGallery
-                imageGalleryCustomComponents={imageGalleryCustomComponents}
-                imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                overlayOpacity={overlayOpacity}
-              />
-            )}
-          </ThemeProvider>
-        </ImageGalleryProvider>
+        <ThemeProvider style={overlayContext.style}>{children}</ThemeProvider>
       </OverlayContext.Provider>
     </TranslationProvider>
   );
