stream-chat-react-native-core 4.0.0-beta.1 → 4.0.0-beta.5

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Platform } from 'react-native';
+
 import Dayjs from 'dayjs';
 
+import type { Channel } from 'stream-chat';
+
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -9,6 +12,7 @@ import { useMutedUsers } from './hooks/useMutedUsers';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   TranslationContextValue,
   TranslationProvider,
@@ -16,12 +20,6 @@ import {
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { SDK } from '../../native';
-import { version } from '../../version.json';
-
-import type { Channel } from 'stream-chat';
-
-import type { Theme } from '../../contexts/themeContext/utils/theme';
-import type { Streami18n } from '../../utils/Streami18n';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import type { Streami18n } from '../../utils/Streami18n';
+import { version } from '../../version.json';
 
 export type ChatProps<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Chat/__tests__/Chat.test.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { Chat } from '../Chat';
 
-import { Streami18n } from '../../../utils/Streami18n';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
-import { setNetInfoFetchMock } from '../../../../jest-setup';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../Chat';
 
 const ChatContextConsumer = ({ fn }) => {
   fn(useChatContext());

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import type { NetInfoSubscription } from '@react-native-community/netinfo';
+
+import type { StreamChat, Event as StreamEvent } from 'stream-chat';
+
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
-import type { NetInfoSubscription } from '@react-native-community/netinfo';
-import type { StreamChat, Event as StreamEvent } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -9,7 +9,7 @@ import {
   StyleSheet,
   ViewStyle,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
+
 import {
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
@@ -18,6 +18,7 @@ import {
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
+
 import Animated, {
   cancelAnimation,
   Easing,
@@ -32,6 +33,10 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+import type { UserResponse } from 'stream-chat';
+
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import {
   ImageGalleryFooter,
@@ -52,9 +57,6 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
-import { vh, vw } from '../../utils/utils';
-
-import type { UserResponse } from 'stream-chat';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -65,6 +67,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
+import { vh, vw } from '../../utils/utils';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -160,6 +165,7 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
+  const [gridPhotos, setGridPhotos] = useState<Photo<Us>[]>([]);
   const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
   const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
 
@@ -180,15 +186,15 @@ export const ImageGallery = <
     : vh(100);
   const halfScreenHeight = screenHeight / 2;
   const quarterScreenHeight = screenHeight / 4;
-  const snapPoints = React.useMemo(() => [0, (screenHeight * 9) / 10], []);
+  const snapPoints = React.useMemo(() => [(screenHeight * 9) / 10], []);
 
   /**
-   * BottomSheet ref
+   * BottomSheetModal ref
    */
-  const bottomSheetRef = useRef<BottomSheet>(null);
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   /**
-   * BottomSheet state
+   * BottomSheetModal state
    */
   const [currentBottomSheetIndex, setCurrentBottomSheetIndex] = useState(0);
   const animatedBottomSheetIndex = useSharedValue(0);
@@ -344,20 +350,30 @@ export const ImageGallery = <
           attachment.type === 'image' &&
           !attachment.title_link &&
           !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
+          getUrlOfImageAttachment(attachment),
       ) || [];
 
-    const attachmentPhotos = attachmentImages.map((attachmentImage) => ({
-      channelId: cur.cid,
-      created_at: cur.created_at,
-      id: `photoId-${cur.id}-${attachmentImage.image_url || attachmentImage.thumb_url}`,
-      messageId: cur.id,
-      uri: attachmentImage.image_url || attachmentImage.thumb_url || '',
-      user: cur.user,
-      user_id: cur.user_id,
-    }));
-
-    return [...acc, ...attachmentPhotos];
+    const attachmentPhotos = attachmentImages.map((a) => {
+      const imageUrl = getUrlOfImageAttachment(a) as string;
+
+      return {
+        channelId: cur.cid,
+        created_at: cur.created_at,
+        id: `photoId-${cur.id}-${imageUrl}`,
+        messageId: cur.id,
+        original_height: a.original_height,
+        original_width: a.original_width,
+        uri: getResizedImageUrl({
+          height: screenHeight,
+          url: imageUrl,
+          width: screenWidth,
+        }),
+        user: cur.user,
+        user_id: cur.user_id,
+      };
+    });
+
+    return [...acc, ...attachmentPhotos] as Photo<Us>[];
   }, []);
 
   /**
@@ -398,8 +414,15 @@ export const ImageGallery = <
   const uriForCurrentImage = photos[selectedIndex]?.uri;
   useEffect(() => {
     setCurrentImageHeight(screenHeight);
-    if (photos[index.value]?.uri) {
-      Image.getSize(photos[index.value].uri, (width, height) => {
+    const photo = photos[index.value];
+    const height = photo?.original_height;
+    const width = photo?.original_width;
+
+    if (height && width) {
+      const imageHeight = Math.floor(height * (screenWidth / width));
+      setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+    } else if (photo?.uri) {
+      Image.getSize(photo.uri, (width, height) => {
         const imageHeight = Math.floor(height * (screenWidth / width));
         setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
       });
@@ -1038,16 +1061,22 @@ export const ImageGallery = <
   );
 
   /**
-   * Functions to open and close BottomSheet with image grid
+   * Functions toclose BottomSheetModal with image grid
    */
   const closeGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+    if (bottomSheetModalRef.current?.close) {
+      bottomSheetModalRef.current.close();
+      setGridPhotos([]);
     }
   };
+
+  /**
+   * Function to open BottomSheetModal with image grid
+   */
   const openGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.snapTo(1);
+    if (bottomSheetModalRef.current?.present) {
+      bottomSheetModalRef.current.present();
+      setGridPhotos(photos);
     }
   };
 
@@ -1153,30 +1182,32 @@ export const ImageGallery = <
         closeGridView={closeGridView}
         currentBottomSheetIndex={currentBottomSheetIndex}
       />
-      <BottomSheet
-        animatedIndex={animatedBottomSheetIndex}
-        containerHeight={fullScreenHeight}
-        handleComponent={() => (
-          <ImageGridHandle
+      <BottomSheetModalProvider>
+        <BottomSheetModal
+          animatedIndex={animatedBottomSheetIndex}
+          enablePanDownToClose={true}
+          handleComponent={() => (
+            <ImageGridHandle
+              closeGridView={closeGridView}
+              {...imageGalleryCustomComponents?.gridHandle}
+            />
+          )}
+          handleHeight={imageGalleryGridHandleHeight ?? 40}
+          index={0}
+          onChange={(index: number) => setCurrentBottomSheetIndex(index)}
+          ref={bottomSheetModalRef}
+          snapPoints={imageGalleryGridSnapPoints || snapPoints}
+        >
+          <ImageGrid
             closeGridView={closeGridView}
-            {...imageGalleryCustomComponents?.gridHandle}
+            numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+            photos={gridPhotos}
+            resetVisibleValues={resetVisibleValues}
+            setImage={setImage}
+            {...imageGalleryCustomComponents?.grid}
           />
-        )}
-        handleHeight={imageGalleryGridHandleHeight ?? 40}
-        index={0}
-        onChange={(index: number) => setCurrentBottomSheetIndex(index)}
-        ref={bottomSheetRef}
-        snapPoints={imageGalleryGridSnapPoints || snapPoints}
-      >
-        <ImageGrid
-          closeGridView={closeGridView}
-          numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-          photos={photos}
-          resetVisibleValues={resetVisibleValues}
-          setImage={setImage}
-          {...imageGalleryCustomComponents?.grid}
-        />
-      </BottomSheet>
+        </BottomSheetModal>
+      </BottomSheetModalProvider>
     </Animated.View>
   );
 };
