stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/UIComponents/SwipableWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { I18nManager, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 import Animated, {
@@ -42,6 +42,8 @@ export type SwipableWrapperProps = PropsWithChildren<{
   swipableProps?: SwipeableProps;
 }>;
 
+type ActionSide = 'left' | 'right';
+
 export const getRightActionsLayout = (itemCount: number) => {
   if (!itemCount) {
     return { containerWidth: 0, itemWidth: 0 };
@@ -55,19 +57,27 @@ export const getRightActionsLayout = (itemCount: number) => {
 
 export const RightActions = ({
   items,
+  side,
   translation,
 }: {
   items: SwipableActionItem[];
+  side?: ActionSide;
   translation: SharedValue<number>;
 }) => {
+  const resolvedSide = side ?? (I18nManager.isRTL ? 'left' : 'right');
   const { containerWidth, itemWidth } = useMemo(
     () => getRightActionsLayout(items.length),
     [items.length],
   );
+  const actionItems = useMemo(
+    () => (resolvedSide === 'left' ? [...items].reverse() : items),
+    [items, resolvedSide],
+  );
+  const translationDirection = resolvedSide === 'right' ? -1 : 1;
 
   const animatedActionWidthStyle = useAnimatedStyle(() => ({
     width: interpolate(
-      -translation.value,
+      translationDirection * translation.value,
       [0, containerWidth, containerWidth + 40],
       [0, itemWidth, itemWidth + 8],
       Extrapolation.CLAMP,
@@ -78,7 +88,7 @@ export const RightActions = ({
     transform: [
       {
         scale: interpolate(
-          -translation.value,
+          translationDirection * translation.value,
           [0, containerWidth, containerWidth + 40],
           [0, 1, 1],
           Extrapolation.CLAMP,
@@ -88,8 +98,13 @@ export const RightActions = ({
   }));
 
   return (
-    <Animated.View style={[styles.rightActionsContainer, { width: containerWidth }]}>
-      {items.map((item) => {
+    <Animated.View
+      style={[
+        resolvedSide === 'left' ? styles.leftActionsContainer : styles.rightActionsContainer,
+        { width: containerWidth },
+      ]}
+    >
+      {actionItems.map((item) => {
         const Content = item.Content;
         return (
           <AnimatedPressable
@@ -110,6 +125,7 @@ export const RightActions = ({
 };
 
 export const SwipableWrapper = ({ children, swipeableId, swipableProps }: SwipableWrapperProps) => {
+  const isRTL = I18nManager.isRTL;
   const swipeRegistry = useSwipeRegistryContext();
   const swipeableRef = useRef<SwipeableMethods | null>(null);
 
@@ -128,28 +144,43 @@ export const SwipableWrapper = ({ children, swipeableId, swipableProps }: Swipab
       if (swipeRegistry && swipeableId) {
         swipeRegistry.notifyWillOpen(swipeableId);
       }
-      swipableProps?.onSwipeableWillOpen?.(direction);
+
+      swipableProps?.onSwipeableOpenStartDrag?.(direction);
     },
   );
 
-  const onSwipeableWillClose = useStableCallback(() => {
-    if (swipeableId) {
-      swipeRegistry?.updateOpenTracker(swipeableId, false);
-    }
-  });
+  const onSwipeableWillClose = useStableCallback(
+    (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => {
+      if (swipeableId) {
+        swipeRegistry?.updateOpenTracker(swipeableId, false);
+      }
+
+      swipableProps?.onSwipeableWillClose?.(direction);
+    },
+  );
+
+  const rtlAwareSwipeableProps = useMemo<SwipeableProps>(() => {
+    const { overshootLeft, overshootRight, renderLeftActions, renderRightActions, ...rest } =
+      swipableProps ?? {};
+
+    return {
+      ...rest,
+      overshootLeft: isRTL ? (overshootRight ?? true) : (overshootLeft ?? false),
+      overshootRight: isRTL ? (overshootLeft ?? false) : (overshootRight ?? true),
+      renderLeftActions: isRTL ? renderRightActions : renderLeftActions,
+      renderRightActions: isRTL ? renderLeftActions : renderRightActions,
+    };
+  }, [isRTL, swipableProps]);
 
   return (
     <ReanimatedSwipeable
       ref={swipeableRef}
-      onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
       animationOptions={animationOptions}
       friction={1.5}
+      onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
       onSwipeableWillClose={onSwipeableWillClose}
-      overshootLeft={false}
-      overshootRight={true}
       overshootFriction={16}
-      renderLeftActions={undefined}
-      {...swipableProps}
+      {...rtlAwareSwipeableProps}
     >
       {children}
     </ReanimatedSwipeable>
@@ -157,7 +188,14 @@ export const SwipableWrapper = ({ children, swipeableId, swipableProps }: Swipab
 };
 
 const styles = StyleSheet.create({
+  leftActionsContainer: {
+    direction: 'ltr',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    overflow: 'visible',
+  },
   rightActionsContainer: {
+    direction: 'ltr',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     overflow: 'visible',

package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { I18nManager, Text, View } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { SwipeRegistryProvider } from '../../../contexts/swipeableContext/SwipeRegistryContext';
+import { SwipableWrapper } from '../SwipableWrapper';
+
+const mockReanimatedSwipeable = jest.fn(({ children }: React.PropsWithChildren) => (
+  <View>{children}</View>
+));
+
+jest.mock('react-native-gesture-handler/ReanimatedSwipeable', () => ({
+  __esModule: true,
+  default: (...args: unknown[]) => mockReanimatedSwipeable(...args),
+  SwipeDirection: {
+    LEFT: 'left',
+    RIGHT: 'right',
+  },
+}));
+
+describe('SwipableWrapper', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  const renderWithRegistry = (ui: React.ReactElement) =>
+    render(<SwipeRegistryProvider>{ui}</SwipeRegistryProvider>);
+
+  beforeEach(() => {
+    mockReanimatedSwipeable.mockClear();
+  });
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
+  it('uses right-side overshoot defaults in ltr', () => {
+    setRTL(false);
+
+    renderWithRegistry(
+      <SwipableWrapper>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        overshootLeft: false,
+        overshootRight: true,
+      }),
+      undefined,
+    );
+  });
+
+  it('uses left-side overshoot defaults in rtl', () => {
+    setRTL(true);
+
+    renderWithRegistry(
+      <SwipableWrapper>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        overshootLeft: true,
+        overshootRight: false,
+      }),
+      undefined,
+    );
+  });
+
+  it('maps logical right actions to left actions in rtl', () => {
+    setRTL(true);
+
+    const renderRightActions = jest.fn(() => null);
+
+    renderWithRegistry(
+      <SwipableWrapper swipableProps={{ renderRightActions }}>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        renderLeftActions: renderRightActions,
+        renderRightActions: undefined,
+      }),
+      undefined,
+    );
+  });
+});

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';
@@ -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';
@@ -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';

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -10,7 +10,7 @@ import { iconSizes } from './constants';
 import { UserAvatar, UserAvatarProps } from './UserAvatar';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/PeopleIcon';
+import { PeopleIcon } from '../../../icons/users';
 import { primitives } from '../../../theme';
 import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge';
 

package/src/components/ui/Avatar/UserAvatar.tsx

@@ -8,7 +8,7 @@ import { Avatar, AvatarProps } from './Avatar';
 import { fontSizes, iconSizes, indicatorSizes, numberOfInitials } from './constants';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { PeopleIcon } from '../../../icons/PeopleIcon';
+import { PeopleIcon } from '../../../icons/users';
 import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils';
 import { OnlineIndicator } from '../Badge';
 

package/src/components/ui/Badge/ErrorBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Exclamation } from '../../../icons/Exclamation';
+import { Exclamation } from '../../../icons/exclamation-mark-fill';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -20,21 +20,6 @@ const sizes = {
   },
 };
 
-const iconSizes = {
-  xs: {
-    height: 8,
-    width: 2,
-  },
-  sm: {
-    height: 9,
-    width: 2,
-  },
-  md: {
-    height: 11,
-    width: 3,
-  },
-};
-
 export type ErrorBadgeProps = ViewProps & {
   /**
    * The size of the badge
@@ -59,8 +44,8 @@ export const ErrorBadge = (props: ErrorBadgeProps) => {
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
       <Exclamation
-        height={iconSizes[size].height}
-        width={iconSizes[size].width}
+        height={sizes[size].height}
+        width={sizes[size].width}
         fill={semantics.textOnAccent}
       />
     </View>

package/src/components/ui/Badge/GiphyBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Giphy } from '../../../icons/Giphy';
+import { Giphy } from '../../../icons/giphy';
 import { primitives } from '../../../theme';
 
 export const GiphyBadge = () => {

package/src/components/ui/Badge/ImgurBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Imgur } from '../../../icons/Imgur';
+import { Imgur } from '../../../icons/imgur';
 import { primitives } from '../../../theme';
 
 export const ImgurBadge = () => {
@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
       },
       text: {
-        color: semantics.badgeTextInverse,
+        color: semantics.badgeTextOnInverse,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/ui/Badge/RetryBadge.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { RotateCircle } from '../../../icons/RotateCircle';
+import { Reload } from '../../../icons/refresh';
 import { primitives } from '../../../theme';
 
 const sizes = {
@@ -50,7 +50,7 @@ export const RetryBadge = (props: RetryBadgeProps) => {
   const styles = useStyles();
   return (
     <View style={[styles.container, sizes[size], style]} {...rest}>
-      <RotateCircle
+      <Reload
         height={iconSizes[size].height}
         width={iconSizes[size].width}
         stroke={semantics.textOnAccent}

package/src/components/ui/Button/Button.tsx

@@ -76,6 +76,8 @@ export const Button = ({
 
   const LeftIcon = isRTL ? TrailingIcon : LeadingIcon;
   const RightIcon = isRTL ? LeadingIcon : TrailingIcon;
+  const IconOnlyIcon = LeadingIcon ?? TrailingIcon;
+  const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
 
   return (
     <View
@@ -109,8 +111,8 @@ export const Button = ({
         disabled={disabled}
         {...rest}
       >
-        {LeftIcon ? (
-          <LeftIcon
+        {PrimaryIcon ? (
+          <PrimaryIcon
             height={20}
             width={20}
             strokeWidth={1.5}

package/src/components/ui/GiphyChip.tsx

@@ -6,8 +6,8 @@ import { TextComposerState } from 'stream-chat';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Cross } from '../../icons/Cross';
-import { Lightning } from '../../icons/Lightning';
+import { Lightning } from '../../icons/bolt';
+import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textInverse} height={16} width={16} />
+      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textInverse} height={16} width={16} />
+        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );
@@ -59,7 +59,7 @@ const useStyles = () => {
           height: 24,
         },
         text: {
-          color: semantics.textInverse,
+          color: semantics.textOnInverse,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,

package/src/components/ui/Input/Input.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/Checkmark';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { Checkmark } from '../../../icons/checkmark-1';
+import { InfoTooltip } from '../../../icons/info';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -166,12 +166,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       inputContainer: {
         alignItems: 'center',
@@ -190,6 +192,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       helperContainer: {
         alignItems: 'center',
@@ -201,6 +204,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

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,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useTheme } from '../../contexts';
-import { Play } from '../../icons/Play';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {

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.

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -56,6 +56,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
   createDraftAttachmentsCompositionMiddleware,
+  setupVideoAttachmentPreviewMiddleware,
 } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
@@ -98,7 +99,7 @@ export type LocalMessageInputContext = {
   audioRecorderManager: AudioRecorderManager;
   startVoiceRecording: () => Promise<boolean | undefined>;
   deleteVoiceRecording: () => Promise<void>;
-  uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
+  uploadVoiceRecording: (sendOnComplete: boolean) => Promise<void>;
   stopVoiceRecording: () => Promise<void>;
 };
 
@@ -114,10 +115,11 @@ export type InputMessageInputContextValue = {
    */
   asyncMessagesMinimumPressDuration: number;
   /**
-   * When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer
-   * allowing the user to send multiple voice recording as part of the same message.
+   * Controls whether a completed voice recording is sent immediately or added to the composer first.
+   * When true, the recording is sent immediately on completion.
+   * When false, the recording is added to the composer and only sent if the user decides to.
    */
-  asyncMessagesMultiSendEnabled: boolean;
+  audioRecordingSendOnComplete: boolean;
   /**
    * Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice
    * message.
@@ -423,6 +425,8 @@ export const MessageInputProvider = ({
       attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
+    setupVideoAttachmentPreviewMiddleware(messageComposer);
+
     if (allowSendBeforeAttachmentsUpload) {
       messageComposer.compositionMiddlewareExecutor.replace([
         createAttachmentsCompositionMiddleware(messageComposer),