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

package/src/components/Chat/Chat.tsx

@@ -91,7 +91,7 @@ export type ChatProps<
    */
   i18nInstance?: Streami18n;
   /**
-   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/themeContext/utils/theme.ts)
+   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
    *
    * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.
    *

package/src/components/Message/Message.tsx

@@ -160,7 +160,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
      *
      * By default, we show the overlay with all the message actions on long press.
      *
@@ -173,7 +173,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
      *
      * By default, we will dismiss the keyboard on press.
      *

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -143,7 +143,16 @@ const MessageContentWithContext = <
       colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
-          container: { borderRadiusL, borderRadiusS, ...container },
+          container: {
+            borderBottomLeftRadius,
+            borderBottomRightRadius,
+            borderRadius,
+            borderRadiusL,
+            borderRadiusS,
+            borderTopLeftRadius,
+            borderTopRightRadius,
+            ...container
+          },
           containerInner,
           errorContainer,
           errorIcon,
@@ -223,6 +232,50 @@ const MessageContentWithContext = <
 
   const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper;
 
+  const isBorderColor = isMyMessage && !error;
+
+  const getBorderRadius = () => {
+    // enum('top', 'middle', 'bottom', 'single')
+    const groupPosition = groupStyles?.[0];
+
+    const isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
+    let borderBottomLeftRadius = borderRadiusL;
+    let borderBottomRightRadius = borderRadiusL;
+
+    if (isBottomOrSingle && (!hasThreadReplies || threadList)) {
+      // add relevant sharp corner
+      if (alignment === 'left') {
+        borderBottomLeftRadius = borderRadiusS;
+      } else {
+        borderBottomRightRadius = borderRadiusS;
+      }
+    }
+
+    return {
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+    };
+  };
+
+  const getBorderRadiusFromTheme = () => {
+    const bordersFromTheme: Record<string, number | undefined> = {
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+    };
+
+    // filter out undefined values
+    for (const key in bordersFromTheme) {
+      if (bordersFromTheme[key] === undefined) {
+        delete bordersFromTheme[key];
+      }
+    }
+
+    return bordersFromTheme;
+  };
+
   return (
     <TouchableOpacity
       activeOpacity={0.7}
@@ -297,17 +350,9 @@ const MessageContentWithContext = <
             styles.containerInner,
             {
               backgroundColor,
-              borderBottomLeftRadius:
-                (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
-                (!hasThreadReplies || threadList)
-                  ? borderRadiusS
-                  : borderRadiusL,
-              borderBottomRightRadius:
-                (groupStyle === 'right_bottom' || groupStyle === 'right_single') &&
-                (!hasThreadReplies || threadList)
-                  ? borderRadiusS
-                  : borderRadiusL,
-              borderColor: isMyMessage && !error ? backgroundColor : grey_whisper,
+              borderColor: isBorderColor ? backgroundColor : grey_whisper,
+              ...getBorderRadius(),
+              ...getBorderRadiusFromTheme(),
             },
             noBorder ? { borderWidth: 0 } : {},
             containerInner,

package/src/components/Message/MessageSimple/utils/renderText.md

@@ -1,4 +1,4 @@
-[src/components/Message/MessageSimple/utils/renderText.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/utils/renderText.ts)
+[src/components/Message/MessageSimple/utils/renderText.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/utils/renderText.ts)
 
 Function that handles markdown and parsing for the text of message.
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -105,7 +105,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {getFileSizeDisplayText(item.file.size)}
+      {item.file.duration ? item.file.duration : getFileSizeDisplayText(item.file.size)}
     </Text>
   );
 };

package/src/components/MessageInput/MessageInput.tsx

@@ -30,8 +30,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { Asset } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
@@ -115,7 +114,9 @@ type MessageInputPropsWithContext<
     | 'setGiphyActive'
     | 'showMoreOptions'
     | 'ShowThreadMessageInChannelButton'
+    | 'removeFile'
     | 'removeImage'
+    | 'uploadNewFile'
     | 'uploadNewImage'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
@@ -164,6 +165,7 @@ const MessageInputWithContext = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
+    removeFile,
     removeImage,
     Reply,
     resetInput,
@@ -175,6 +177,7 @@ const MessageInputWithContext = <
     thread,
     threadList,
     triggerType,
+    uploadNewFile,
     uploadNewImage,
     watchers,
   } = props;
@@ -202,9 +205,11 @@ const MessageInputWithContext = <
     attachmentPickerBottomSheetHeight,
     attachmentSelectionBarHeight,
     bottomInset,
+    selectedFiles,
     selectedImages,
     selectedPicker,
     setMaxNumberOfFiles,
+    setSelectedFiles,
     setSelectedImages,
   } = useAttachmentPickerContext();
 
@@ -224,8 +229,11 @@ const MessageInputWithContext = <
   }, []);
 
   const [hasResetImages, setHasResetImages] = useState(false);
+  const [hasResetFiles, setHasResetFiles] = useState(false);
   const selectedImagesLength = hasResetImages ? selectedImages.length : 0;
   const imageUploadsLength = hasResetImages ? imageUploads.length : 0;
+  const selectedFilesLength = hasResetFiles ? selectedFiles.length : 0;
+  const fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
   const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
 
   useEffect(() => {
@@ -236,44 +244,90 @@ const MessageInputWithContext = <
     return () => setSelectedImages([]);
   }, []);
 
+  useEffect(() => {
+    setSelectedFiles([]);
+    if (fileUploads.length) {
+      fileUploads.forEach((file) => removeFile(file.id));
+    }
+    return () => setSelectedFiles([]);
+  }, []);
+
   useEffect(() => {
     if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
       setHasResetImages(true);
     }
   }, [imageUploadsLength, selectedImagesLength]);
 
+  useEffect(() => {
+    if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
+      setHasResetFiles(true);
+    }
+  }, [fileUploadsLength, selectedFilesLength]);
+
   useEffect(() => {
     if (imagesForInput === false && imageUploads.length) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
   }, [imagesForInput]);
 
+  const uploadImagesHandler = () => {
+    const imagesToUpload = selectedImages.filter((selectedImage) => {
+      const uploadedImage = imageUploads.find(
+        (imageUpload) =>
+          imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
+      );
+      return !uploadedImage;
+    });
+    imagesToUpload.forEach((image) => uploadNewImage(image));
+  };
+
+  const removeImagesHandler = () => {
+    const imagesToRemove = imageUploads.filter(
+      (imageUpload) =>
+        !selectedImages.find(
+          (selectedImage) =>
+            selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
+        ),
+    );
+    imagesToRemove.forEach((image) => removeImage(image.id));
+  };
+
   useEffect(() => {
     if (imagesForInput) {
       if (selectedImagesLength > imageUploadsLength) {
         /** User selected an image in bottom sheet attachment picker */