@@ -1202,6 +1233,8 @@ export type Photo<Us extends UnknownType = DefaultUserType> = {
   channelId?: string;
   created_at?: string | Date;
   messageId?: string;
+  original_height?: number;
+  original_width?: number;
   user?: UserResponse<Us> | null;
   user_id?: string;
 };

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { vw } from '../../../utils/utils';
 
-import type { ImageStyle, StyleProp } from 'react-native';
-
 const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
 const oneEight = 1 / 8;

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

@@ -7,9 +7,8 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage } from '../../../native';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
@@ -126,9 +125,7 @@ export const ImageGalleryFooter = <Us extends UnknownType = DefaultUserType>(pro
     setShareMenuOpen(true);
     try {
       const localImage = await saveFile({
-        fileName: `${photo.user?.name || photo.user_id || 'ChatPhoto'}-${
-          photo.messageId
-        }-${selectedIndex}.jpg`,
+        fileName: `${photo.user?.id || 'ChatPhoto'}-${photo.messageId}-${selectedIndex}.jpg`,
         fromUrl: photo.uri,
       });
       await shareImage({ type: 'image/jpeg', url: localImage });

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

@@ -15,13 +15,13 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
+  TDateTimeParserOutput,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
@@ -105,16 +105,29 @@ export const ImageGalleryHeader = <Us extends UnknownType = DefaultUserType>(pro
   const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
 
   /**
-   * .calendar is required on moment types, but in reality it
-   * is unavailable on first render. We therefore check if it
-   * is available and call it, otherwise we call .fromNow.
+   * .calendar and .fromNow can be initialized after the first render,
+   * and attempting to access them at that time will cause an error
+   * to be thrown.
+   *
+   * This falls back to null if neither exist.
    */
-  const date =
-    parsedDate && isDayOrMoment(parsedDate)
-      ? parsedDate.calendar
-        ? parsedDate.calendar()
-        : parsedDate.fromNow()
-      : null;
+  const getDateObject = (date: TDateTimeParserOutput | null) => {
+    if (date === null || !isDayOrMoment(date)) {
+      return null;
+    }
+
+    if (date.calendar) {
+      return date.calendar();
+    }
+
+    if (date.fromNow) {
+      return date.fromNow();
+    }
+
+    return null;
+  };
+
+  const date = getDateObject(parsedDate);
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

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

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
-import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
-import { Avatar } from '../../Avatar/Avatar';
+import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { DefaultUserType, UnknownType } from '../../../types/types';
 import { vw } from '../../../utils/utils';
+import { Avatar } from '../../Avatar/Avatar';
 
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const styles = StyleSheet.create({
   avatarImage: {
     borderRadius: 22,
@@ -161,7 +160,7 @@ export const ImageGrid = <Us extends UnknownType = DefaultUserType>(props: Props
         { backgroundColor: white },
         contentContainer,
       ]}
-      data={imageGridItems}
+      data={imageGridItems as GridImageItem<UnknownType>[]}
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type Animated from 'react-native-reanimated';
+
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { ImageGalleryHeader } from '../ImageGalleryHeader';
+
+it('doesnt fail if fromNow is not available on first render', () => {
+  try {
+    const { getAllByText } = render(
+      <ThemeProvider>
+        <ImageGalleryHeader
+          opacity={1 as unknown as Animated.SharedValue<number>}
+          photo={{
+            id: 'id',
+            uri: 'file:///bogus/uri/to/photo.jpg',
+          }}
+          visible={1 as unknown as Animated.SharedValue<number>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByText('Unknown User')).toBeTruthy();
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      throw new Error(`Error encountered on first render of ImageGalleryHeader: ${error.message}`);
+    }
+  }
+});

package/src/components/Indicators/LoadingIndicator.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Spinner } from '../Spinner/Spinner';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Spinner } from '../Spinner/Spinner';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Message/Message.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
+import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
+import { useMessageActions } from './hooks/useMessageActions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
-import {
-  isMessageWithStylesReadByAndDateSeparator,
-  MessageType,
-} from '../MessageList/hooks/useMessageList';
-
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   ChannelContextValue,
   useChannelContext,
@@ -28,7 +26,6 @@ import {
   MessageOverlayContextValue,
   useMessageOverlayContext,
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
-import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -37,6 +34,7 @@ import {
   OverlayContextValue,
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
@@ -45,10 +43,6 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import { triggerHaptic } from '../../native';
-import { emojiRegex } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -59,8 +53,13 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
-import { useMessageActions } from './hooks/useMessageActions';
-import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
+import { emojiRegex, MessageStatusTypes } from '../../utils/utils';
+
+import {
+  isMessageWithStylesReadByAndDateSeparator,
+  MessageType,
+} from '../MessageList/hooks/useMessageList';
+import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
@@ -288,7 +287,8 @@ const MessageWithContext = <
     },
   } = useTheme();
 
-  const actionsEnabled = message.type === 'regular' && message.status === 'received';
+  const actionsEnabled =
+    message.type === 'regular' && message.status === MessageStatusTypes.RECEIVED;
 
   const isMyMessage = client && message && client.userID === message.user?.id;
 
@@ -312,7 +312,9 @@ const MessageWithContext = <
     goToMessage(quotedMessage.id);
   };
 
-  const onPress = (error = message.type === 'error' || message.status === 'failed') => {
+  const errorOrFailed = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+
+  const onPress = (error = errorOrFailed) => {
     if (dismissKeyboardOnMessageTouch) {
       Keyboard.dismiss();
     }
@@ -454,6 +456,7 @@ const MessageWithContext = <
     client,
     enforceUniqueReaction,
     message,
+    removeMessage,
     retrySendMessage,
     setEditingState,
     setQuotedMessageState,
@@ -492,6 +495,7 @@ const MessageWithContext = <
     message,
     onThreadSelect,
     openThread,
+    removeMessage,
     retrySendMessage,
     selectReaction,
     setEditingState,
@@ -501,11 +505,7 @@ const MessageWithContext = <
     t,
     updateMessage,
   });
-
-  const showMessageOverlay = async (
-    messageReactions = false,
-    error = message.type === 'error' || message.status === 'failed',
-  ) => {
+  const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
     await dismissKeyboard();
 
     const isThreadMessage = threadList || !!message.parent_id;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Avatar, AvatarProps } from '../../Avatar/Avatar';
-
 import {
   MessageContextValue,
   useMessageContext,
@@ -19,6 +17,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { Avatar, AvatarProps } from '../../Avatar/Avatar';
 
 export type MessageAvatarPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,

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

@@ -20,8 +20,6 @@ import {
 } from '../../../contexts/translationContext/TranslationContext';
 
 import { Error } from '../../../icons';
-import { vw } from '../../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes, vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -201,7 +200,7 @@ const MessageContentWithContext = <
     setMessageContentWidth(width);
   };
 
-  const error = message.type === 'error' || message.status === 'failed';
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
 

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+
 import merge from 'lodash/merge';
 
+import type { MessageFooterProps } from './MessageFooter';
 import { MessageTextContainer } from './MessageTextContainer';
 
 import {
@@ -19,10 +21,6 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
-import type { MessageFooterProps } from './MessageFooter';
-
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -33,6 +31,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   containerInner: {