stream-chat-react-native-core 4.5.1-beta.1 → 4.6.1-beta.1

package/lib/typescript/contexts/messagesContext/MessagesContext.d.ts

@@ -44,22 +44,22 @@ export declare type MessageContentType = 'attachments' | 'files' | 'gallery' | '
 export declare type MessagesContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /**
      * UI component for Attachment.
-     * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Attachment.tsx)
+     * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Attachment.tsx)
      */
     Attachment: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
     /**
      * UI component to display AttachmentActions. e.g., send, shuffle, cancel in case of giphy
-     * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/AttachmentActions.tsx)
+     * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AttachmentActions.tsx)
      */
     AttachmentActions: React.ComponentType<AttachmentActionsProps<StreamChatGenerics>>;
     /**
      * UI component to display generic media type e.g. giphy, url preview etc
-     * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Card.tsx)
+     * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Card.tsx)
      */
     Card: React.ComponentType<CardProps<StreamChatGenerics>>;
     /**
      * UI component for DateHeader
-     * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/DateHeader.tsx)
+     * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
      **/
     DateHeader: React.ComponentType<DateHeaderProps>;
     /** Should keyboard be dismissed when messaged is touched */
@@ -67,28 +67,28 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     enableMessageGroupingByUser: boolean;
     /**
      * UI component to display File type attachment.
-     * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileAttachment.tsx)
+     * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/FileAttachment.tsx)
      */
     FileAttachment: React.ComponentType<FileAttachmentProps<StreamChatGenerics>>;
     /**
      * UI component to display group of File type attachments or multiple file attachments (in single message).
-     * Defaults to: [FileAttachmentGroup](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileAttachmentGroup.tsx)
+     * Defaults to: [FileAttachmentGroup](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/FileAttachmentGroup.tsx)
      */
     FileAttachmentGroup: React.ComponentType<FileAttachmentGroupProps<StreamChatGenerics>>;
     /**
      * UI component for attachment icon for type 'file' attachment.
-     * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileIcon.tsx
+     * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/FileIcon.tsx
      */
     FileAttachmentIcon: React.ComponentType<FileIconProps>;
     FlatList: typeof FlatList;
     /**
      * UI component to display image attachments
-     * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Gallery.tsx)
+     * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Gallery.tsx)
      */
     Gallery: React.ComponentType<GalleryProps<StreamChatGenerics>>;
     /**
      * UI component for Giphy
-     * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Giphy.tsx)
+     * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Giphy.tsx)
      */
     Giphy: React.ComponentType<GiphyProps<StreamChatGenerics>>;
     /**
@@ -101,30 +101,30 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     initialScrollToFirstUnreadMessage: boolean;
     /**
      * UI component for Message Date Separator Component
-     * Defaults to: [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/InlineDateSeparator.tsx)
+     * Defaults to: [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/InlineDateSeparator.tsx)
      */
     InlineDateSeparator: React.ComponentType<InlineDateSeparatorProps>;
     /**
      * UI component for InlineUnreadIndicator
-     * Defaults to: [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/InlineUnreadIndicator.tsx)
+     * Defaults to: [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/InlineUnreadIndicator.tsx)
      **/
     InlineUnreadIndicator: React.ComponentType;
     Message: React.ComponentType<MessageProps<StreamChatGenerics>>;
     /**
      * UI component for MessageAvatar
-     * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
+     * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
      **/
     MessageAvatar: React.ComponentType<MessageAvatarProps<StreamChatGenerics>>;
     /**
      * UI component for MessageContent
-     * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageContent.tsx)
+     * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageContent.tsx)
      */
     MessageContent: React.ComponentType<MessageContentProps<StreamChatGenerics>>;
     /** Order to render the message content */
     messageContentOrder: MessageContentType[];
     /**
      * UI component for MessageDeleted
-     * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageDeleted.tsx)
+     * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageDeleted.tsx)
      */
     MessageDeleted: React.ComponentType<MessageDeletedProps<StreamChatGenerics>>;
     /**
@@ -138,22 +138,22 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<StreamChatGenerics>>;
     /**
      * UI component for MessageReplies
-     * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageReplies.tsx)
+     * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageReplies.tsx)
      */
     MessageReplies: React.ComponentType<MessageRepliesProps<StreamChatGenerics>>;
     /**
      * UI Component for MessageRepliesAvatars
-     * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageRepliesAvatars.tsx)
+     * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageRepliesAvatars.tsx)
      */
     MessageRepliesAvatars: React.ComponentType<MessageRepliesAvatarsProps<StreamChatGenerics>>;
     /**
      * UI component for MessageSimple
-     * Defaults to: [MessageSimple](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageSimple.tsx)
+     * Defaults to: [MessageSimple](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageSimple.tsx)
      */
     MessageSimple: React.ComponentType<MessageSimpleProps<StreamChatGenerics>>;
     /**
      * UI component for MessageStatus (delivered/read)
-     * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageStatus.tsx)
+     * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageStatus.tsx)
      */
     MessageStatus: React.ComponentType<MessageStatusProps<StreamChatGenerics>>;
     /**
@@ -167,7 +167,7 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
     /**
      * UI component for ReactionList
-     * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Reaction/ReactionList.tsx)
+     * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
      */
     ReactionList: React.ComponentType<ReactionListProps<StreamChatGenerics>>;
     removeMessage: (message: {
@@ -208,7 +208,7 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     }) => void;
     /**
      * Custom UI component to display enriched url preview.
-     * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Card.tsx
+     * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Card.tsx
      */
     UrlPreview: React.ComponentType<CardProps<StreamChatGenerics>>;
     /**

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -74,6 +74,7 @@ export declare type MarkdownStyle = Partial<{
 export declare type Theme = {
     attachmentPicker: {
         bottomSheetContentContainer: ViewStyle;
+        durationText: TextStyle;
         errorButtonText: TextStyle;
         errorContainer: ViewStyle;
         errorText: TextStyle;
@@ -385,7 +386,7 @@ export declare type Theme = {
             eyeIcon: IconProps;
             /**
              * Available options for styling text:
-             * https://github.com/andangrd/react-native-markdown-package/blob/master/styles.js
+             * https://github.com/andangrd/react-native-markdown-package/blob/main/styles.js
              */
             markdown: MarkdownStyle;
             messageUser: TextStyle;