-        const imagesToUpload = selectedImages.filter((selectedImage) => {
-          const uploadedImage = imageUploads.find(
-            (imageUpload) =>
-              imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
-          );
-          return !uploadedImage;
-        });
-        imagesToUpload.forEach((image) => uploadNewImage(image));
-      } else if (selectedImagesLength < imageUploadsLength) {
+        uploadImagesHandler();
+      } else {
         /** User de-selected an image in bottom sheet attachment picker */
-        const imagesToRemove = imageUploads.filter(
-          (imageUpload) =>
-            !selectedImages.find(
-              (selectedImage) =>
-                selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
-            ),
-        );
-        imagesToRemove.forEach((image) => removeImage(image.id));
+        removeImagesHandler();
       }
     }
   }, [selectedImagesLength]);
 
+  useEffect(() => {
+    if (selectedFilesLength > fileUploadsLength) {
+      /** User selected a video in bottom sheet attachment picker */
+      const filesToUpload = selectedFiles.filter((selectedFile) => {
+        const uploadedFile = fileUploads.find(
+          (fileUpload) =>
+            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+        );
+        return !uploadedFile;
+      });
+      filesToUpload.forEach((file) => uploadNewFile(file));
+    } else {
+      /** User de-selected a video in bottom sheet attachment picker */
+      const filesToRemove = fileUploads.filter(
+        (fileUpload) =>
+          !selectedFiles.find(
+            (selectedFile) =>
+              selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url,
+          ),
+      );
+      filesToRemove.forEach((file) => removeFile(file.id));
+    }
+  }, [selectedFilesLength]);
+
   useEffect(() => {
     if (imagesForInput) {
       if (imageUploadsLength < selectedImagesLength) {
@@ -306,6 +360,35 @@ const MessageInputWithContext = <
     }
   }, [imageUploadsLength]);
 
+  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,
+        );
+        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 bottomsheet image picker)
+       * using `uploadNewFile` function from `MessageInputContext`.
+       **/
+      setSelectedFiles(
+        fileUploads.map((fileUpload) => ({
+          duration: fileUpload.file.duration,
+          name: fileUpload.file.name,
+          size: fileUpload.file.size,
+          type: fileUpload.file.type,
+          uri: fileUpload.file.uri,
+        })),
+      );
+    }
+  }, [fileUploadsLength]);
+
   const editingExists = !!editing;
   useEffect(() => {
     if (editing && inputBoxRef.current) {
@@ -666,6 +749,7 @@ export const MessageInput = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
+    removeFile,
     removeImage,
     resetInput,
     SendButton,
@@ -676,6 +760,7 @@ export const MessageInput = <
     setShowMoreOptions,
     showMoreOptions,
     ShowThreadMessageInChannelButton,
+    uploadNewFile,
     uploadNewImage,
   } = useMessageInputContext<StreamChatGenerics>();
 
@@ -730,6 +815,7 @@ export const MessageInput = <
         mentionedUsers,
         numberOfUploads,
         quotedMessage,
+        removeFile,
         removeImage,
         Reply,
         resetInput,
@@ -744,6 +830,7 @@ export const MessageInput = <
         t,
         thread,
         triggerType,
+        uploadNewFile,
         uploadNewImage,
         watchers,
       }}

