stream-chat-react-native-core 5.34.1-beta.5 → 5.35.0-beta.1

package/src/components/ImageGallery/ImageGallery.tsx

@@ -48,7 +48,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import { isVideoPackageAvailable, VideoType } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
@@ -239,15 +239,15 @@ export const ImageGallery = <
       cur.attachments
         ?.filter(
           (attachment) =>
-            (attachment.type === 'giphy' &&
+            (attachment.type === FileTypes.Giphy &&
               (attachment.giphy?.[giphyVersion]?.url ||
                 attachment.thumb_url ||
                 attachment.image_url)) ||
-            (attachment.type === 'image' &&
+            (attachment.type === FileTypes.Image &&
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (isVideoPackageAvailable() && attachment.type === 'video'),
+            (isVideoPackageAvailable() && attachment.type === FileTypes.Video),
         )
         .reverse() || [];
 
@@ -344,7 +344,7 @@ export const ImageGallery = <
       const imageHeight = Math.floor(height * (fullWindowWidth / width));
       setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
     } else if (photo?.uri) {
-      if (photo.type === 'image') {
+      if (photo.type === FileTypes.Image) {
         Image.getSize(photo.uri, (width, height) => {
           const imageHeight = Math.floor(height * (fullWindowWidth / width));
           setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
@@ -553,7 +553,7 @@ export const ImageGallery = <
                     <Animated.View style={StyleSheet.absoluteFill}>
                       <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
                         {imageGalleryAttachments.map((photo, i) =>
-                          photo.type === 'video' ? (
+                          photo.type === FileTypes.Video ? (
                             <AnimatedGalleryVideo
                               attachmentId={photo.id}
                               handleEnd={handleEnd}

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -24,6 +24,7 @@ import { ImageGallery } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),
@@ -82,7 +83,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleLoad',
         `photoId-${message.id}-${attachment.asset_url}`,
-        10,
+        10 * 1000,
       );
     });
 
@@ -143,7 +144,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleProgress',
         `photoId-${message.id}-${attachment.asset_url}`,
-        0.3,
+        0.3 * 1000,
       );
     });
 
@@ -169,7 +170,7 @@ describe('ImageGallery', () => {
 
     act(() => {
       fireEvent(videoItemComponent, 'handleLoad', {
-        duration: 10,
+        duration: 10 * 1000,
       });
       fireEvent(videoItemComponent, 'handleProgress', {
         currentTime: undefined,
@@ -202,7 +203,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleLoad',
         `photoId-${message.id}-${attachment.asset_url}`,
-        10,
+        10 * 1000,
       );
       fireEvent(videoItemComponent, 'handleEnd');
     });

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -28,6 +28,7 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
     deleteFile: jest.fn(),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),

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

@@ -30,6 +30,7 @@ import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),

package/src/components/ImageGallery/__tests__/ImageGalleryVideoControl.test.tsx

@@ -54,7 +54,7 @@ describe('ImageGalleryOverlay', () => {
 
     render(
       getComponent({
-        duration: 3600,
+        duration: 3600 * 1000,
         progress: 1,
       }),
     );
@@ -73,7 +73,7 @@ describe('ImageGalleryOverlay', () => {
 
     render(
       getComponent({
-        duration: 60,
+        duration: 60 * 1000,
         progress: 0.5,
       }),
     );

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -83,7 +83,8 @@ export const AnimatedGalleryVideo = React.memo(
 
     const onLoad = (payload: VideoPayloadData) => {
       setOpacity(0);
-      handleLoad(attachmentId, payload.duration);
+      // Duration is in seconds so we convert to milliseconds.
+      handleLoad(attachmentId, payload.duration * 1000);
     };
 
     const onEnd = () => {
@@ -109,12 +110,12 @@ export const AnimatedGalleryVideo = React.memo(
       } else {
         // Update your UI for the loaded state
         setOpacity(0);
-        handleLoad(attachmentId, playbackStatus.durationMillis / 1000);
+        handleLoad(attachmentId, playbackStatus.durationMillis);
         if (playbackStatus.isPlaying) {
           // Update your UI for the playing state
           handleProgress(
             attachmentId,
-            playbackStatus.positionMillis / 1000 / (playbackStatus.durationMillis / 1000),
+            playbackStatus.positionMillis / playbackStatus.durationMillis,
           );
         }
 

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -9,7 +9,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -182,7 +182,7 @@ export const ImageGalleryFooterWithContext = <
       style={styles.wrapper}
     >
       <ReanimatedSafeAreaView style={[container, { backgroundColor: white }, footerStyle]}>
-        {photo.type === 'video' ? (
+        {photo.type === FileTypes.Video ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
           ) : (

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import dayjs from 'dayjs';
-
 import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { Pause, Play } from '../../../icons';
+import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
 
 const styles = StyleSheet.create({
@@ -37,19 +36,11 @@ export const ImageGalleryVideoControl = React.memo(
   (props: ImageGalleryFooterVideoControlProps) => {
     const { duration, onPlayPause, paused, progress, videoRef } = props;
 
-    const videoDuration = duration
-      ? duration / 3600 >= 1
-        ? dayjs.duration(duration, 'second').format('HH:mm:ss')
-        : dayjs.duration(duration, 'second').format('mm:ss')
-      : null;
+    const videoDuration = getDurationLabelFromDuration(duration);
 
     const progressValueInSeconds = progress * duration;
 
-    const progressDuration = progressValueInSeconds
-      ? progressValueInSeconds / 3600 >= 1
-        ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
-        : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
-      : null;
+    const progressDuration = getDurationLabelFromDuration(progressValueInSeconds);
 
     const {
       theme: {
@@ -85,7 +76,7 @@ export const ImageGalleryVideoControl = React.memo(
           accessibilityLabel='Progress Duration'
           style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
-          {progressDuration ? progressDuration : '00:00'}
+          {progressDuration}
         </Text>
         <ProgressControl
           duration={duration}
@@ -99,7 +90,7 @@ export const ImageGalleryVideoControl = React.memo(
           accessibilityLabel='Video Duration'
           style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
-          {videoDuration ? videoDuration : '00:00'}
+          {videoDuration}
         </Text>
       </View>
     );

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -6,7 +6,7 @@ import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../../hooks/useViewport';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 
 import type { Photo } from '../ImageGallery';
 
@@ -84,7 +84,7 @@ const GridImage = <
 
   return (
     <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>
-      {type === 'video' ? (
+      {type === FileTypes.Video ? (
         <View style={[styles.image, { height: size, width: size }, gridImage]}>
           <VideoThumbnail thumb_url={thumb_url} />
         </View>

package/src/components/Message/Message.tsx

@@ -40,7 +40,7 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import { isVideoPackageAvailable, triggerHaptic } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import {
   hasOnlyEmojis,
   isBlockedMessage,
@@ -377,22 +377,26 @@ const MessageWithContext = <
     !isMessageTypeDeleted && Array.isArray(message.attachments)
       ? message.attachments.reduce(
           (acc, cur) => {
-            if (cur.type === 'file') {
+            if (cur.type === FileTypes.File) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
+            } else if (
+              cur.type === FileTypes.Video &&
+              !cur.og_scrape_url &&
+              isVideoPackageAvailable()
+            ) {
               acc.videos.push({
                 image_url: cur.asset_url,
                 thumb_url: cur.thumb_url,
-                type: 'video',
+                type: FileTypes.Video,
               });
               acc.other = [];
-            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+            } else if (cur.type === FileTypes.Video && !cur.og_scrape_url) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'audio' || cur.type === 'voiceRecording') {
+            } else if (cur.type === FileTypes.Audio || cur.type === FileTypes.VoiceRecording) {
               acc.files.push(cur);
-            } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
+            } else if (cur.type === FileTypes.Image && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have
                * an image with no url links at all falling back to being an attachment
@@ -859,7 +863,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
       prevMessageAttachments.length === nextMessageAttachments.length &&
       prevMessageAttachments.every((attachment, index) => {
         const attachmentKeysEqual =
-          attachment.type === 'image'
+          attachment.type === FileTypes.Image
             ? attachment.image_url === nextMessageAttachments[index].image_url &&
               attachment.thumb_url === nextMessageAttachments[index].thumb_url
             : attachment.type === nextMessageAttachments[index].type;

package/src/components/MessageInput/AttachButton.tsx

@@ -1,30 +1,96 @@
-import React from 'react';
-import type { GestureResponderEvent } from 'react-native';
+import React, { useState } from 'react';
+import type { GestureResponderEvent, LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { Pressable } from 'react-native';
 
+import { NativeAttachmentPicker } from './components/NativeAttachmentPicker';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
+import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-type AttachButtonPropsWithContext = {
+import { isImageMediaLibraryAvailable } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+type AttachButtonPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
   selectedPicker?: 'images';
 };
 
-const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
-  const { handleOnPress, selectedPicker } = props;
+const AttachButtonWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AttachButtonPropsWithContext<StreamChatGenerics>,
+) => {
+  const [showAttachButtonPicker, setShowAttachButtonPicker] = useState<boolean>(false);
+  const [attachButtonLayoutRectangle, setAttachButtonLayoutRectangle] = useState<LayoutRectangle>();
+  const { disabled, handleOnPress, selectedPicker } = props;
   const {
     theme: {
       colors: { accent_blue, grey },
       messageInput: { attachButton },
     },
   } = useTheme();
+  const { handleAttachButtonPress, toggleAttachmentPicker } = useMessageInputContext();
+
+  const onAttachButtonLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    setAttachButtonLayoutRectangle((prev) => {
+      if (
+        prev &&
+        prev.width === layout.width &&
+        prev.height === layout.height &&
+        prev.x === layout.x &&
+        prev.y === layout.y
+      ) {
+        return prev;
+      }
+      return layout;
+    });
+  };
+
+  const attachButtonHandler = () => {
+    setShowAttachButtonPicker(true);
+  };
+
+  const onPressHandler = () => {
+    if (handleOnPress) {
+      handleOnPress();
+      return;
+    }
+    if (handleAttachButtonPress) {
+      handleAttachButtonPress();
+      return;
+    }
+    if (isImageMediaLibraryAvailable()) {
+      toggleAttachmentPicker();
+    } else {
+      attachButtonHandler();
+    }
+  };
 
   return (
-    <Pressable onPress={handleOnPress} style={[attachButton]} testID='attach-button'>
-      <Attach pathFill={selectedPicker === 'images' ? accent_blue : grey} />
-    </Pressable>
+    <>
+      <Pressable
+        disabled={disabled}
+        onLayout={onAttachButtonLayout}
+        onPress={disabled ? () => null : onPressHandler}
+        style={[attachButton]}
+        testID='attach-button'
+      >
+        <Attach fill={selectedPicker === 'images' ? accent_blue : grey} size={32} />
+      </Pressable>
+      {showAttachButtonPicker ? (
+        <NativeAttachmentPicker
+          attachButtonLayoutRectangle={attachButtonLayoutRectangle}
+          onRequestedClose={() => setShowAttachButtonPicker(false)}
+        />
+      ) : null}
+    </>
   );
 };
 

package/src/components/MessageInput/CommandsButton.tsx

@@ -36,11 +36,12 @@ const CommandsButtonWithContext = <
   return (
     <Pressable onPress={handleOnPress} style={[commandsButton]} testID='commands-button'>
       <Lightning
-        pathFill={
+        fill={
           suggestions && suggestions.data.some((suggestion) => isSuggestionCommand(suggestion))
             ? accent_blue
             : grey
         }
+        size={32}
       />
     </Pressable>
   );

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import dayjs from 'dayjs';
-
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
@@ -21,7 +19,11 @@ import { Warning } from '../../icons/Warning';
 import { isAudioPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
-import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
+import {
+  getDurationLabelFromDuration,
+  getIndicatorTypeForFileState,
+  ProgressIndicatorTypes,
+} from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
 
@@ -97,19 +99,6 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
-  const ONE_HOUR_IN_SECONDS = 3600;
-  let durationLabel = '00:00';
-  const videoDuration = item.file.duration;
-
-  if (videoDuration) {
-    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
-    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
-    const formattedVideoDuration = dayjs
-      .duration(videoDuration, 'second')
-      .format(formattedDurationParam);
-    durationLabel = formattedVideoDuration;
-  }
-
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -126,7 +115,9 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
+      {item.file.duration
+        ? getDurationLabelFromDuration(item.file.duration)
+        : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/InputButtons.tsx

@@ -56,7 +56,6 @@ export const InputButtonsWithContext = <
     setShowMoreOptions,
     showMoreOptions,
     text,
-    toggleAttachmentPicker,
   } = props;
 
   const {
@@ -79,7 +78,7 @@ export const InputButtonsWithContext = <
         <View
           style={[hasCommands ? styles.attachButtonContainer : undefined, attachButtonContainer]}
         >
-          <AttachButton handleOnPress={toggleAttachmentPicker} />
+          <AttachButton />
         </View>
       )}
       {hasCommands && !text && (

package/src/components/MessageInput/MessageInput.tsx

@@ -118,6 +118,7 @@ type MessageInputPropsWithContext<
     | 'FileUploadPreview'
     | 'fileUploads'
     | 'giphyActive'
+    | 'hasImagePicker'
     | 'ImageUploadPreview'
     | 'imageUploads'
     | 'Input'
@@ -184,6 +185,7 @@ const MessageInputWithContext = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
+    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -277,6 +279,9 @@ const MessageInputWithContext = <
   const fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
   const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
 
+  /**
+   * Reset the selected images when the component is unmounted.
+   */
   useEffect(() => {
     setSelectedImages([]);
     if (imageUploads.length) {
@@ -285,11 +290,15 @@ const MessageInputWithContext = <
     return () => setSelectedImages([]);
   }, []);
 
+  /**
+   * Reset the selected files when the component is unmounted.
+   */
   useEffect(() => {
     setSelectedFiles([]);
     if (fileUploads.length) {
       fileUploads.forEach((file) => removeFile(file.id));
     }
+
     return () => setSelectedFiles([]);
   }, []);
 
@@ -306,10 +315,10 @@ const MessageInputWithContext = <
   }, [fileUploadsLength, selectedFilesLength]);
 
   useEffect(() => {
-    if (imagesForInput === false && imageUploads.length) {
+    if (imagesForInput === false && imageUploadsLength) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
-  }, [imagesForInput]);
+  }, [imagesForInput, imageUploadsLength]);
 
   const uploadImagesHandler = () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
@@ -371,9 +380,9 @@ const MessageInputWithContext = <
   }, [selectedFilesLength]);
 
   useEffect(() => {
-    if (imagesForInput) {
+    if (imagesForInput && hasImagePicker) {
       if (imageUploadsLength < selectedImagesLength) {
-        /** User removed some image from seleted images within ImageUploadPreview. */
+        // /** User removed some image from seleted images within ImageUploadPreview. */
         const updatedSelectedImages = selectedImages.filter((selectedImage) => {
           const uploadedImage = imageUploads.find(
             (imageUpload) =>
@@ -400,36 +409,38 @@ const MessageInputWithContext = <
         );
       }
     }
-  }, [imageUploadsLength]);
+  }, [imageUploadsLength, hasImagePicker]);
 
   useEffect(() => {
-    if (fileUploadsLength < selectedFilesLength) {
-      /** User removed some video from seleted files within ImageUploadPreview. */
-      const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
-        const uploadedFile = fileUploads.find(
-          (fileUpload) =>
-            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+    if (hasImagePicker) {
+      if (fileUploadsLength < selectedFilesLength) {
+        /** User removed some video from seleted files within ImageUploadPreview. */
+        const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
+          const uploadedFile = fileUploads.find(
+            (fileUpload) =>
+              fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+          );
+          return uploadedFile;
+        });
+        setSelectedFiles(updatedSelectedFiles);
+      } else if (fileUploadsLength > selectedFilesLength) {
+        /**
+         * User is editing some message which contains video attachments OR
+         * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
+         * using `uploadNewFile` function from `MessageInputContext`.
+         **/
+        setSelectedFiles(
+          fileUploads.map((fileUpload) => ({
+            duration: fileUpload.file.duration,
+            mimeType: fileUpload.file.mimeType,
+            name: fileUpload.file.name,
+            size: fileUpload.file.size,
+            uri: fileUpload.file.uri,
+          })),
         );
-        return uploadedFile;
-      });
-      setSelectedFiles(updatedSelectedFiles);
-    } else if (fileUploadsLength > selectedFilesLength) {
-      /**
-       * User is editing some message which contains video attachments OR
-       * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
-       * using `uploadNewFile` function from `MessageInputContext`.
-       **/
-      setSelectedFiles(
-        fileUploads.map((fileUpload) => ({
-          duration: fileUpload.file.duration,
-          mimeType: fileUpload.file.mimeType,
-          name: fileUpload.file.name,
-          size: fileUpload.file.size,
-          uri: fileUpload.file.uri,
-        })),
-      );
+      }
     }
-  }, [fileUploadsLength]);
+  }, [fileUploadsLength, hasImagePicker]);
 
   const editingExists = !!editing;
   useEffect(() => {
@@ -1012,6 +1023,7 @@ export const MessageInput = <
     FileUploadPreview,
     fileUploads,
     giphyActive,
+    hasImagePicker,
     ImageUploadPreview,
     imageUploads,
     Input,
@@ -1092,6 +1104,7 @@ export const MessageInput = <
         FileUploadPreview,
         fileUploads,
         giphyActive,
+        hasImagePicker,
         ImageUploadPreview,
         imageUploads,
         Input,

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

@@ -31,6 +31,7 @@ jest.mock('../../../native.ts', () => {
 
   return {
     isAudioPackageAvailable: jest.fn(() => true),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isImagePickerAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),