package/lib/typescript/icons/Recorder.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './utils/base';
+export declare const Recorder: React.FC<IconProps>;

package/lib/typescript/icons/Video.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './utils/base';
+export declare const Video: React.FC<IconProps>;

package/lib/typescript/icons/index.d.ts

@@ -68,11 +68,13 @@ export * from './ThumbsUpReaction';
 export * from './Time';
 export * from './TXT';
 export * from './Unknown';
+export * from './Recorder';
 export * from './Unpin';
 export * from './User';
 export * from './UserAdd';
 export * from './UserDelete';
 export * from './UserMinus';
+export * from './Video';
 export * from './Warning';
 export * from './WutReaction';
 export * from './XLS';

package/lib/typescript/native.d.ts

@@ -1,5 +1,6 @@
 import { FlatList as DefaultFlatList } from 'react-native';
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
+import type { Asset, File } from './types/types';
 declare type CompressImage = ({ compressImageQuality, height, uri, width, }: {
     compressImageQuality: number;
     height: number;
@@ -11,15 +12,8 @@ declare type DeleteFile = ({ uri }: {
     uri: string;
 }) => Promise<boolean> | never;
 export declare let deleteFile: DeleteFile;
-declare type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string> | never;
+declare type GetLocalAssetUri = (uriOrAssetId: string) => never;
 export declare let getLocalAssetUri: GetLocalAssetUri;
-export declare type Asset = {
-    height: number;
-    source: 'camera' | 'picker';
-    uri: string;
-    width: number;
-    id?: string;
-};
 declare type GetPhotos = ({ after, first }: {
     first: number;
     after?: string;
@@ -41,12 +35,7 @@ declare type PickDocument = ({ maxNumberOfFiles }: {
     maxNumberOfFiles?: number;
 }) => Promise<{
     cancelled: boolean;
-    docs?: {
-        name: string;
-        size?: number | string;
-        type?: string;
-        uri?: string;
-    }[];
+    docs?: File[];
 }> | never;
 export declare let pickDocument: PickDocument;
 declare type SaveFileOptions = {

package/lib/typescript/types/types.d.ts

@@ -1,4 +1,28 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
+export declare type Asset = {
+    duration: number | null;
+    filename: string;
+    fileSize: string;
+    height: number;
+    playableDuration: number | null;
+    source: 'camera' | 'picker';
+    type: string;
+    uri: string;
+    width: number;
+    id?: string;
+    size?: number | string;
+};
+export declare type File = {
+    name: string;
+    duration?: string | null;
+    size?: number | string;
+    type?: string;
+    uri?: string;
+};
+export declare type DefaultAttachmentType = UnknownType & {
+    file_size?: number | string;
+    mime_type?: string;
+};
 interface DefaultUserType extends UnknownType {
     image?: string;
 }

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": "4.5.1-beta.1",
+  "version": "4.6.1-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/FileIcon.tsx

@@ -19,6 +19,7 @@ import { SEVEN_Z } from '../../icons/SEVEN_Z';
 import { TAR } from '../../icons/TAR';
 import { TXT } from '../../icons/TXT';
 import type { IconProps } from '../../icons/utils/base';
+import { Video } from '../../icons/Video';
 import { XLS } from '../../icons/XLS';
 import { XLSX } from '../../icons/XLSX';
 import { ZIP } from '../../icons/ZIP';
@@ -320,6 +321,46 @@ const zipFileTypes = [
   'application/zip',
 ];
 
+const videoFileTypes = [
+  'video/3g2',
+  'video/3gp',
+  'video/aaf',
+  'video/asf',
+  'video/avchd',
+  'video/avi',
+  'video/drc',
+  'video/flv',
+  'video/m2v',
+  'video/m3u8',
+  'video/m4p',
+  'video/m4v',
+  'video/mkv',
+  'video/mng',
+  'video/mov',
+  'video/mp2',
+  'video/mp4',
+  'video/mpe',
+  'video/mpeg',
+  'video/mpg',
+  'video/mpv',
+  'video/mxf',
+  'video/nsv',
+  'video/ogg',
+  'video/ogv',
+  'video/qt',
+  'video/rm',
+  'video/rmvb',
+  'video/roq',
+  'video/svi',
+  'video/vob',
+  'video/webm',
+  'video/wmv',
+  'video/yuv',
+  'video/quicktime',
+  'video/webm',
+  'video/x-flv',
+];
+
 const mimeTypeToIconMap: Record<string, React.FC<IconProps>> = {
   'application/pdf': PDF, // .pdf
   'application/rtf': RTF, // .rtf
@@ -371,6 +412,10 @@ for (const type of zipFileTypes) {
   mimeTypeToIconMap[type] = ZIP;
 }
 
+for (const type of videoFileTypes) {
+  mimeTypeToIconMap[type] = Video;
+}
+
 function mimeTypeToIcon(mimeType?: string): React.FC<IconProps> {
   if (!mimeType) return GenericFile;
 

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -7,6 +7,7 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 
@@ -15,42 +16,161 @@ import BottomSheet, {
   BottomSheetHandleProps,
   TouchableOpacity,
 } from '@gorhom/bottom-sheet';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { lookup } from 'mime-types';
 
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Asset, getPhotos } from '../../native';
+import { Recorder } from '../../icons';
+import { getPhotos } from '../../native';
+import type { Asset, File } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 
+dayjs.extend(duration);
+
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
   },
+  durationText: {
+    fontWeight: 'bold',
+  },
   overlay: {
     alignItems: 'flex-end',
     flex: 1,
   },
+  videoView: {
+    bottom: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+    position: 'absolute',
+    width: '100%',
+  },
 });
 
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
 type AttachmentImageProps = {
+  asset: Asset;
+  ImageOverlaySelectedComponent: React.ComponentType;
+  maxNumberOfFiles: number;
+  selected: boolean;
+  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
+  numberOfAttachmentPickerImageColumns?: number;
+};
+
+type AttachmentVideoProps = {
+  asset: Asset;
   ImageOverlaySelectedComponent: React.ComponentType;
-  onPress: () => void;
+  maxNumberOfFiles: number;
   selected: boolean;
-  uri: string;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
   numberOfAttachmentPickerImageColumns?: number;
 };
 
+const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
+  const {
+    asset,
+    ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
+    numberOfAttachmentPickerImageColumns,
+    selected,
+    setSelectedFiles,
+  } = props;
+
+  const {
+    theme: {
+      attachmentPicker: { durationText, image, imageOverlay },
+      colors: { overlay, white },
+    },
+  } = useTheme();
+
+  const { duration, playableDuration, uri } = asset;
+
+  const videoDuration = duration ? duration : playableDuration;
+
+  const ONE_HOUR_IN_SECONDS = 3600;
+
+  let durationLabel = '00:00';
+
+  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 size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+
+  const onPressVideo = () => {
+    if (selected) {
+      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
+    } else {
+      setSelectedFiles((files) => {
+        if (files.length >= maxNumberOfFiles) {
+          return files;
+        }
+        return [
+          ...files,
+          {
+            duration: durationLabel,
+            name: asset.filename,
+            size: asset.fileSize,
+            type: 'video',
+            uri: asset.uri,
+          },
+        ];
+      });
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={onPressVideo}>
+      <ImageBackground
+        source={{ uri }}
+        style={[
+          {
+            height: size,
+            margin: 1,
+            width: size,
+          },
+          image,
+        ]}
+      >
+        {selected && (
+          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
+            <ImageOverlaySelectedComponent />
+          </View>
+        )}
+        <View style={styles.videoView}>
+          <Recorder height={20} pathFill={white} width={25} />
+          {videoDuration ? (
+            <Text style={[styles.durationText, durationText, { color: white }]}>
+              {durationLabel}
+            </Text>
+          ) : null}
+        </View>
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+};
+
 const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   const {
+    asset,
     ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
-    onPress,
     selected,
-    uri,
+    setSelectedImages,
   } = props;
   const {
     theme: {
@@ -61,8 +181,23 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
+  const { uri } = asset;
+
+  const onPressImage = () => {
+    if (selected) {
+      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
+    } else {
+      setSelectedImages((images) => {
+        if (images.length >= maxNumberOfFiles) {
+          return images;
+        }
+        return [...images, asset];
+      });
+    }
+  };
+
   return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity onPress={onPressImage}>
       <ImageBackground
         source={{ uri }}
         style={[
@@ -92,6 +227,7 @@ const renderImage = ({
     ImageOverlaySelectedComponent: React.ComponentType;
     maxNumberOfFiles: number;
     selected: boolean;
+    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
     setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
     numberOfAttachmentPickerImageColumns?: number;
   };
@@ -102,55 +238,64 @@ const renderImage = ({
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
     selected,
+    setSelectedFiles,
     setSelectedImages,
   } = item;
-  const onPress = () => {
-    if (selected) {
-      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
-    } else {
-      setSelectedImages((images) => {
-        if (images.length >= maxNumberOfFiles) {
-          return images;
-        }
-        return [...images, asset];
-      });
-    }
-  };
 
-  return (
+  const contentType = lookup(asset.filename) || 'multipart/form-data';
+
+  const fileType = asset.filename
+    ? contentType.startsWith('image/')
+      ? 'image'
+      : 'video'
+    : asset.type === 'video'
+    ? 'video'
+    : 'image';
+
+  return fileType === 'image' ? (
     <AttachmentImage
+      asset={asset}
+      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
+      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      selected={selected}
+      setSelectedImages={setSelectedImages}
+    />
+  ) : (
+    <AttachmentVideo
+      asset={asset}
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      onPress={onPress}
       selected={selected}
-      uri={asset.uri}
+      setSelectedFiles={setSelectedFiles}
     />
   );
 };
 
 export type AttachmentPickerProps = {
   /**
-   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) of attachment picker.
+   * 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/master/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
+   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
    */
   AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
-   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
+   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
    */
   AttachmentPickerError: React.ComponentType<AttachmentPickerErrorProps>;
   /**
    * Custom UI component to render error image for attachment picker
    *
-   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
+   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
    */
   AttachmentPickerErrorImage: React.ComponentType;
   /**
-   * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) (with tick mark)
+   * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
    *
-   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
+   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
   attachmentPickerBottomSheetHandleHeight?: number;
@@ -187,8 +332,10 @@ export const AttachmentPicker = React.forwardRef(
     const {
       closePicker,
       maxNumberOfFiles,
+      selectedFiles,
       selectedImages,
       selectedPicker,
+      setSelectedFiles,
       setSelectedImages,
       setSelectedPicker,
       topInset,
@@ -306,7 +453,10 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
-      selected: selectedImages.some((image) => image.uri === asset.uri),
+      selected:
+        selectedImages.some((image) => image.uri === asset.uri) ||
+        selectedFiles.some((file) => file.uri === asset.uri),
+      setSelectedFiles,
       setSelectedImages,
     }));
 

package/src/components/Channel/Channel.tsx

@@ -304,7 +304,7 @@ export type ChannelPropsWithContext<
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
-     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      * component to adjust the height of Channel when the keyboard is opened or dismissed. This prop provides the ability to disable this functionality in case you
      * want to use [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview) or handle dismissal yourself.
      * KeyboardAvoidingView works well when your component occupies 100% of screen height, otherwise it may raise some issues.
@@ -345,7 +345,7 @@ export type ChannelPropsWithContext<
     keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
     /**
      * Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed
-     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      *
      * **Example:**
      *