package/src/components/Reply/Reply.tsx

@@ -69,6 +69,36 @@ type ReplyPropsWithContext<
     }>;
   };
 
+const getMessageType = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  lastAttachment: Attachment<StreamChatGenerics>,
+) => {
+  let messageType;
+
+  const isLastAttachmentFile =
+    lastAttachment.type === 'file' ||
+    lastAttachment.type === 'audio' ||
+    lastAttachment.type === 'video';
+
+  const isLastAttachmentGiphy = lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur';
+
+  const isLastAttachmentImageOrGiphy =
+    lastAttachment.type === 'image' && !lastAttachment.title_link && !lastAttachment.og_scrape_url;
+
+  const isLastAttachmentImage = lastAttachment.image_url || lastAttachment.thumb_url;
+
+  if (isLastAttachmentFile) {
+    messageType = 'file';
+  } else if (isLastAttachmentImageOrGiphy) {
+    if (isLastAttachmentImage) messageType = 'image';
+    else messageType = undefined;
+  } else if (isLastAttachmentGiphy) messageType = 'giphy';
+  else messageType = 'other';
+
+  return messageType;
+};
+
 const ReplyWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -105,20 +135,7 @@ const ReplyWithContext = <
   if (typeof quotedMessage === 'boolean') return null;
 
   const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
