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

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { BackHandler, Dimensions, Keyboard, Platform, StatusBar, StyleSheet } from 'react-native';
+import { BackHandler, Keyboard, Platform, StyleSheet } from 'react-native';
 
-import BottomSheet, { BottomSheetFlatList, BottomSheetHandleProps } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
@@ -9,9 +9,12 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 
 import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 
-import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import {
+  AttachmentPickerContextValue,
+  useAttachmentPickerContext,
+} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useViewport } from '../../hooks/useViewport';
+import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { getPhotos, oniOS14GalleryLibrarySelectionChange } from '../../native';
 import type { Asset } from '../../types/types';
 
@@ -23,15 +26,13 @@ const styles = StyleSheet.create({
   },
 });
 
-const fullScreenHeight = Dimensions.get('window').height;
-
-export type AttachmentPickerProps = {
-  /**
-   * 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>;
+export type AttachmentPickerProps = Pick<
+  AttachmentPickerContextValue,
+  | 'AttachmentPickerBottomSheetHandle'
+  | 'attachmentPickerBottomSheetHandleHeight'
+  | 'attachmentSelectionBarHeight'
+  | 'attachmentPickerBottomSheetHeight'
+> & {
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
@@ -54,13 +55,10 @@ export type AttachmentPickerProps = {
    * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
-  attachmentPickerBottomSheetHandleHeight?: number;
-  attachmentPickerBottomSheetHeight?: number;
   attachmentPickerErrorButtonText?: string;
   attachmentPickerErrorText?: string;
   numberOfAttachmentImagesToLoadPerCall?: number;
   numberOfAttachmentPickerImageColumns?: number;
-  translucentStatusBar?: boolean;
 };
 
 export const AttachmentPicker = React.forwardRef(
@@ -77,7 +75,6 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       numberOfAttachmentImagesToLoadPerCall,
       numberOfAttachmentPickerImageColumns,
-      translucentStatusBar,
     } = props;
 
     const {
@@ -97,9 +94,9 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedPicker,
       topInset,
     } = useAttachmentPickerContext();
-    const { vh } = useViewport();
+    const { vh: screenVh } = useScreenDimensions();
 
-    const screenHeight = vh(100);
+    const fullScreenHeight = screenVh(100);
 
     const [currentIndex, setCurrentIndex] = useState(-1);
     const endCursorRef = useRef<string>();
@@ -239,63 +236,18 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedImages,
     }));
 
-    const handleHeight = attachmentPickerBottomSheetHandleHeight || 20;
-
-    /**
-     * This is to handle issues with Android measurements coming back incorrect.
-     * If the StatusBar height is perfectly 1/2 of the difference between the two
-     * dimensions for screen and window, it is incorrect and we need to account for
-     * this. If you use a translucent header bar more adjustments are needed.
-     */
-    const getAndroidBottomBarHeightAdjustment = (): number => {
-      if (Platform.OS === 'android') {
-        const statusBarHeight = StatusBar.currentHeight ?? 0;
-        const bottomBarHeight = fullScreenHeight - screenHeight - statusBarHeight;
-        if (bottomBarHeight === statusBarHeight) {
-          return translucentStatusBar ? 0 : statusBarHeight;
-        } else {
-          if (translucentStatusBar) {
-            if (bottomBarHeight > statusBarHeight) {
-              return -bottomBarHeight + statusBarHeight;
-            } else {
-              return bottomBarHeight > 0 ? -statusBarHeight : 0;
-            }
-          } else {
-            return bottomBarHeight > 0 ? 0 : statusBarHeight;
-          }
-        }
-      }
-      return 0;
-    };
-
-    const getInitialSnapPoint = (): number => {
-      if (attachmentPickerBottomSheetHeight !== undefined) {
-        return attachmentPickerBottomSheetHeight;
-      }
-      if (Platform.OS === 'android') {
-        return (
-          308 +
-          (fullScreenHeight - screenHeight + getAndroidBottomBarHeightAdjustment()) -
-          handleHeight
-        );
-      } else {
-        return 308 + (fullScreenHeight - screenHeight);
-      }
-    };
+    const handleHeight = attachmentPickerBottomSheetHandleHeight;
 
-    const initialSnapPoint = getInitialSnapPoint();
+    const initialSnapPoint = attachmentPickerBottomSheetHeight;
 
-    const finalSnapPoint =
-      Platform.OS === 'android'
-        ? fullScreenHeight - topInset - handleHeight
-        : fullScreenHeight - topInset;
+    const finalSnapPoint = fullScreenHeight - topInset;
 
     /**
      * Snap points changing cause a rerender of the position,
      * this is an issue if you are calling close on the bottom sheet.
      */
     const snapPoints = useMemo(
-      () => [Math.max(0, initialSnapPoint), Math.max(0, finalSnapPoint)],
+      () => [initialSnapPoint, finalSnapPoint],
       [initialSnapPoint, finalSnapPoint],
     );
 
@@ -334,7 +286,7 @@ export const AttachmentPicker = React.forwardRef(
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (
           <AttachmentPickerError
-            attachmentPickerBottomSheetHeight={initialSnapPoint}
+            attachmentPickerBottomSheetHeight={attachmentPickerBottomSheetHeight}
             attachmentPickerErrorButtonText={attachmentPickerErrorButtonText}
             AttachmentPickerErrorImage={AttachmentPickerErrorImage}
             attachmentPickerErrorText={attachmentPickerErrorText}

package/src/components/AttachmentPicker/components/{AttachmentSelectionBar.tsx → AttachmentPickerSelectionBar.tsx}

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AttachmentSelectionBar = () => {
+export const AttachmentPickerSelectionBar = () => {
   const {
     attachmentSelectionBarHeight,
     CameraSelectorIcon,
@@ -75,7 +75,7 @@ export const AttachmentSelectionBar = () => {
   };
 
   return (
-    <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>
+    <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
       <TouchableOpacity
         hitSlop={{ bottom: 15, top: 15 }}
         onPress={() => setPicker('images')}

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/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;