stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

package/lib/typescript/contexts/messageOverlayContext/MessageOverlayContext.d.ts

@@ -1,15 +1,16 @@
 import React, { PropsWithChildren } from 'react';
 import type { Attachment } from 'stream-chat';
-import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
-import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
-import type { MessagesContextValue } from '../messagesContext/MessagesContext';
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { MessageActionListItemProps, MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
+import type { MessageActionListItemProps, MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
+import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
 import type { DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
+import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
 export declare type MessageOverlayData<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = DefaultCommandType, Ev extends UnknownType = DefaultEventType, Me extends UnknownType = DefaultMessageType, Re extends UnknownType = DefaultReactionType, Us extends UnknownType = DefaultUserType> = {
     alignment?: Alignment;
     clientId?: string;
@@ -49,6 +50,7 @@ export declare type MessageOverlayContextValue<At extends UnknownType = DefaultA
      * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageOverlay/OverlayReactions.tsx)
      */
     OverlayReactions: React.ComponentType<OverlayReactionsProps>;
+    OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
     reset: () => void;
     setData: React.Dispatch<React.SetStateAction<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>>>;
     data?: MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>;

package/lib/typescript/contexts/messageOverlayContext/hooks/useResettableState.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Wrapper around useState that provides a `reset`
+ * function to reset the state to its initial value.
+ *
+ * Will not set state after being unmounted.
+ * */
+export declare const useResettableState: <T>(values: T) => {
+    data: T;
+    reset: () => void;
+    setData: import("react").Dispatch<import("react").SetStateAction<T>>;
+};

package/lib/typescript/contexts/messageOverlayContext/hooks/useResettableState.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { TouchableOpacityProps } from 'react-native';
+import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 import type { ChannelState, MessageResponse } from 'stream-chat';
-import type { Alignment } from '../messageContext/MessageContext';
-import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
-import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
-import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
 import type { CardProps } from '../../components/Attachment/Card';
@@ -20,26 +15,31 @@ import type { MessageAvatarProps } from '../../components/Message/MessageSimple/
 import type { MessageContentProps } from '../../components/Message/MessageSimple/MessageContent';
 import type { MessageDeletedProps } from '../../components/Message/MessageSimple/MessageDeleted';
 import type { MessageFooterProps } from '../../components/Message/MessageSimple/MessageFooter';
-import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 import type { MessageRepliesProps } from '../../components/Message/MessageSimple/MessageReplies';
 import type { MessageRepliesAvatarsProps } from '../../components/Message/MessageSimple/MessageRepliesAvatars';
-import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
+import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
+import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { InlineDateSeparatorProps } from '../../components/MessageList/InlineDateSeparator';
 import type { MessageListProps } from '../../components/MessageList/MessageList';
-import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
 import type { MessageSystemProps } from '../../components/MessageList/MessageSystem';
+import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
+import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
 import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
-import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { ReplyProps } from '../../components/Reply/Reply';
 import type { FlatList } from '../../native';
 import type { DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { Alignment } from '../messageContext/MessageContext';
+import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
+import type { TDateTimeParserInput } from '../translationContext/TranslationContext';
 export declare type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
 export declare type MessagesContextValue<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = DefaultCommandType, Ev extends UnknownType = DefaultEventType, Me extends UnknownType = DefaultMessageType, Re extends UnknownType = DefaultReactionType, Us extends UnknownType = DefaultUserType> = {
     /**

package/lib/typescript/contexts/overlayContext/OverlayContext.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
-import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
-import type { DeepPartial } from '../themeContext/ThemeContext';
-import type { Theme } from '../themeContext/utils/theme';
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType, UnknownType } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
+import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
+import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
+import type { DeepPartial } from '../themeContext/ThemeContext';
+import type { Theme } from '../themeContext/utils/theme';
 export declare type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 export declare type OverlayContextValue = {
     overlay: Overlay;
@@ -18,7 +18,7 @@ export declare type OverlayContextValue = {
     translucentStatusBar?: boolean;
 };
 export declare const OverlayContext: React.Context<OverlayContextValue>;
-export declare type OverlayProviderProps<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = DefaultCommandType, Ev extends UnknownType = DefaultEventType, Me extends UnknownType = DefaultMessageType, Re extends UnknownType = DefaultReactionType, Us extends UnknownType = DefaultUserType> = Partial<AttachmentPickerProps> & Partial<Pick<AttachmentPickerContextValue, 'attachmentPickerBottomSheetHeight' | 'attachmentSelectionBarHeight' | 'bottomInset' | 'CameraSelectorIcon' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'topInset'>> & ImageGalleryCustomComponents<Us> & Partial<Pick<MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions'>> & Pick<OverlayContextValue, 'translucentStatusBar'> & {
+export declare type OverlayProviderProps<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = DefaultCommandType, Ev extends UnknownType = DefaultEventType, Me extends UnknownType = DefaultMessageType, Re extends UnknownType = DefaultReactionType, Us extends UnknownType = DefaultUserType> = Partial<AttachmentPickerProps> & Partial<Pick<AttachmentPickerContextValue, 'attachmentPickerBottomSheetHeight' | 'attachmentSelectionBarHeight' | 'bottomInset' | 'CameraSelectorIcon' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'topInset'>> & ImageGalleryCustomComponents<Us> & Partial<Pick<MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions' | 'OverlayReactionsAvatar'>> & Pick<OverlayContextValue, 'translucentStatusBar'> & {
     overlayOpacity: Animated.SharedValue<number>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;

package/lib/typescript/contexts/suggestionsContext/SuggestionsContext.d.ts

@@ -1,10 +1,10 @@
 import React, { PropsWithChildren } from 'react';
 import type { CommandResponse, UserResponse } from 'stream-chat';
 import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
-import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
-import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data/compiled';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
 export declare type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 export declare const isSuggestionCommand: <Co extends string = import("stream-chat").LiteralStringForUnion, Us extends UnknownType = DefaultUserType>(suggestion: Suggestion<Co, Us>) => suggestion is SuggestionCommand<Co>;
 export declare const isSuggestionEmoji: <Co extends string = import("stream-chat").LiteralStringForUnion, Us extends UnknownType = DefaultUserType>(suggestion: Suggestion<Co, Us>) => suggestion is Emoji;

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

@@ -128,6 +128,11 @@ export declare type Theme = {
         message: TextStyle & {
             fontWeight: TextStyle['fontWeight'];
         };
+        mutedStatus: {
+            height: number;
+            iconStyle: ViewStyle;
+            width: number;
+        };
         row: ViewStyle;
         title: TextStyle;
         unreadContainer: ViewStyle;
@@ -396,13 +401,16 @@ export declare type Theme = {
         gallery: {
             galleryContainer: ViewStyle;
             galleryItemColumn: ViewStyle;
-            halfSize: ViewStyle['height'];
+            gridHeight: number;
+            gridWidth: number;
             image: ImageStyle;
             imageContainer: ViewStyle;
+            maxHeight: number;
+            maxWidth: number;
+            minHeight: number;
+            minWidth: number;
             moreImagesContainer: ViewStyle;
             moreImagesText: TextStyle;
-            size: ViewStyle['height'];
-            width: ViewStyle['width'];
         };
         giphy: {
             cancel: TextStyle;

package/lib/typescript/hooks/useStreami18n.d.ts

@@ -1,5 +1,5 @@
-import { Streami18n } from '../utils/Streami18n';
 import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import { Streami18n } from '../utils/Streami18n';
 export declare const useStreami18n: ({ i18nInstance, setTranslators, }: {
     setTranslators: React.Dispatch<React.SetStateAction<TranslationContextValue>>;
     i18nInstance?: Streami18n | undefined;

package/lib/typescript/utils/Streami18n.d.ts

@@ -1,5 +1,7 @@
 import Dayjs from 'dayjs';
 import { FallbackLng, TFunction } from 'i18next';
+import type moment from 'moment';
+import type { TDateTimeParser } from '../contexts/translationContext/TranslationContext';
 import enTranslations from '../i18n/en.json';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/hi';
@@ -15,8 +17,6 @@ import 'dayjs/locale/tr';
  * sure we don't mess up languages in other places in the app.
  */
 import 'dayjs/locale/en';
-import type moment from 'moment';
-import type { TDateTimeParser } from '../contexts/translationContext/TranslationContext';
 import type { UnknownType } from '../types/types';
 declare type Options = {
     DateTimeParser?: typeof Dayjs | typeof moment;

package/lib/typescript/utils/getResizedImageUrl.d.ts

@@ -0,0 +1,19 @@
+declare type GetResizedImageUrlParams = {
+    url: string;
+    height?: string | number;
+    width?: string | number;
+};
+/**
+ * Any file or image upload done through stream's chat SDK or components get uploaded
+ * to CloudFront CDN. Following function returns a url of resized image (to given width and height).
+ * It can be used to avoid rendering heavy images on UI, for the sake of performance.
+ *
+ * This function accepts an object with following properties:
+ * - height: height of the resized image.
+ * - url: url of the image.
+ * - width: width of the resized image.
+ *
+ * @returns {string} Url of the image with given height and width.
+ */
+export declare function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams): string;
+export {};

package/lib/typescript/utils/getUrlOfImageAttachment.d.ts

@@ -0,0 +1,7 @@
+import type { Attachment } from 'stream-chat';
+/**
+ * Extract url of image from image attachment.
+ * @param image Image attachment
+ * @returns {string}
+ */
+export declare function getUrlOfImageAttachment(image: Attachment): string | undefined;

package/lib/typescript/utils/utils.d.ts

@@ -1,9 +1,9 @@
-import { Emoji } from '../emoji-data/compiled';
 import type React from 'react';
 import type { DebouncedFunc } from 'lodash';
 import type { Channel, CommandResponse, StreamChat } from 'stream-chat';
 import type { MentionAllAppUsersQuery } from '../contexts/messageInputContext/MessageInputContext';
 import type { SuggestionCommand, SuggestionComponentType, SuggestionUser } from '../contexts/suggestionsContext/SuggestionsContext';
+import { Emoji } from '../emoji-data/compiled';
 import type { IconProps } from '../icons/utils/base';
 import type { DefaultAttachmentType, DefaultChannelType, DefaultCommandType, DefaultEventType, DefaultMessageType, DefaultReactionType, DefaultUserType, UnknownType } from '../types/types';
 export declare type ReactionData = {
@@ -21,6 +21,11 @@ export declare const ProgressIndicatorTypes: {
     IN_PROGRESS: 'in_progress';
     RETRY: 'retry';
 };
+export declare const MessageStatusTypes: {
+    FAILED: string;
+    RECEIVED: string;
+    SENDING: string;
+};
 export declare const queryMembersDebounced: DebouncedFunc<(<At extends UnknownType = DefaultAttachmentType, Ch extends UnknownType = DefaultChannelType, Co extends string = import("stream-chat").LiteralStringForUnion, Ev extends UnknownType = UnknownType, Me extends UnknownType = UnknownType, Re extends UnknownType = UnknownType, Us extends UnknownType = DefaultUserType>(channel: Channel<At, Ch, Co, Ev, Me, Re, Us>, query: SuggestionUser<Us>["name"], onReady?: ((users: SuggestionUser<Us>[]) => void) | undefined, options?: {
     limit?: number;
 }) => Promise<void>)>;

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.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -29,7 +29,7 @@
     "copy-translations": "echo '\u001b[34mℹ\u001b[0m Copying translation files to \u001b[34mlib/typescript/i18n\u001b[0m' && cp -R -f ./src/i18n ./lib/typescript/i18n && echo '\u001b[32m✓\u001b[0m Done Copying Translations'",
     "docs": "styleguidist build",
     "docs-server": "styleguidist server",
-    "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
+    "eslint": "eslint 'src/**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
     "lint": "prettier --ignore-path ../.prettierignore --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn run validate-translations",
     "lint-fix": "prettier --ignore-path ../.prettierignore --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0",
     "prepare": "yarn run build",
@@ -70,8 +70,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.13.10",
-    "@gorhom/bottom-sheet": "3.6.4",
-    "anchorme": "^1.1.2",
+    "@gorhom/bottom-sheet": "4.1.5",
     "dayjs": "1.10.5",
     "file-loader": "6.2.0",
     "i18next": "20.2.4",
@@ -81,14 +80,9 @@
     "path": "0.12.7",
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
-    "stream-chat": "^4.4.3"
+    "stream-chat": "^5.1.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "^1.8.0",
-    "react-native-reanimated": "^2.0.0",
     "react-native-svg": "^12.1.0"
   },
   "devDependencies": {
@@ -111,17 +105,19 @@
     "@types/react": "17.0.5",
     "@types/react-native": "0.65.1",
     "@types/react-test-renderer": "17.0.1",
-    "@typescript-eslint/eslint-plugin": "4.24.0",
-    "@typescript-eslint/parser": "4.24.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "babel-plugin-i18next-extract": "0.8.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-react-native-web": "0.16.3",
-    "eslint": "7.26.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-markdown": "2.1.0",
     "eslint-plugin-prettier": "3.4.0",

package/src/components/Attachment/Attachment.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
+import type { Attachment as AttachmentType } from 'stream-chat';
+
 import { AttachmentActions as AttachmentActionsDefault } from '../../components/Attachment/AttachmentActions';
 import { Card as CardDefault } from '../../components/Attachment/Card';
+import { FileAttachment as FileAttachmentDefault } from '../../components/Attachment/FileAttachment';
 import { Gallery as GalleryDefault } from '../../components/Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../../components/Attachment/Giphy';
-import { FileAttachment as FileAttachmentDefault } from '../../components/Attachment/FileAttachment';
 import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 
-import type { Attachment as AttachmentType } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/Attachment/AttachmentActions.tsx

@@ -9,14 +9,14 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/Attachment/Card.tsx

@@ -12,6 +12,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -21,10 +23,6 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { makeImageCompatibleUrl } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -35,6 +33,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   authorName: { fontSize: 14.5, fontWeight: '600' },

package/src/components/Attachment/FileAttachment.tsx

@@ -10,6 +10,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { AttachmentActions as AttachmentActionsDefault } from '../../components/Attachment/AttachmentActions';
 import { FileIcon as FileIconDefault } from '../../components/Attachment/FileIcon';
 import {
@@ -21,10 +23,6 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vw } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -35,6 +33,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Attachment/FileIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import { Audio } from '../../icons/Audio';
@@ -17,12 +18,11 @@ import { RTF } from '../../icons/RTF';
 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 { XLS } from '../../icons/XLS';
 import { XLSX } from '../../icons/XLSX';
 import { ZIP } from '../../icons/ZIP';
 
-import type { IconProps } from '../../icons/utils/base';
-
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
 const audioFileTypes = [
   'audio/1d-interleaved-parityfec',