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

package/lib/typescript/i18n/tr.json

@@ -1,6 +1,6 @@
 {
     "1 Reply": "",
-    "1 Thread Reply": "1 Konu Yanıtı",
+    "1 Thread Reply": "",
     "Allow access to your Gallery": "",
     "Allow camera access in device settings": "",
     "Also send to channel": "",
@@ -19,11 +19,11 @@
     "Editing Message": "Mesaj Düzenleniyor",
     "Emoji matching": "",
     "Empty message...": "",
-    "Error loading": "",
-    "Error loading channel list...": "",
-    "Error loading messages for this channel...": "",
+    "Error loading": "Yükleme hatası",
+    "Error loading channel list...": "Kanal listesi yüklenirken hata oluştu...",
+    "Error loading messages for this channel...": "Bu kanal için mesajlar yüklenirken hata oluştu...",
     "Error while loading, please reload/refresh": "",
-    "File type not supported": "",
+    "File type not supported": "Dosya türü desteklenmiyor",
     "Flag": "",
     "Flag Message": "",
     "Flag action failed either due to a network issue or the message is already flagged": "",
@@ -39,18 +39,18 @@
     "Message deleted": "Mesaj silindi",
     "Message flagged": "",
     "Mute User": "",
-    "Not supported": "",
+    "Not supported": "Desteklenmiyor",
     "Nothing yet...": "",
     "Ok": "",
     "Only visible to you": "",
     "Open Settings": "",
-    "Photo": "Fotoğraf",
+    "Photo": "",
     "Photos and Videos": "",
     "Pin to Conversation": "",
     "Pinned by": "",
     "Please enable access to your photos and videos so you can share them.": "",
     "Please select a channel first": "",
-    "Reconnecting...": "Yeniden Bağlanılıyor...",
+    "Reconnecting...": "",
     "Reply": "",
     "Reply to Message": "Mesajı Yanıtla",
     "Resend": "",
@@ -66,14 +66,14 @@
     "Unknown User": "",
     "Unmute User": "",
     "Unpin from Conversation": "",
-    "Unread Messages": "Okunmamış Mesajlar",
-    "Video": "Video",
-    "You": "",
+    "Unread Messages": "",
+    "Video": "",
+    "You": "Sen",
     "You can't send messages in this channel": "",
     "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
     "{{ index }} of {{ photoLength }}": "",
     "{{ replyCount }} Replies": "",
-    "{{ replyCount }} Thread Replies": "{{responseCount}} Konu Cevapı",
+    "{{ replyCount }} Thread Replies": "",
     "{{ user }} is typing": "",
     "🏙 Attachment...": ""
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.28.0-beta.4",
+  "version": "5.28.0-beta.6",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

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