-
-  const messageType = lastAttachment
-    ? lastAttachment.type === 'file' || lastAttachment.type === 'audio'
-      ? 'file'
-      : lastAttachment.type === 'image' &&
-        !lastAttachment.title_link &&
-        !lastAttachment.og_scrape_url
-      ? lastAttachment.image_url || lastAttachment.thumb_url
-        ? 'image'
-        : undefined
-      : lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur'
-      ? 'giphy'
-      : 'other'
-    : undefined;
+  const messageType = lastAttachment && getMessageType(lastAttachment);
 
   const hasImage =
     !error &&

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import type { Asset } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
@@ -19,22 +18,22 @@ export type AttachmentPickerContextValue = {
    */
   bottomInset: number;
   /**
-   * Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png)
+   * Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
+   * **Default: ** [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
    */
   CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   closePicker: () => void;
   /**
-   * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png)
+   * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
+   * **Default: ** [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
    */
   FileSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   /**
-   * Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png)
+   * Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
-   * **Default: ** [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
+   * **Default: ** [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
    */
   ImageSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   /**
@@ -42,9 +41,11 @@ export type AttachmentPickerContextValue = {
    */
   maxNumberOfFiles: number;
   openPicker: () => void;
+  selectedFiles: File[];
   selectedImages: Asset[];
   setBottomInset: React.Dispatch<React.SetStateAction<number>>;
   setMaxNumberOfFiles: React.Dispatch<React.SetStateAction<number>>;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
   setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
@@ -80,6 +81,7 @@ export const AttachmentPickerProvider = ({
   const [bottomInset, setBottomInset] = useState<number>(bottomInsetValue ?? 0);
   const [maxNumberOfFiles, setMaxNumberOfFiles] = useState(10);
   const [selectedImages, setSelectedImages] = useState<Asset[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [selectedPicker, setSelectedPicker] = useState<'images'>();
   const [topInset, setTopInset] = useState<number>(value?.topInset ?? 0);
 
@@ -93,10 +95,12 @@ export const AttachmentPickerProvider = ({
 
   const combinedValue = {
     maxNumberOfFiles,
+    selectedFiles,
     selectedImages,
     selectedPicker,
     setBottomInset,
     setMaxNumberOfFiles,
+    setSelectedFiles,
     setSelectedImages,
     setSelectedPicker,
     setTopInset,

package/src/contexts/channelContext/ChannelContext.md

@@ -1,4 +1,4 @@
-Please check the `ChannelContextValue` in [ChannelContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/channelContext/ChannelContext.md), for consumable values.
+Please check the `ChannelContextValue` in [ChannelContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelContext/ChannelContext.md), for consumable values.
 Provider for this context exists in `Channel` component. And so, any child component of Channel
 can get access to context as following:
 

package/src/contexts/channelContext/ChannelContext.tsx

@@ -36,7 +36,7 @@ export type ChannelContextValue<
   /**
    * Custom UI component to display empty state when channel has no messages.
    *
-   * **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Indicators/EmptyStateIndicator.tsx)
+   * **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx)
    */
   EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
   /**
@@ -155,7 +155,7 @@ export type ChannelContextValue<
   /**
    * Custom UI component for sticky header of channel.
    *
-   * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/DateHeader.tsx)
+   * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    */
   StickyHeader?: React.ComponentType<{ dateString: string }>;
   /**

package/src/contexts/channelsContext/ChannelsContext.md

@@ -1,4 +1,4 @@
-Please check the `ChannelsContextValue` in [ChannelsContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/channelsContext/ChannelsContext.md), for consumable values.
+Please check the `ChannelsContextValue` in [ChannelsContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelsContext/ChannelsContext.md), for consumable values.
 Provider for this context exists in `ChannelList` component. And so, any child component of ChannelList
 can get access to context as following:
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -172,37 +172,37 @@ export type ChannelsContextValue<
   /**
    * Custom UI component to render preview avatar.
    *
-   * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelAvatar.tsx)
+   * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
    */
   PreviewAvatar?: React.ComponentType<ChannelAvatarProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview of latest message on channel.
    *
-   * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
+   * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
   PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render muted status.
    *
-   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
+   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
    */
   PreviewMutedStatus?: React.ComponentType<ChannelPreviewMutedStatusProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
-   * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
+   * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
    */
   PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
-   * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
+   * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
    */
   PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
-   * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
+   * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
    */
   PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps<StreamChatGenerics>>;
 };

package/src/contexts/chatContext/ChatContext.md

@@ -1,4 +1,4 @@
-Please check the `ChatContextValue` in [ChatContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/chatContext/ChatContext.tsx), for consumable values.
+Please check the `ChatContextValue` in [ChatContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/chatContext/ChatContext.tsx), for consumable values.
 Provider for this context exists in `Chat` component. And so, any child component of Chat
 can get access to context as following:
 

package/src/contexts/imageGalleryContext/ImageGalleryContext.md

@@ -1,4 +1,4 @@
-Please check the `ImageGalleryContextValue` in [ImageGalleryContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx), for consumable values.
+Please check the `ImageGalleryContextValue` in [ImageGalleryContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx), for consumable values.
 Provider for this context exists in `OverlayProvider` component. And so, any child component of OverlayProvider
 can get access to context as following:
 

package/src/contexts/keyboardContext/KeyboardContext.md

@@ -1,5 +1,5 @@
 When user focuses on input box, keyboard opens up on mobile devices. When keyboard opens, it is necessary to update the position of input box and height of content on screen
-so that it doesn't get hidden behind keyboard. This is handled by [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx) which
+so that it doesn't get hidden behind keyboard. This is handled by [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx) which
 is a HOC. It creates a context which contain following function.
 
 - **dismissKeyboard** Dismisses the keyboard and adjusts the height of content on screen.

package/src/contexts/messageContext/MessageContext.md

@@ -1,4 +1,4 @@
-Please check the `MessageContextValue` in [MessageContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/messageContext/MessageContext.tsx), for consumable values.
+Please check the `MessageContextValue` in [MessageContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageContext/MessageContext.tsx), for consumable values.
 Provider for this context exists in `Message` component. And so, any child component of `Message`
 can get access to context as following:
 

package/src/contexts/messageContext/MessageContext.tsx

@@ -61,7 +61,7 @@ export type MessageContextValue<
    * You can call methods available on the Message
    * component such as handleEdit, handleDelete, handleAction etc.
    *
-   * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+   * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
    *
    * By default, we show the overlay with all the message actions on long press.
    *
@@ -76,7 +76,7 @@ export type MessageContextValue<
    * You can call methods available on the Message
    * component such as handleEdit, handleDelete, handleAction etc.
    *
-   * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+   * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
    *
    * By default, we will dismiss the keyboard on press.
    *

package/src/contexts/messageInputContext/MessageInputContext.md

@@ -1,4 +1,4 @@
-Please check the `MessageInputContextValue` in [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/messageInputContext/MessageInputContext.tsx), for consumable values.
+Please check the `MessageInputContextValue` in [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageInputContext/MessageInputContext.tsx), for consumable values.
 Provider for this context exists in `Channel` component. And so, any child component of `Channel`
 can get access to context as following: