stream-chat-react-native-core 9.0.0-beta.3 → 9.0.0-beta.30

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/Button/hooks/useButtonStyles.ts

@@ -79,7 +79,7 @@ export const useButtonStyles = ({ variant, type }: ButtonStylesConfig) => {
         borderColor: semantics.buttonSecondaryBorder,
         disabledForegroundColor: semantics.textDisabled,
         disabledBackgroundColor: undefined,
-        disabledBorderColor: semantics.buttonSecondaryBorder,
+        disabledBorderColor: semantics.borderUtilityDisabled,
       },
       secondaryGhost: {
         foregroundColor: semantics.buttonSecondaryText,

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/bottomSheetContext/BottomSheetContext.tsx

@@ -8,6 +8,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 export type BottomSheetContextValue = {
   close: (closeAnimationFinishedCallback?: () => void) => void;
   currentSnapIndex: SharedValue<number>;
+  topSnapIndex: SharedValue<number>;
 };
 
 export const BottomSheetContext = React.createContext(

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/messageComposerContext/MessageComposerContext.tsx

@@ -8,7 +8,7 @@ import {
 } from './MessageComposerAPIContext';
 
 import { ChannelProps } from '../../components';
-import { useStableCallback } from '../../hooks';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useCreateMessageComposer } from '../messageInputContext/hooks/useCreateMessageComposer';
 import { ThreadContextValue } from '../threadContext/ThreadContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren, useContext } from 'react';
+import type { View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
-import { ReactionSummary } from '../../components/Message/hooks/useProcessReactions';
+import type { ReactionSummary } from '../../components/Message/hooks/useProcessReactions';
 import type {
   MessagePressableHandlerPayload,
   PressableHandlerPayload,
@@ -14,7 +15,7 @@ import type { MessageContentType } from '../../contexts/messagesContext/Messages
 import type { DeepPartial } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 
-import { MessageComposerAPIContextValue } from '../messageComposerContext/MessageComposerAPIContext';
+import type { MessageComposerAPIContextValue } from '../messageComposerContext/MessageComposerAPIContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 export type Alignment = 'right' | 'left';
@@ -39,6 +40,8 @@ export type MessageContextValue = {
   groupStyles: GroupType[];
   /** Handler for actions. Actions in combination with attachments can be used to build [commands](https://getstream.io/chat/docs/#channel_commands). */
   handleAction: ActionHandler;
+  /** Whether or not any message attachment exposes actions. */
+  hasAttachmentActions: boolean;
   handleToggleReaction: (reactionType: string) => Promise<void>;
   /** Whether or not message has reactions */
   hasReactions: boolean;
@@ -56,6 +59,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

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Alert, Linking, Platform, TextInput, TextInputProps } from 'react-native';
+import { Alert, Linking, TextInput, TextInputProps } from 'react-native';
 
 import { lookup as lookupMimeType } from 'mime-types';
 import {
@@ -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),
@@ -536,19 +540,9 @@ export const MessageInputProvider = ({
    */
   const openAttachmentPicker = useCallback(() => {
     dismissKeyboard();
-    const run = () => {
-      attachmentPickerStore.setSelectedPicker('images');
-      openPicker();
-    };
-
-    if (Platform.OS === 'android') {
-      setTimeout(() => {
-        run();
-      }, 200);
-    } else {
-      run();
-    }
-  }, [openPicker, attachmentPickerStore]);
+    attachmentPickerStore.setSelectedPicker('images');
+    openPicker();
+  }, [attachmentPickerStore, openPicker]);
 
   /**
    * Function to close the attachment picker if the MediaLibrary is installed.

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -7,8 +7,8 @@ export const useCreateMessageInputContext = ({
   additionalTextInputProps,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
-  asyncMessagesMultiSendEnabled,
   asyncMessagesSlideToCancelDistance,
+  audioRecordingSendOnComplete,
   AttachButton,
   attachmentPickerBottomSheetHeight,
   AttachmentPickerSelectionBar,
@@ -86,8 +86,8 @@ export const useCreateMessageInputContext = ({
       additionalTextInputProps,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
-      asyncMessagesMultiSendEnabled,
       asyncMessagesSlideToCancelDistance,
+      audioRecordingSendOnComplete,
       AttachButton,
       attachmentPickerBottomSheetHeight,
       AttachmentPickerSelectionBar,

package/src/contexts/overlayContext/ClosingPortalHostsLayer.tsx

@@ -36,7 +36,7 @@ const ClosingPortalHostSlot = ({
       style={style}
       testID={`closing-portal-host-slot-${hostName}`}
     >
-      <PortalHost name={hostName} style={StyleSheet.absoluteFillObject} />
+      <PortalHost name={hostName} style={styles.absoluteFill} />
     </Animated.View>
   );
 };
@@ -76,3 +76,13 @@ export const ClosingPortalHostsLayer = ({ closeCoverOpacity }: ClosingPortalHost
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});