stream-chat-react-native-core 5.28.0-beta.3 → 5.28.0-beta.5

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,14 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  Dimensions,
-  Image,
-  ImageStyle,
-  Keyboard,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import { Image, ImageStyle, Keyboard, Platform, StyleSheet, ViewStyle } from 'react-native';
 
 import {
   PanGestureHandler,
@@ -26,7 +17,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { BottomSheetModal, BottomSheetModalProvider, BottomSheetProps } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 import type { UserResponse } from 'stream-chat';
 
@@ -63,7 +54,6 @@ import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
-const fullScreenHeight = Dimensions.get('screen').height;
 
 const MARGIN = 32;
 
@@ -132,29 +122,6 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
       | 'autoPlayVideo'
     >;
 
-type SnapPoints = BottomSheetProps['snapPoints'];
-
-const normalizeSnapPoints = (input: SnapPoints): SnapPoints => {
-  const snapPoints = input ? ('value' in input ? input.value : input) : [];
-
-  return snapPoints.map((snapPoint) => {
-    if (typeof snapPoint === 'number') {
-      return Math.max(0, snapPoint);
-    } else {
-      const numericValue = Number(snapPoint.replace('%', ''));
-      const isPercentage = snapPoint.includes('%');
-
-      if (isNaN(numericValue)) {
-        return 0;
-      } else if (isPercentage) {
-        return `${Math.max(0, numericValue)}%`;
-      } else {
-        return Math.max(0, numericValue);
-      }
-    }
-  });
-};
-
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -179,35 +146,20 @@ export const ImageGallery = <
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
-  const { overlay, translucentStatusBar } = useOverlayContext();
+  const { overlay } = useOverlayContext();
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
   const { vh, vw } = useViewport();
 
-  const measuredScreenHeight = vh(100);
-  const screenWidth = vw(100);
-  const halfScreenWidth = vw(50);
+  const fullWindowHeight = vh(100);
+  const fullWindowWidth = vw(100);
+  const halfScreenWidth = fullWindowWidth / 2;
 
-  /**
-   * Height constants
-   */
-  const statusBarHeight = StatusBar.currentHeight ?? 0;
-  const bottomBarHeight = fullScreenHeight - measuredScreenHeight - statusBarHeight;
-  const androidScreenHeightAdjustment = translucentStatusBar
-    ? bottomBarHeight === statusBarHeight || bottomBarHeight < 0
-      ? 0
-      : statusBarHeight
-    : bottomBarHeight === statusBarHeight || bottomBarHeight < 0
-    ? -statusBarHeight
-    : 0;
-  const screenHeight = isAndroid
-    ? Dimensions.get('window').height + androidScreenHeightAdjustment
-    : vh(100);
-  const halfScreenHeight = screenHeight / 2;
-  const quarterScreenHeight = screenHeight / 4;
+  const halfScreenHeight = fullWindowHeight / 2;
+  const quarterScreenHeight = fullWindowHeight / 4;
   const snapPoints = React.useMemo(
-    () => [(screenHeight * 3) / 4, screenHeight - (imageGalleryGridHandleHeight ?? 40)],
+    () => [(fullWindowHeight * 3) / 4, fullWindowHeight - imageGalleryGridHandleHeight],
     [],
   );
 
@@ -226,7 +178,7 @@ export const ImageGallery = <
    * Fade animation for screen, it is always rendered with pointerEvents
    * set to none for fast opening
    */
-  const screenTranslateY = useSharedValue(screenHeight);
+  const screenTranslateY = useSharedValue(fullWindowHeight);
   const showScreen = () => {
     'worklet';
     screenTranslateY.value = withTiming(0, {
@@ -246,7 +198,7 @@ export const ImageGallery = <
   /**
    * Image height from URL or default to full screen height
    */
-  const [currentImageHeight, setCurrentImageHeight] = useState<number>(screenHeight);
+  const [currentImageHeight, setCurrentImageHeight] = useState<number>(fullWindowHeight);
 
   /**
    * JS and UI index values, the JS follows the UI but is needed
@@ -321,9 +273,9 @@ export const ImageGallery = <
           a.type === 'giphy'
             ? giphyURL
             : getResizedImageUrl({
-                height: screenHeight,
+                height: fullWindowHeight,
                 url: imageUrl,
-                width: screenWidth,
+                width: fullWindowWidth,
               }),
         user: cur.user,
         user_id: cur.user_id,
@@ -360,7 +312,7 @@ export const ImageGallery = <
 
       if (newIndex > -1) {
         index.value = newIndex;
-        translationX.value = -(screenWidth + MARGIN) * newIndex;
+        translationX.value = -(fullWindowWidth + MARGIN) * newIndex;
         runOnJS(setSelectedIndex)(newIndex);
       }
     };
@@ -383,19 +335,19 @@ export const ImageGallery = <
   const uriForCurrentImage = imageGalleryAttachments[selectedIndex]?.uri;
 
   useEffect(() => {
-    setCurrentImageHeight(screenHeight);
+    setCurrentImageHeight(fullWindowHeight);
     const photo = imageGalleryAttachments[index.value];
     const height = photo?.original_height;
     const width = photo?.original_width;
 
     if (height && width) {
-      const imageHeight = Math.floor(height * (screenWidth / width));
-      setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+      const imageHeight = Math.floor(height * (fullWindowWidth / width));
+      setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
     } else if (photo?.uri) {
       if (photo.type === 'image') {
         Image.getSize(photo.uri, (width, height) => {
-          const imageHeight = Math.floor(height * (screenWidth / width));
-          setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+          const imageHeight = Math.floor(height * (fullWindowWidth / width));
+          setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
         });
       }
     }
@@ -410,8 +362,8 @@ export const ImageGallery = <
     overlayOpacity,
     photoLength,
     scale,
-    screenHeight,
-    screenWidth,
+    screenHeight: fullWindowHeight,
+    screenWidth: fullWindowWidth,
     selectedIndex,
     setSelectedIndex,
     translateX,
@@ -425,9 +377,9 @@ export const ImageGallery = <
    */
   const headerFooterOpacity = useDerivedValue(
     () =>
-      currentImageHeight * scale.value < screenHeight && translateY.value > 0
+      currentImageHeight * scale.value < fullWindowHeight && translateY.value > 0
         ? 1 - translateY.value / quarterScreenHeight
-        : currentImageHeight * scale.value > screenHeight &&
+        : currentImageHeight * scale.value > fullWindowHeight &&
           translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
         ? 1 -
           (translateY.value - ((currentImageHeight / 2) * scale.value - halfScreenHeight)) /
@@ -614,15 +566,15 @@ export const ImageGallery = <
                               previous={selectedIndex > i}
                               repeat={true}
                               scale={scale}
-                              screenHeight={screenHeight}
+                              screenHeight={fullWindowHeight}
                               selected={selectedIndex === i}
                               shouldRender={Math.abs(selectedIndex - i) < 4}
                               source={{ uri: photo.uri }}
                               style={[
                                 {
-                                  height: screenHeight * 8,
+                                  height: fullWindowHeight * 8,
                                   marginRight: MARGIN,
-                                  width: screenWidth * 8,
+                                  width: fullWindowWidth * 8,
                                 },
                                 slide,
                               ]}
@@ -639,14 +591,14 @@ export const ImageGallery = <
                               photo={photo}
                               previous={selectedIndex > i}
                               scale={scale}
-                              screenHeight={screenHeight}
+                              screenHeight={fullWindowHeight}
                               selected={selectedIndex === i}
                               shouldRender={Math.abs(selectedIndex - i) < 4}
                               style={[
                                 {
-                                  height: screenHeight * 8,
+                                  height: fullWindowHeight * 8,
                                   marginRight: MARGIN,
-                                  width: screenWidth * 8,
+                                  width: fullWindowWidth * 8,
                                 },
                                 slide,
                               ]}
@@ -704,11 +656,11 @@ export const ImageGallery = <
               {...imageGalleryCustomComponents?.gridHandle}
             />
           )}
-          handleHeight={imageGalleryGridHandleHeight ?? 40}
+          handleHeight={imageGalleryGridHandleHeight}
           index={0}
           onChange={(index: number) => setCurrentBottomSheetIndex(index)}
           ref={bottomSheetModalRef}
-          snapPoints={normalizeSnapPoints(imageGalleryGridSnapPoints || snapPoints)}
+          snapPoints={imageGalleryGridSnapPoints || snapPoints}
         >
           <ImageGrid
             closeGridView={closeGridView}

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,14 +1,5 @@
 import React, { useState } from 'react';
-import {
-  Platform,
-  Pressable,
-  SafeAreaView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
@@ -108,7 +99,7 @@ export const ImageGalleryHeader = <
     },
   } = useTheme();
   const { t, tDateTimeParser } = useTranslationContext();
-  const { setOverlay, translucentStatusBar } = useOverlayContext();
+  const { setOverlay } = useOverlayContext();
 
   const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
@@ -146,11 +137,6 @@ export const ImageGalleryHeader = <
     ],
   }));
 
-  const androidTranslucentHeaderStyle = {
-    paddingTop:
-      Platform.OS === 'android' && translucentStatusBar ? StatusBar.currentHeight : undefined,
-  };
-
   const hideOverlay = () => {
     setOverlay('none');
   };
@@ -160,9 +146,7 @@ export const ImageGalleryHeader = <
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView
-        style={[{ backgroundColor: white }, androidTranslucentHeaderStyle, container, headerStyle]}
-      >
+      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
         <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })

package/src/components/MessageInput/MessageInput.tsx

@@ -12,7 +12,10 @@ import type { UserResponse } from 'stream-chat';
 import { useCountdown } from './hooks/useCountdown';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
-import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import {
+  AttachmentPickerContextValue,
+  useAttachmentPickerContext,
+} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -38,7 +41,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
-import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
 const styles = StyleSheet.create({
@@ -80,7 +82,8 @@ const styles = StyleSheet.create({
 
 type MessageInputPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
+> = Pick<AttachmentPickerContextValue, 'AttachmentPickerSelectionBar'> &
+  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
   Pick<
     ChannelContextValue<StreamChatGenerics>,
     'disabled' | 'members' | 'threadList' | 'watchers'
@@ -146,6 +149,7 @@ const MessageInputWithContext = <
     additionalTextInputProps,
     asyncIds,
     asyncUploads,
+    AttachmentPickerSelectionBar,
     AutoCompleteSuggestionList,
     closeAttachmentPicker,
     cooldownEndsAt,
@@ -637,14 +641,12 @@ const MessageInputWithContext = <
             {
               backgroundColor: white_smoke,
               height:
-                (attachmentPickerBottomSheetHeight
-                  ? attachmentPickerBottomSheetHeight + (attachmentSelectionBarHeight ?? 52)
-                  : 360) - bottomInset,
+                attachmentPickerBottomSheetHeight + attachmentSelectionBarHeight - bottomInset,
             },
             attachmentSelectionBar,
           ]}
         >
-          <AttachmentSelectionBar />
+          <AttachmentPickerSelectionBar />
         </View>
       )}
     </>
