stream-chat-react-native-core 3.10.2-next.1 → 4.0.0-beta.3

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
-import Dayjs from 'dayjs';
+
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -8,18 +8,15 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
-import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
-import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
-import { ThemeProvider } from '../themeContext/ThemeContext';
-import {
-  TranslationContextValue,
-  TranslationProvider,
-} from '../translationContext/TranslationContext';
+import type BottomSheet from '@gorhom/bottom-sheet';
+import Dayjs from 'dayjs';
+
+import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import { AttachmentPicker } from '../../components/AttachmentPicker/AttachmentPicker';
-import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
+
 import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../../components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
+import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
@@ -27,12 +24,9 @@ import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent }
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
+import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
+import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
-import { BlurView } from '../../native';
-
-import type BottomSheet from '@gorhom/bottom-sheet';
-
-import { BlurType, OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import type {
   DefaultAttachmentType,
@@ -44,6 +38,14 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
+import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
+import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
+import { ThemeProvider } from '../themeContext/ThemeContext';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../translationContext/TranslationContext';
 
 /**
  * - The highest level of these components is the `OverlayProvider`. The `OverlayProvider` allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the `AttachmentPicker` as a keyboard-esk view.
@@ -100,13 +102,15 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActions,
+    MessageActionList,
+    MessageActionListItem,
+    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
     openPicker = (ref) => {
-      if (ref.current) {
-        ref.current.snapTo(0);
+      if (ref.current?.snapToIndex) {
+        ref.current.snapToIndex(0);
       } else {
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
@@ -115,6 +119,7 @@ export const OverlayProvider = <
     translucentStatusBar,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     value,
   } = props;
 
@@ -139,7 +144,6 @@ export const OverlayProvider = <
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
-  const [blurType, setBlurType] = useState<BlurType>();
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
@@ -151,7 +155,6 @@ export const OverlayProvider = <
   useEffect(() => {
     const backAction = () => {
       if (overlay !== 'none') {
-        setBlurType(undefined);
         setOverlay('none');
         return true;
       }
@@ -166,7 +169,7 @@ export const OverlayProvider = <
 
   useEffect(() => {
     if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+      bottomSheetRef.current.close?.();
     }
     cancelAnimation(overlayOpacity);
     if (overlay !== 'none') {
@@ -200,7 +203,6 @@ export const OverlayProvider = <
 
   const overlayContext = {
     overlay,
-    setBlurType,
     setOverlay,
     style: value?.style,
     translucentStatusBar,
@@ -214,32 +216,36 @@ export const OverlayProvider = <
         <MessageOverlayProvider<At, Ch, Co, Ev, Me, Re, Us>>
           <AttachmentPickerProvider value={attachmentPickerContext}>
             <ImageGalleryProvider>
-              {children}
+              <ChannelsStateProvider<At, Ch, Co, Ev, Me, Re, Us>>{children}</ChannelsStateProvider>
               <ThemeProvider style={overlayContext.style}>
                 <Animated.View
                   pointerEvents={overlay === 'none' ? 'none' : 'auto'}
                   style={[StyleSheet.absoluteFill, overlayStyle]}
                 >
-                  <BlurView
-                    blurType={blurType}
-                    style={[StyleSheet.absoluteFill, { height, width }]}
-                  />
+                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
                 </Animated.View>
-                <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
-                  MessageActions={MessageActions}
-                  overlayOpacity={overlayOpacity}
-                  OverlayReactionList={OverlayReactionList}
-                  OverlayReactions={OverlayReactions}
-                  visible={overlay === 'message'}
-                />
-                <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
-                  imageGalleryCustomComponents={imageGalleryCustomComponents}
-                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                  overlayOpacity={overlayOpacity}
-                  visible={overlay === 'gallery'}
-                />
+                {overlay === 'message' && (
+                  <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
+                    MessageActionList={MessageActionList}
+                    MessageActionListItem={MessageActionListItem}
+                    messageTextNumberOfLines={messageTextNumberOfLines}
+                    overlayOpacity={overlayOpacity}
+                    OverlayReactionList={OverlayReactionList}
+                    OverlayReactions={OverlayReactions}
+                    OverlayReactionsAvatar={OverlayReactionsAvatar}
+                    visible={overlay === 'message'}
+                  />
+                )}
+                {overlay === 'gallery' && (
+                  <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
+                    imageGalleryCustomComponents={imageGalleryCustomComponents}
+                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                    overlayOpacity={overlayOpacity}
+                    visible={overlay === 'gallery'}
+                  />
+                )}
                 <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
               </ThemeProvider>
             </ImageGalleryProvider>

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+export const allOwnCapabilities = {
+  banChannelMembers: 'ban-channel-members',
+  deleteAnyMessage: 'delete-any-message',
+  deleteOwnMessage: 'delete-own-message',
+  flagMessage: 'flag-message',
+  pinMessage: 'pin-message',
+  quoteMessage: 'quote-message',
+  readEvents: 'read-events',
+  sendLinks: 'send-links',
+  sendMessage: 'send-message',
+  sendReaction: 'send-reaction',
+  sendReply: 'send-reply',
+  sendTypingEvents: 'send-typing-events',
+  updateAnyMessage: 'update-any-message',
+  updateOwnMessage: 'update-own-message',
+  uploadFile: 'upload-file',
+};
+
+export type OwnCapability = keyof typeof allOwnCapabilities;
+
+export type OwnCapabilitiesContextValue = Record<OwnCapability, boolean>;
+export const OwnCapabilitiesContext = React.createContext({} as OwnCapabilitiesContextValue);
+
+export const OwnCapabilitiesProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: OwnCapabilitiesContextValue;
+}>) => (
+  <OwnCapabilitiesContext.Provider value={value as unknown as OwnCapabilitiesContextValue}>
+    {children}
+  </OwnCapabilitiesContext.Provider>
+);
+
+export const useOwnCapabilitiesContext = () =>
+  useContext(OwnCapabilitiesContext) as unknown as OwnCapabilitiesContextValue;

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type PaginatedMessageListContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,16 +1,15 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
+import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data/compiled';
 import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
-export type SuggestionComponentType<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = string | React.ReactElement<{ item: Suggestion<Co, Us> }>;
+export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 
 export const isSuggestionCommand = <
   Co extends string = DefaultCommandType,
@@ -36,10 +35,9 @@ export const isSuggestionUser = <
 export type Suggestion<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
-> = SuggestionCommand<Co> | SuggestionUser<Us> | Emoji;
+> = Emoji | SuggestionCommand<Co> | SuggestionUser<Us>;
 
 export type SuggestionCommand<Co extends string = DefaultCommandType> = CommandResponse<Co>;
-
 export type SuggestionUser<Us extends UnknownType = DefaultUserType> = UserResponse<Us>;
 
 export type Suggestions<
@@ -48,41 +46,35 @@ export type Suggestions<
 > = {
   data: Suggestion<Co, Us>[];
   onSelect: (item: Suggestion<Co, Us>) => void;
+  queryText?: string;
 };
 
 export type SuggestionsContextValue<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
 > = {
+  AutoCompleteSuggestionHeader: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
+  AutoCompleteSuggestionItem: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
+  AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps<Co, Us>>;
   /** Override handler for closing suggestions (mentions, command autocomplete etc) */
   closeSuggestions: () => void;
   /**
    * Override handler for opening suggestions (mentions, command autocomplete etc)
    *
    * @param component {Component|element} UI Component for suggestion item.
-   * @param title {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  openSuggestions: (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => Promise<void>;
+  openSuggestions: (component: SuggestionComponentType) => Promise<void>;
+  suggestions: Suggestions<Co, Us>;
+  triggerType: SuggestionComponentType;
   /**
    * Override handler for updating suggestions (mentions, command autocomplete etc)
    *
    * @param newSuggestions {Component|element} UI Component for suggestion item.
-   * @param newSuggestionsTitle {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  updateSuggestions: (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => void;
-  componentType?: SuggestionComponentType<Co, Us>;
-  suggestions?: Suggestions<Co, Us>;
-  suggestionsTitle?: React.ReactElement;
+  updateSuggestions: (newSuggestions: Suggestions<Co, Us>) => void;
+  queryText?: string;
   suggestionsViewActive?: boolean;
 };
 
@@ -98,46 +90,34 @@ export const SuggestionsProvider = <
   children,
   value,
 }: PropsWithChildren<{ value?: Partial<SuggestionsContextValue<Co, Us>> }>) => {
-  const [componentType, setComponentType] = useState<SuggestionComponentType<Co, Us>>('');
+  const [triggerType, setTriggerType] = useState<SuggestionComponentType | null>(null);
   const [suggestions, setSuggestions] = useState<Suggestions<Co, Us>>();
-  const [suggestionsTitle, setSuggestionsTitle] = useState<React.ReactElement>();
   const [suggestionsViewActive, setSuggestionsViewActive] = useState(false);
 
-  const openSuggestions = (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => {
-    setComponentType(component);
-    setSuggestionsTitle(title);
+  const openSuggestions = (component: SuggestionComponentType) => {
+    setTriggerType(component);
     setSuggestionsViewActive(true);
   };
 
-  const updateSuggestions = (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => {
+  const updateSuggestions = (newSuggestions: Suggestions<Co, Us>) => {
     setSuggestions(newSuggestions);
-    if (newSuggestionsTitle) {
-      setSuggestionsTitle(newSuggestionsTitle);
-    }
-    setSuggestionsViewActive(!!componentType);
+    setSuggestionsViewActive(!!triggerType);
   };
 
   const closeSuggestions = () => {
-    setComponentType('');
+    setTriggerType(null);
     setSuggestions(undefined);
-    setSuggestionsTitle(undefined);
     setSuggestionsViewActive(false);
   };
 
   const suggestionsContext = {
-    closeSuggestions: value?.closeSuggestions || closeSuggestions,
-    componentType,
-    openSuggestions: value?.openSuggestions || openSuggestions,
+    ...value,
+    closeSuggestions,
+    openSuggestions,
     suggestions,
-    suggestionsTitle,
     suggestionsViewActive,
-    updateSuggestions: value?.updateSuggestions || updateSuggestions,
+    triggerType,
+    updateSuggestions,
   };
 
   return (

package/src/contexts/suggestionsContext/__tests__/Suggestions.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
+
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { SuggestionsProvider, useSuggestionsContext } from '../SuggestionsContext';
@@ -39,7 +40,6 @@ describe('SuggestionsProvider', () => {
     await waitFor(() => {
       expect(context).toBeInstanceOf(Object);
       expect(context.closeSuggestions).toBeInstanceOf(Function);
-      expect(typeof context.componentType).toBe('string');
       expect(context.openSuggestions).toBeInstanceOf(Function);
       expect(typeof context.suggestionsViewActive).toBe('boolean');
       expect(context.updateSuggestions).toBeInstanceOf(Function);

package/src/contexts/themeContext/ThemeContext.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useMemo } from 'react';
+
 import merge from 'lodash/merge';
 
 import { defaultTheme, Theme } from './utils/theme';

package/src/contexts/themeContext/utils/theme.ts

@@ -1,9 +1,8 @@
-import { vh } from '../../../utils/utils';
-
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { CircleProps, Color, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
+import { vh } from '../../../utils/utils';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
 
@@ -17,12 +16,12 @@ export const Colors = {
   blue_alice: '#E9F2FF',
   border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
   grey: '#7A7A7A',
+  grey_dark: '#72767E',
   grey_gainsboro: '#DBDBDB',
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
-  overlay: '#00000033', // 33 = 20% opacity
-  overlay_dark: '#00000099', // 99 = 60% opacity
+  overlay: '#000000CC', // CC = 80% opacity
   shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
   targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
   transparent: 'transparent',
@@ -135,6 +134,11 @@ export type Theme = {
     message: TextStyle & {
       fontWeight: TextStyle['fontWeight'];
     };
+    mutedStatus: {
+      height: number;
+      iconStyle: ViewStyle;
+      width: number;
+    };
     row: ViewStyle;
     title: TextStyle;
     unreadContainer: ViewStyle;
@@ -164,7 +168,6 @@ export type Theme = {
     image: ImageStyle;
   };
   imageGallery: {
-    blurType: 'light' | 'dark';
     footer: {
       centerContainer: ViewStyle;
       container: ViewStyle;
@@ -220,6 +223,10 @@ export type Theme = {
     commandsButtonContainer: ViewStyle;
     composerContainer: ViewStyle;
     container: ViewStyle;
+    cooldownTimer: {
+      container: ViewStyle;
+      text: TextStyle;
+    };
     editingBoxContainer: ViewStyle;
     editingBoxHeader: ViewStyle;
     editingBoxHeaderTitle: TextStyle;
@@ -247,6 +254,10 @@ export type Theme = {
     replyContainer: ViewStyle;
     sendButton: ViewStyle;
     sendButtonContainer: ViewStyle;
+    sendMessageDisallowedIndicator: {
+      container: ViewStyle;
+      text: TextStyle;
+    };
     showThreadMessageInChannelButton: {
       check: IconProps;
       checkBoxActive: ViewStyle;
@@ -262,10 +273,6 @@ export type Theme = {
         iconContainer: ViewStyle;
         title: TextStyle;
       };
-      commandsHeader: {
-        container: ViewStyle;
-        title: TextStyle;
-      };
       container: ViewStyle & {
         maxHeight: number;
       };
@@ -273,7 +280,7 @@ export type Theme = {
         container: ViewStyle;
         text: TextStyle;
       };
-      emojisHeader: {
+      header: {
         container: ViewStyle;
         title: TextStyle;
       };
@@ -286,7 +293,10 @@ export type Theme = {
         tag: TextStyle;
       };
     };
-    suggestionsListContainer: ViewStyle;
+    suggestionsListContainer: {
+      container: ViewStyle;
+      flatlist: ViewStyle;
+    };
     uploadProgressIndicator: {
       container: ViewStyle;
       overlay: ViewStyle;
@@ -395,13 +405,16 @@ export type Theme = {
     gallery: {
       galleryContainer: ViewStyle;
       galleryItemColumn: ViewStyle;
-      halfSize: ViewStyle['height'];
+      gridHeight: number;
+      gridWidth: number;
       image: ImageStyle;
       imageContainer: ViewStyle;
+      maxHeight: number;
+      maxWidth: number;
+      minHeight: number;
+      minWidth: number;
       moreImagesContainer: ViewStyle;
       moreImagesText: TextStyle;
-      size: ViewStyle['height'];
-      width: ViewStyle['width'];
     };
     giphy: {
       cancel: TextStyle;
@@ -418,6 +431,10 @@ export type Theme = {
       shuffleButton: ViewStyle;
       title: TextStyle;
     };
+    pinnedHeader: {
+      container: ViewStyle;
+      label: TextStyle;
+    };
     reactionList: {
       container: ViewStyle;
       middleIcon: ViewStyle;
@@ -449,6 +466,12 @@ export type Theme = {
     targetedMessageUnderlay: ViewStyle;
   };
   overlay: {
+    container: ViewStyle;
+    messageActions: {
+      actionContainer: ViewStyle;
+      icon: ViewStyle;
+      title: TextStyle;
+    };
     padding: number;
     reactions: {
       avatarContainer: ViewStyle;
@@ -569,6 +592,11 @@ export const defaultTheme: Theme = {
     message: {
       fontWeight: '400',
     },
+    mutedStatus: {
+      height: 20,
+      iconStyle: {},
+      width: 20,
+    },
     row: {},
     title: {},
     unreadContainer: {},
@@ -602,7 +630,6 @@ export const defaultTheme: Theme = {
     image: {},
   },
   imageGallery: {
-    blurType: 'light',
     footer: {
       centerContainer: {},
       container: {},
@@ -657,6 +684,10 @@ export const defaultTheme: Theme = {
     commandsButtonContainer: {},
     composerContainer: {},
     container: {},
+    cooldownTimer: {
+      container: {},
+      text: {},
+    },
     editingBoxContainer: {},
     editingBoxHeader: {},
     editingBoxHeaderTitle: {},
@@ -684,6 +715,10 @@ export const defaultTheme: Theme = {
     replyContainer: {},
     sendButton: {},
     sendButtonContainer: {},
+    sendMessageDisallowedIndicator: {
+      container: {},
+      text: {},
+    },
     showThreadMessageInChannelButton: {
       check: {},
       checkBoxActive: {},
@@ -699,10 +734,6 @@ export const defaultTheme: Theme = {
         iconContainer: {},
         title: {},
       },
-      commandsHeader: {
-        container: {},
-        title: {},
-      },
       container: {
         maxHeight: vh(25),
       },
@@ -710,7 +741,7 @@ export const defaultTheme: Theme = {
         container: {},
         text: {},
       },
-      emojisHeader: {
+      header: {
         container: {},
         title: {},
       },
@@ -723,7 +754,10 @@ export const defaultTheme: Theme = {
         tag: {},
       },
     },
-    suggestionsListContainer: {},
+    suggestionsListContainer: {
+      container: {},
+      flatlist: {},
+    },
     uploadProgressIndicator: {
       container: {},
       overlay: {},
@@ -862,13 +896,16 @@ export const defaultTheme: Theme = {
     gallery: {
       galleryContainer: {},
       galleryItemColumn: {},
-      halfSize: 100,
+      gridHeight: 195,
+      gridWidth: 256,
       image: {},
       imageContainer: {},
+      maxHeight: 300,
+      maxWidth: 256,
+      minHeight: 100,
+      minWidth: 170,
       moreImagesContainer: {},
       moreImagesText: {},
-      size: 200,
-      width: 250,
     },
     giphy: {
       cancel: {},
@@ -885,6 +922,10 @@ export const defaultTheme: Theme = {
       shuffleButton: {},
       title: {},
     },
+    pinnedHeader: {
+      container: {},
+      label: {},
+    },
     reactionList: {
       container: {},
       middleIcon: {},
@@ -924,6 +965,12 @@ export const defaultTheme: Theme = {
     targetedMessageUnderlay: {},
   },
   overlay: {
+    container: {},
+    messageActions: {
+      actionContainer: {},
+      icon: {},
+      title: {},
+    },
     padding: 8,
     reactions: {
       avatarContainer: {},

package/src/contexts/threadContext/ThreadContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
@@ -15,6 +13,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ThreadContextValue<
   At extends UnknownType = DefaultAttachmentType,