stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.11

package/src/components/ThreadList/ThreadListItem.tsx

@@ -1,7 +1,14 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { LocalMessage, Thread, ThreadState } from 'stream-chat';
+import {
+  AttachmentManagerState,
+  DraftMessage,
+  LocalMessage,
+  TextComposerState,
+  Thread,
+  ThreadState,
+} from 'stream-chat';
 
 import { ThreadListItemMessagePreview as ThreadListItemMessagePreviewDefault } from './ThreadListItemMessagePreview';
 
@@ -34,11 +41,20 @@ export const attachmentTypeIconMap = {
   voiceRecording: '🎙️',
 } as const;
 
+const textComposerStateSelector = (state: TextComposerState) => ({
+  text: state.text,
+});
+
+const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
+  attachments: state.attachments,
+});
+
 export const ThreadListItemComponent = () => {
   const {
     channel,
     dateString,
     deletedAtDateString,
+    draftMessage,
     lastReply,
     ownUnreadMessageCount,
     parentMessage,
@@ -57,10 +73,7 @@ export const ThreadListItemComponent = () => {
   const styles = useStyles();
   const { t } = useTranslationContext();
 
-  useEffect(() => {
-    const unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
-    return () => unsubscribe();
-  }, [thread.messageComposer]);
+  const shouldRenderPreview = !!draftMessage || !!lastReply;
 
   return (
     <View style={styles.wrapper}>
@@ -87,12 +100,14 @@ export const ThreadListItemComponent = () => {
           <Text numberOfLines={1} style={styles.channelName}>
             {displayName || 'N/A'}
           </Text>
-          {lastReply ? (
+          {shouldRenderPreview ? (
             <View style={styles.previewMessageContainer}>
-              <ThreadMessagePreviewDeliveryStatus
-                channel={channel}
-                message={parentMessage as LocalMessage}
-              />
+              {!draftMessage ? (
+                <ThreadMessagePreviewDeliveryStatus
+                  channel={channel}
+                  message={parentMessage as LocalMessage}
+                />
+              ) : null}
               <ThreadListItemMessagePreview message={parentMessage as LocalMessage} />
             </View>
           ) : null}
@@ -129,6 +144,14 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
   const { t, tDateTimeParser } = useTranslationContext();
   const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
   const { ThreadListItem = ThreadListItemComponent } = useThreadsContext();
+  const { text: draftText } = useStateStore(
+    thread.messageComposer.textComposer.state,
+    textComposerStateSelector,
+  );
+  const { attachments } = useStateStore(
+    thread.messageComposer.attachmentManager.state,
+    attachmentManagerStateSelector,
+  );
 
   const selector = useCallback(
     (nextValue: ThreadState) =>
@@ -150,6 +173,27 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
 
   const timestamp = lastReply?.created_at;
 
+  useEffect(() => {
+    const unsubscribe = thread.messageComposer.registerDraftEventSubscriptions();
+    return () => unsubscribe();
+  }, [thread.messageComposer]);
+
+  const draftMessage = useMemo<DraftMessage | undefined>(() => {
+    if (thread.messageComposer.compositionIsEmpty) {
+      return undefined;
+    }
+
+    if (!draftText && !attachments?.length) {
+      return undefined;
+    }
+
+    return {
+      attachments,
+      id: thread.messageComposer.id,
+      text: draftText ?? '',
+    };
+  }, [attachments, draftText, thread.messageComposer]);
+
   // TODO: Please rethink this, we have the same line of code in about 5 places in the SDK.
   const dateString = useMemo(
     () =>
@@ -178,6 +222,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         channel,
         dateString,
         deletedAtDateString,
+        draftMessage,
         lastReply,
         ownUnreadMessageCount,
         parentMessage,
@@ -224,6 +269,7 @@ const useStyles = () => {
         },
         previewMessageContainer: {
           flexDirection: 'row',
+          alignItems: 'center',
           gap: primitives.spacingXxs,
           ...threadListItem.previewMessageContainer,
         },

package/src/components/ThreadList/ThreadListItemMessagePreview.tsx

@@ -4,6 +4,8 @@ import { View, Text, StyleSheet } from 'react-native';
 import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useThreadListItemContext } from '../../contexts/threadsContext/ThreadListItemContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks';
 import { primitives } from '../../theme';
 
@@ -12,15 +14,20 @@ export type ThreadListItemMessagePreviewProps = {
 };
 
 export const ThreadListItemMessagePreview = ({ message }: ThreadListItemMessagePreviewProps) => {
+  const { draftMessage } = useThreadListItemContext();
   const {
     theme: { semantics },
   } = useTheme();
   const styles = useStyles();
-  const MessagePreviewIcon = useMessagePreviewIcon({ message });
-  const messagePreviewTitle = useMessagePreviewText({ message });
+  const { t } = useTranslationContext();
+  const previewMessage = draftMessage ?? message;
+  const MessagePreviewIcon = useMessagePreviewIcon({ message: previewMessage });
+  const messagePreviewTitle = useMessagePreviewText({ message: previewMessage });
+  const isDraft = !!draftMessage;
 
   return (
     <View style={[styles.container]}>
+      {isDraft ? <Text style={styles.draftText}>{t('Draft')}:</Text> : null}
       {MessagePreviewIcon ? (
         <MessagePreviewIcon height={20} stroke={semantics.textPrimary} width={20} />
       ) : null}
@@ -56,6 +63,14 @@ const useStyles = () => {
         flexShrink: 1,
         ...messagePreview.subtitle,
       },
+      draftText: {
+        color: semantics.accentPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        includeFontPadding: false,
+        lineHeight: primitives.typographyLineHeightNormal,
+        ...messagePreview.draftText,
+      },
     });
-  }, [messagePreview.container, messagePreview.subtitle, semantics.textPrimary]);
+  }, [messagePreview.container, messagePreview.draftText, messagePreview.subtitle, semantics]);
 };

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -26,6 +26,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
+import { primitives } from '../../theme';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 export type BottomSheetModalProps = {
@@ -416,13 +417,12 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
+          borderTopLeftRadius: primitives.radius4xl,
+          borderTopRightRadius: primitives.radius4xl,
           backgroundColor: semantics.backgroundCoreElevation1,
         },
         contentContainer: {
           flex: 1,
-          marginTop: 8,
         },
         handle: {
           alignSelf: 'center',

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
@@ -11,6 +11,7 @@ import {
   createClosingPortalLayoutRegistrationId,
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
+  useHasActiveId,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -67,38 +68,19 @@ export const PortalWhileClosingView = ({
   portalHostName,
   portalName,
 }: PortalWhileClosingViewProps) => {
-  const containerRef = useRef<View | null>(null);
   const registrationIdRef = useRef<string | null>(null);
-  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
-  const insets = useSafeAreaInsets();
 
   if (!registrationIdRef.current) {
     registrationIdRef.current = createClosingPortalLayoutRegistrationId();
   }
 
   const registrationId = registrationIdRef.current;
-  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
-
-  const syncPortalLayout = useStableCallback(() => {
-    containerRef.current?.measureInWindow((x, y, width, height) => {
-      const absolute = {
-        x,
-        y: y + (Platform.OS === 'android' ? insets.top : 0),
-      };
-
-      if (!width || !height) {
-        return;
-      }
 
-      placeholderLayout.value = { h: height, w: width };
-
-      setClosingPortalLayout(portalHostName, registrationId, {
-        ...absolute,
-        h: height,
-        w: width,
-      });
-    });
-  });
+  const { syncPortalLayout, containerRef, placeholderLayout } = useSyncingApi(
+    portalHostName,
+    registrationId,
+  );
+  const shouldTeleport = useShouldTeleportToClosingPortal(portalHostName, registrationId);
 
   useEffect(() => {
     return () => {
@@ -106,15 +88,6 @@ export const PortalWhileClosingView = ({
     };
   }, [portalHostName, registrationId]);
 
-  useEffect(() => {
-    // Measure once after mount and layout settle.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        syncPortalLayout();
-      });
-    });
-  }, [insets.top, portalHostName, syncPortalLayout]);
-
   const placeholderStyle = useAnimatedStyle(() => ({
     height: placeholderLayout.value.h,
     width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%',
@@ -137,3 +110,46 @@ export const PortalWhileClosingView = ({
     </>
   );
 };
+
+const useSyncingApi = (portalHostName: string, registrationId: string) => {
+  const containerRef = useRef<View | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+  const hasActiveId = useHasActiveId();
+
+  const syncPortalLayout = useStableCallback(() => {
+    if (!hasActiveId) {
+      return;
+    }
+
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      const absolute = {
+        x,
+        y: y + (Platform.OS === 'android' ? insets.top : 0),
+      };
+
+      if (!width || !height) {
+        return;
+      }
+
+      placeholderLayout.value = { h: height, w: width };
+
+      setClosingPortalLayout(portalHostName, registrationId, {
+        ...absolute,
+        h: height,
+        w: width,
+      });
+    });
+  });
+
+  useEffect(() => {
+    if (hasActiveId) {
+      syncPortalLayout();
+    }
+  }, [insets.bottom, hasActiveId, syncPortalLayout]);
+
+  return useMemo(
+    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
+    [placeholderLayout, syncPortalLayout],
+  );
+};

package/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './Attachment/utils/buildGallery/buildGallery';
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerContent';
 export * from './AttachmentPicker/components/AttachmentMediaPicker';
+export * from './AttachmentPicker/components/AttachmentMediaPicker/shared';
 export * from './AttachmentPicker/components/AttachmentPickerSelectionBar';
 export * from './AttachmentPicker/components/AttachmentTypePickerButton';
 export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';
@@ -38,7 +39,7 @@ export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
 export * from './ChannelList/ChannelListHeaderNetworkDownIndicator';
 export * from './ChannelList/ChannelListLoadingIndicator';
-export * from './ChannelList/ChannelListMessenger';
+export * from './ChannelList/ChannelListView';
 export * from './ChannelList/Skeleton';
 export * from './ChannelList/hooks';
 
@@ -48,7 +49,7 @@ export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
-export * from './ChannelPreview/ChannelPreviewMessenger';
+export * from './ChannelPreview/ChannelPreviewView';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
@@ -68,6 +69,7 @@ export * from './ImageGallery/components/ImageGalleryFooter';
 export * from './ImageGallery/components/ImageGalleryHeader';
 export * from './ImageGallery/components/ImageGrid';
 export * from './ImageGallery/components/ImageGalleryVideoControl';
+export * from './ImageGallery/components/types';
 export * from './ImageGallery/hooks/useImageGalleryVideoPlayer';
 
 export * from './Indicators/EmptyStateIndicator';
@@ -85,27 +87,27 @@ export * from './Message/hooks/useStreamingMessage';
 export * from './Message/hooks/useMessageDeliveryData';
 export * from './Message/hooks/useMessageReadData';
 export * from './Message/Message';
-export * from './Message/MessageSimple/MessageAvatar';
-export * from './Message/MessageSimple/MessageBounce';
-export * from './Message/MessageSimple/MessageBlocked';
-export * from './Message/MessageSimple/MessageContent';
-export * from './Message/MessageSimple/MessageDeleted';
-export * from './Message/MessageSimple/MessageError';
-export * from './Message/MessageSimple/MessageFooter';
-export * from './Message/MessageSimple/MessageHeader';
-export * from './Message/MessageSimple/Headers';
-export * from './Message/MessageSimple/MessageReplies';
-export * from './Message/MessageSimple/MessageRepliesAvatars';
-export * from './Message/MessageSimple/MessageSimple';
-export * from './Message/MessageSimple/MessageStatus';
-export * from './Message/MessageSimple/MessageTextContainer';
-export * from './Message/MessageSimple/MessageTimestamp';
-export * from './Message/MessageSimple/ReactionList/ReactionListBottom';
-export * from './Message/MessageSimple/ReactionList/ReactionListTop';
-export * from './Message/MessageSimple/ReactionList/ReactionListClustered';
-export * from './Message/MessageSimple/ReactionList/ReactionListItem';
-export * from './Message/MessageSimple/ReactionList/ReactionListItemWrapper';
-export * from './Message/MessageSimple/utils/renderText';
+export * from './Message/MessageItemView/MessageAuthor';
+export * from './Message/MessageItemView/MessageBounce';
+export * from './Message/MessageItemView/MessageBlocked';
+export * from './Message/MessageItemView/MessageContent';
+export * from './Message/MessageItemView/MessageDeleted';
+export * from './Message/MessageItemView/MessageError';
+export * from './Message/MessageItemView/MessageFooter';
+export * from './Message/MessageItemView/MessageHeader';
+export * from './Message/MessageItemView/Headers';
+export * from './Message/MessageItemView/MessageReplies';
+export * from './Message/MessageItemView/MessageRepliesAvatars';
+export * from './Message/MessageItemView/MessageItemView';
+export * from './Message/MessageItemView/MessageStatus';
+export * from './Message/MessageItemView/MessageTextContainer';
+export * from './Message/MessageItemView/MessageTimestamp';
+export * from './Message/MessageItemView/ReactionList/ReactionListBottom';
+export * from './Message/MessageItemView/ReactionList/ReactionListTop';
+export * from './Message/MessageItemView/ReactionList/ReactionListClustered';
+export * from './Message/MessageItemView/ReactionList/ReactionListItem';
+export * from './Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+export * from './Message/MessageItemView/utils/renderText';
 export * from './Message/utils/messageActions';
 export * from '../utils/removeReservedFields';
 
@@ -113,7 +115,7 @@ export * from './MessageInput/components/InputButtons/AttachButton';
 export * from './MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 export * from './MessageInput/components/OutputButtons/CooldownTimer';
 export * from './MessageInput/components/InputButtons';
-export * from './MessageInput/MessageInput';
+export * from './MessageInput/MessageComposer';
 export * from './MessageInput/MessageComposerLeadingView';
 export * from './MessageInput/MessageComposerTrailingView';
 export * from './MessageInput/MessageInputFooterView';
@@ -165,6 +167,7 @@ export * from './MessageMenu/MessageMenu';
 export * from './MessageMenu/MessageUserReactions';
 export * from './MessageMenu/MessageUserReactionsAvatar';
 export * from './MessageMenu/MessageReactionPicker';
+export * from './MessageMenu/utils/toUnicodeScalarString';
 export * from './MessageMenu/hooks/useFetchReactions';
 
 export * from './ProgressControl/ProgressControl';
@@ -186,5 +189,5 @@ export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
 export * from './ThreadList/ThreadList';
 
-export * from './Message/MessageSimple/StreamingMessageView';
+export * from './Message/MessageItemView/StreamingMessageView';
 export * from './AITypingIndicatorView';

package/src/components/ui/SpeedSettingsButton.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 
 import { Pressable, StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type SpeedSettingsButtonProps = {

package/src/components/ui/VideoPlayIndicator.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useTheme } from '../../contexts';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons/Play';
 import { primitives } from '../../theme';
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -12,11 +12,11 @@ import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPre
 import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
 import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
-import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
 import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
 import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
+import type { ChannelPreviewViewProps } from '../../components/ChannelPreview/ChannelPreviewView';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
@@ -28,7 +28,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue = {
   /**
-   * Besides the existing default behavior of the ChannelListMessenger component, you can attach
+   * Besides the existing default behavior of the ChannelListView component, you can attach
    * additional props to the underlying React Native FlatList.
    *
    * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
@@ -36,7 +36,7 @@ export type ChannelsContextValue = {
    * **EXAMPLE:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  channels={channels}
    *  additionalFlatListProps={{ bounces: true }}
    * />
@@ -124,9 +124,9 @@ export type ChannelsContextValue = {
   /**
    * Custom UI component to display individual channel list items
    *
-   * Default: [ChannelPreviewMessenger](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-messenger/)
+   * Default: [ChannelPreviewView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-view/)
    */
-  Preview: React.ComponentType<ChannelPreviewMessengerProps>;
+  Preview: React.ComponentType<ChannelPreviewViewProps>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -152,7 +152,7 @@ export type ChannelsContextValue = {
    * **Example:**
    *
    * ```
-   * <ChannelListMessenger
+   * <ChannelListView
    *  setFlatListRef={(ref) => {
    *    // Use ref for your own good
    *  }}

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -1,42 +1,17 @@
-import React, { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
-
-import { Attachment } from 'stream-chat';
+import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 
 import {
-  ImageGalleryFooterProps,
-  ImageGalleryVideoControlProps,
-} from '../../components/ImageGallery/components/ImageGalleryFooter';
+  ImageGalleryContext,
+  type ImageGalleryContextValue,
+  type ImageGalleryProviderProps,
+  useImageGalleryContext,
+} from './ImageGalleryContextBase';
+
 import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../components/ImageGallery/components/ImageGalleryFooter';
-import { ImageGalleryHeaderProps } from '../../components/ImageGallery/components/ImageGalleryHeader';
 import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../components/ImageGallery/components/ImageGalleryHeader';
 import { ImageGalleryVideoControl as ImageGalleryVideoControlDefault } from '../../components/ImageGallery/components/ImageGalleryVideoControl';
-import { ImageGalleryGridProps } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryGrid as ImageGalleryGridDefault } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
-import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
-
-import { isTestEnvironment } from '../utils/isTestEnvironment';
-
-export type ImageGalleryProviderProps = {
-  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']>;
-  numberOfImageGalleryGridColumns?: number;
-  ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
-  ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
-  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
-  ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
-};
-
-export type ImageGalleryContextValue = ImageGalleryProviderProps & {
-  imageGalleryStateStore: ImageGalleryStateStore;
-};
-
-export const ImageGalleryContext = React.createContext(
-  DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
-);
 
 export const ImageGalleryProvider = ({
   children,
@@ -72,15 +47,5 @@ export const ImageGalleryProvider = ({
     </ImageGalleryContext.Provider>
   );
 };
-
-export const useImageGalleryContext = () => {
-  const contextValue = useContext(ImageGalleryContext) as unknown as ImageGalleryContextValue;
-
-  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
-    throw new Error(
-      'The useImageGalleryContext hook was called outside the ImageGalleryContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider',
-    );
-  }
-
-  return contextValue as ImageGalleryContextValue;
-};
+export { ImageGalleryContext, useImageGalleryContext };
+export type { ImageGalleryContextValue, ImageGalleryProviderProps };

package/src/contexts/imageGalleryContext/ImageGalleryContextBase.tsx

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+
+import type { Attachment } from 'stream-chat';
+
+import type {
+  ImageGalleryFooterProps,
+  ImageGalleryGridProps,
+  ImageGalleryHeaderProps,
+  ImageGalleryVideoControlProps,
+} from '../../components/ImageGallery/components/types';
+import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type ImageGalleryProviderProps = {
+  autoPlayVideo?: boolean;
+  giphyVersion?: keyof NonNullable<Attachment['giphy']>;
+  numberOfImageGalleryGridColumns?: number;
+  ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
+  ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
+};
+
+export type ImageGalleryContextValue = ImageGalleryProviderProps & {
+  imageGalleryStateStore: ImageGalleryStateStore;
+};
+
+export const ImageGalleryContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ImageGalleryContextValue,
+);
+
+export const useImageGalleryContext = () => {
+  const contextValue = useContext(ImageGalleryContext) as unknown as ImageGalleryContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useImageGalleryContext hook was called outside the ImageGalleryContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider',
+    );
+  }
+
+  return contextValue as ImageGalleryContextValue;
+};

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
+import type { View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
@@ -56,6 +57,11 @@ export type MessageContextValue = {
   lastGroupMessage: boolean;
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: LocalMessage;
+  /**
+   * Ref to the view that the message context menu should align with.
+   * Custom message renderers can attach this to a different subview if needed.
+   */
+  contextMenuAnchorRef: React.RefObject<View | null>;
   /**
    * Stable UI-instance identifier for the rendered message.
    * Used for overlay state so two rendered instances of the same message do not collide.