@@ -789,6 +791,7 @@ export const MessageInput = <
 >(
   props: MessageInputProps<StreamChatGenerics>,
 ) => {
+  const { AttachmentPickerSelectionBar } = useAttachmentPickerContext();
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -859,6 +862,7 @@ export const MessageInput = <
         additionalTextInputProps,
         asyncIds,
         asyncUploads,
+        AttachmentPickerSelectionBar,
         AutoCompleteSuggestionHeader,
         AutoCompleteSuggestionItem,
         AutoCompleteSuggestionList,

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -16,6 +16,7 @@ import {
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
 import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
@@ -27,6 +28,7 @@ describe('MessageInput', () => {
   jest.spyOn(Alert, 'alert');
   jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
     jest.fn(() => ({
+      AttachmentPickerSelectionBar,
       CameraSelectorIcon,
       closePicker: jest.fn(),
       FileSelectorIcon,

package/src/components/MessageInput/hooks/useCountdown.ts

@@ -15,7 +15,7 @@ export const useCountdown = (end: Date) => {
    * the `end` is in the future.
    **/
   useEffect(() => {
-    let intervalId: NodeJS.Timeout;
+    let intervalId: ReturnType<typeof setInterval>;
 
     const startCountdown = (seconds: number) => {
       setSeconds(seconds);

package/src/components/MessageList/MessageList.tsx

@@ -352,17 +352,17 @@ const MessageListWithContext = <
   /**
    * The timeout id used to debounce our scrollToIndex calls on messageList updates
    */
-  const scrollToDebounceTimeoutRef = useRef<NodeJS.Timeout>();
+  const scrollToDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * The timeout id used to lazier load the initial scroll set flag
    */
-  const initialScrollSettingTimeoutRef = useRef<NodeJS.Timeout>();
+  const initialScrollSettingTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * The timeout id used to temporarily load the initial scroll set flag
    */
-  const onScrollEventTimeoutRef = useRef<NodeJS.Timeout>();
+  const onScrollEventTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   /**
    * Last messageID that was scrolled to after loading a new message list,
@@ -861,7 +861,7 @@ const MessageListWithContext = <
   };
 
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
-  const failScrollTimeoutId = useRef<NodeJS.Timeout>();
+  const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>();
   const onScrollToIndexFailedRef = useRef<
     FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
   >((info) => {

package/src/components/index.ts

@@ -14,7 +14,7 @@ export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
 export * from './AttachmentPicker/components/AttachmentPickerError';
 export * from './AttachmentPicker/components/AttachmentPickerErrorImage';
-export * from './AttachmentPicker/components/AttachmentSelectionBar';
+export * from './AttachmentPicker/components/AttachmentPickerSelectionBar';
 export * from './AttachmentPicker/components/CameraSelectorIcon';
 export * from './AttachmentPicker/components/FileSelectorIcon';
 export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
+import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
+
 import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -12,6 +14,36 @@ export type AttachmentPickerIconProps = {
 };
 
 export type AttachmentPickerContextValue = {
+  /**
+   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.
+   *
+   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
+   */
+  AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
+  /**
+   * Height of the image picker bottom sheet handle.
+   * @type number
+   * @default 20
+   */
+  attachmentPickerBottomSheetHandleHeight: number;
+  /**
+   * Height of the image picker bottom sheet when opened.
+   * @type number
+   * @default 40% of window height
+   */
+  attachmentPickerBottomSheetHeight: number;
+  /**
+   * Custom UI component for AttachmentPickerSelectionBar
+   *
+   * **Default: ** [AttachmentPickerSelectionBar](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx)
+   */
+  AttachmentPickerSelectionBar: React.ComponentType;
+  /**
+   * Height of the attachment selection bar displayed on the attachment picker.
+   * @type number
+   * @default 52
+   */
+  attachmentSelectionBarHeight: number;
   /**
    * `bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.
    * This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
@@ -53,8 +85,6 @@ export type AttachmentPickerContextValue = {
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
   topInset: number;
-  attachmentPickerBottomSheetHeight?: number;
-  attachmentSelectionBarHeight?: number;
   selectedPicker?: 'images';
 };
 
@@ -68,13 +98,7 @@ export const AttachmentPickerProvider = ({
 }: PropsWithChildren<{
   value?: Pick<
     AttachmentPickerContextValue,
-    | 'attachmentSelectionBarHeight'
-    | 'attachmentPickerBottomSheetHeight'
-    | 'CameraSelectorIcon'
-    | 'closePicker'
-    | 'FileSelectorIcon'
-    | 'ImageSelectorIcon'
-    | 'openPicker'
+    'CameraSelectorIcon' | 'closePicker' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'openPicker'
   > &
     Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>>;
 }>) => {
@@ -86,7 +110,7 @@ export const AttachmentPickerProvider = ({
   const [selectedImages, setSelectedImages] = useState<Asset[]>([]);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [selectedPicker, setSelectedPicker] = useState<'images'>();
-  const [topInset, setTopInset] = useState<number>(value?.topInset ?? 0);
+  const [topInset, setTopInset] = useState<number>(topInsetValue ?? 0);
 
   useEffect(() => {
     setBottomInset(bottomInsetValue ?? 0);

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -24,7 +24,6 @@ export type OverlayContextValue = {
   overlay: Overlay;
   setOverlay: React.Dispatch<React.SetStateAction<Overlay>>;
   style?: DeepPartial<Theme>;
-  translucentStatusBar?: boolean;
 };
 
 export const OverlayContext = React.createContext(
@@ -37,7 +36,10 @@ export type OverlayProviderProps<
   Partial<
     Pick<
       AttachmentPickerContextValue,
+      | 'AttachmentPickerBottomSheetHandle'
+      | 'attachmentPickerBottomSheetHandleHeight'
       | 'attachmentPickerBottomSheetHeight'
+      | 'AttachmentPickerSelectionBar'
       | 'attachmentSelectionBarHeight'
       | 'bottomInset'
       | 'CameraSelectorIcon'
@@ -56,8 +58,8 @@ export type OverlayProviderProps<
       | 'OverlayReactions'
       | 'OverlayReactionsAvatar'
     >
-  > &
-  Pick<OverlayContextValue, 'translucentStatusBar'> & {
+  > & {
+    imageGalleryGridHandleHeight: number;
     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
@@ -67,7 +69,6 @@ export type OverlayProviderProps<
     giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
-    imageGalleryGridHandleHeight?: number;
     imageGalleryGridSnapPoints?: [string | number, string | number];
     isMyMessage?: boolean;
     isThreadMessage?: boolean;

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -19,6 +19,7 @@ import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheet
 import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
 import { AttachmentPickerIOSSelectMorePhotos as DefaultAttachmentPickerIOSSelectMorePhotos } from '../../components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos';
+import { AttachmentPickerSelectionBar as DefaultAttachmentPickerSelectionBar } from '../../components/AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
@@ -28,6 +29,7 @@ import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
 import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
@@ -63,17 +65,19 @@ export const OverlayProvider = <
 >(
   props: PropsWithChildren<OverlayProviderProps<StreamChatGenerics>>,
 ) => {
-  const bottomSheetCloseTimeoutRef = useRef<NodeJS.Timeout>();
+  const { vh } = useViewport();
+  const bottomSheetCloseTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const {
     AttachmentPickerBottomSheetHandle = DefaultAttachmentPickerBottomSheetHandle,
-    attachmentPickerBottomSheetHandleHeight,
-    attachmentPickerBottomSheetHeight,
+    attachmentPickerBottomSheetHandleHeight = 20,
+    attachmentPickerBottomSheetHeight = vh(45),
     AttachmentPickerError = DefaultAttachmentPickerError,
     attachmentPickerErrorButtonText,
     AttachmentPickerErrorImage = DefaultAttachmentPickerErrorImage,
     attachmentPickerErrorText,
     AttachmentPickerIOSSelectMorePhotos = DefaultAttachmentPickerIOSSelectMorePhotos,
-    attachmentSelectionBarHeight,
+    AttachmentPickerSelectionBar = DefaultAttachmentPickerSelectionBar,
+    attachmentSelectionBarHeight = 52,
     autoPlayVideo,
     bottomInset,
     CameraSelectorIcon = DefaultCameraSelectorIcon,
@@ -98,7 +102,7 @@ export const OverlayProvider = <
     giphyVersion,
     i18nInstance,
     imageGalleryCustomComponents,
-    imageGalleryGridHandleHeight,
+    imageGalleryGridHandleHeight = 40,
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
@@ -122,7 +126,6 @@ export const OverlayProvider = <
     OverlayReactions,
     OverlayReactionsAvatar,
     topInset,
-    translucentStatusBar,
     value,
   } = props;
 
@@ -139,7 +142,6 @@ export const OverlayProvider = <
     ImageOverlaySelectedComponent,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
-    translucentStatusBar,
   };
 
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -189,7 +191,9 @@ export const OverlayProvider = <
   }, [overlay]);
 
   const attachmentPickerContext = {
+    AttachmentPickerBottomSheetHandle,
     attachmentPickerBottomSheetHeight,
+    AttachmentPickerSelectionBar,
     attachmentSelectionBarHeight,
     bottomInset,
     CameraSelectorIcon,
@@ -211,7 +215,6 @@ export const OverlayProvider = <
     overlay,
     setOverlay,
     style: value?.style,
-    translucentStatusBar,
   };
 
   return (

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useAppStateListener';
 export * from './useStreami18n';
 export * from './useViewport';
+export * from './useScreenDimensions';

package/src/hooks/useScreenDimensions.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+/**
+ * A custom hook that provides functions to calculate dimensions based on
+ * a percentage of the screen height (vh) and viewport width (vw). It
+ * dynamically updates dimensions on changes in device orientation.
+ *
+ * @returns {Object} An object containing functions vh and vw.
+ */
+export const useScreenDimensions = (rounded?: boolean) => {
+  const [screenDimensions, setScreenDimensions] = useState(Dimensions.get('screen'));
+
+  useEffect(() => {
+    const subscriptions = Dimensions.addEventListener('change', ({ screen }) => {
+      setScreenDimensions((prev) => {
+        const { height, width } = screen;
+        if (prev.height !== height || prev.width !== width) {
+          return screen;
+        }
+        return prev;
+      });
+    });
+
+    return () => subscriptions?.remove();
+  }, []);
+
+  const vw = (percentageWidth: number) => {
+    const value = screenDimensions.width * (percentageWidth / 100);
+    return rounded ? Math.round(value) : value;
+  };
+
+  const vh = (percentageHeight: number) => {
+    const value = screenDimensions.height * (percentageHeight / 100);
+    return rounded ? Math.round(value) : value;
+  };
+
+  const screenDimensionFunctions = useMemo(() => ({ vh, vw }), [vh, vw]);
+
+  return screenDimensionFunctions;
+};