stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

package/src/a11y/hooks/useA11yLabel.ts

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { TranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { asDynamicKey } from '../../i18n/utils';
 
 /**
  * Returns the translated `a11y/...` label when the AccessibilityContext is enabled,
@@ -18,5 +19,6 @@ export const useA11yLabel = (key: string, params?: Record<string, unknown>): str
   const { enabled } = useAccessibilityContext();
   const { t } = useContext(TranslationContext);
   if (!enabled || !key) return undefined;
-  return t(key, params);
+  // `key` is a caller-supplied string, so this is the deliberate runtime-key escape hatch.
+  return t(asDynamicKey(key), params);
 };

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -27,9 +27,9 @@ export const AITypingIndicatorView = ({
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
   const { announceTypingIndicator, enabled } = useAccessibilityContext();
-  const allowedStates = {
-    [AIStates.Thinking]: t('Thinking...'),
-    [AIStates.Generating]: t('Generating...'),
+  const allowedStates: Record<string, string> = {
+    [AIStates.Thinking]: t('aiTypingIndicator.thinking.label', 'Thinking...'),
+    [AIStates.Generating]: t('aiTypingIndicator.generating.label', 'Generating...'),
   };
 
   const styles = useStyles();

package/src/components/AITypingIndicatorView/hooks/__tests__/useAIState.test.ts

@@ -0,0 +1,46 @@
+import { act, renderHook } from '@testing-library/react-native';
+
+import { AIStates } from 'stream-chat';
+
+import { initiateClientWithChannels } from '../../../../mock-builders/api/initiateClientWithChannels';
+import { convertDateToTimestamp } from '../../../../mock-builders/generator/time';
+import { useAIState } from '../useAIState';
+
+describe('useAIState', () => {
+  it('returns Idle when no channel is provided', () => {
+    const { result } = renderHook(() => useAIState(undefined));
+    expect(result.current.aiState).toBe(AIStates.Idle);
+  });
+
+  it('reflects channel.state.aiState as the ai_indicator events arrive', async () => {
+    const {
+      channels: [channel],
+      client,
+    } = await initiateClientWithChannels();
+
+    const { result } = renderHook(() => useAIState(channel));
+    expect(result.current.aiState).toBe(AIStates.Idle);
+
+    act(() => {
+      client.dispatchEvent({
+        ai_state: AIStates.Generating,
+        cid: channel.cid,
+        created_at: convertDateToTimestamp('2024-01-01T00:00:00.000Z'),
+        custom: {},
+        message_id: 'message-id',
+        type: 'ai_indicator.update',
+      });
+    });
+    expect(result.current.aiState).toBe(AIStates.Generating);
+
+    act(() => {
+      client.dispatchEvent({
+        cid: channel.cid,
+        created_at: convertDateToTimestamp('2024-01-01T00:00:00.000Z'),
+        custom: {},
+        type: 'ai_indicator.clear',
+      });
+    });
+    expect(result.current.aiState).toBe(AIStates.Idle);
+  });
+});

package/src/components/AITypingIndicatorView/hooks/useAIState.ts

@@ -1,58 +1,17 @@
-import { useEffect, useState } from 'react';
+import { AIState, AIStates, Channel } from 'stream-chat';
 
-import { AIState, Channel, Event } from 'stream-chat';
+import { useStateStore } from '../../../hooks/useStateStore';
 
-import { useChatContext } from '../../../contexts';
+// Re-export the canonical `AIStates` from the LLC so existing imports keep working
+// (`import { AIStates } from '.../AITypingIndicatorView'`).
+export { AIStates };
 
-export const AIStates = {
-  Error: 'AI_STATE_ERROR',
-  ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
-  Generating: 'AI_STATE_GENERATING',
-  Idle: 'AI_STATE_IDLE',
-  Thinking: 'AI_STATE_THINKING',
-};
+const selector = (state: { aiState: AIState }) => ({ aiState: state.aiState });
 
 /**
  * A hook that returns the current state of the AI.
  * @param {Channel} channel - The channel for which we want to know the AI state.
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
-export const useAIState = (channel?: Channel): { aiState: AIState } => {
-  const { isOnline } = useChatContext();
-
-  const [aiState, setAiState] = useState<AIState>(AIStates.Idle);
-
-  useEffect(() => {
-    if (!isOnline) {
-      setAiState(AIStates.Idle);
-    }
-  }, [isOnline]);
-
-  useEffect(() => {
-    if (!channel) {
-      return;
-    }
-
-    const indicatorChangedListener = channel.on('ai_indicator.update', (event: Event) => {
-      const { cid } = event;
-      const state = event.ai_state as AIState;
-      if (channel.cid === cid) {
-        setAiState(state);
-      }
-    });
-
-    const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
-      const { cid } = event;
-      if (channel.cid === cid) {
-        setAiState(AIStates.Idle);
-      }
-    });
-
-    return () => {
-      indicatorChangedListener.unsubscribe();
-      indicatorClearedListener.unsubscribe();
-    };
-  }, [channel]);
-
-  return { aiState };
-};
+export const useAIState = (channel?: Channel): { aiState: AIState } =>
+  useStateStore(channel?.state, selector) ?? { aiState: AIStates.Idle };

package/src/components/Accessibility/NotificationAnnouncer.tsx

@@ -3,8 +3,9 @@ import { useEffect, useRef } from 'react';
 import { useAccessibilityAnnouncer } from './useAccessibilityAnnouncer';
 
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
-import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useNetworkConnectionState } from '../Chat/hooks/useNetworkConnectionState';
+import { useSettledWSConnectionHealth } from '../Chat/hooks/useWSConnectionState';
 
 /**
  * Mirrors stream-chat-react's `<NotificationAnnouncer />`. RN does not yet have a
@@ -18,7 +19,11 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
  */
 export const NotificationAnnouncer = () => {
   const { announceConnectionState, enabled } = useAccessibilityContext();
-  const { connectionRecovering, isOnline } = useChatContext();
+  const isNetworkOnline = useNetworkConnectionState()?.isOnline;
+  const isWSOnline = useSettledWSConnectionHealth();
+  // The socket is what 'connected' means to a chat user; the device network only decides which
+  // of the two offline messages is truthful.
+  const isOnline = !!isWSOnline;
   const announce = useAccessibilityAnnouncer();
   const { t } = useTranslationContext();
   const previousIsOnlineRef = useRef<boolean | null | undefined>(undefined);
@@ -33,11 +38,16 @@ export const NotificationAnnouncer = () => {
     previousIsOnlineRef.current = isOnline;
 
     if (isOnline) {
-      announce(t('a11y/Connected'), 'polite');
+      announce(t('a11y.connection.connected.accessibilityLabel', 'Connected'), 'polite');
     } else {
-      announce(connectionRecovering ? t('a11y/Reconnecting') : t('a11y/Offline'), 'assertive');
+      announce(
+        isNetworkOnline === false
+          ? t('a11y.connection.offline.accessibilityLabel', 'Offline')
+          : t('a11y.connection.reconnecting.accessibilityLabel', 'Reconnecting'),
+        'assertive',
+      );
     }
-  }, [announce, announceConnectionState, connectionRecovering, enabled, isOnline, t]);
+  }, [announce, announceConnectionState, enabled, isNetworkOnline, isOnline, t]);
 
   return null;
 };

package/src/components/Accessibility/hooks/useIncomingMessageAnnouncements.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import type { Channel, Event, MessageResponse } from 'stream-chat';
+import type { Channel, EventPayload, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -8,29 +8,34 @@ import { useAccessibilityAnnouncer } from '../useAccessibilityAnnouncer';
 
 const MESSAGE_ANNOUNCEMENT_THROTTLE_MS = 1000;
 
-const isAnnounceableIncomingMessage = (message: MessageResponse, ownUserId?: string): boolean => {
+const isAnnounceableIncomingMessage = (
+  message: MessageResponse | LocalMessage,
+  ownUserId?: string,
+): boolean => {
   const messageUserId = message.user?.id;
   if (!message.id || !messageUserId || messageUserId === ownUserId) return false;
+  // `status` only exists on `LocalMessage`, not on a bare `MessageResponse`.
+  const status = 'status' in message ? message.status : undefined;
   return (
     message.type !== 'deleted' &&
     message.type !== 'ephemeral' &&
     message.type !== 'error' &&
     message.type !== 'system' &&
-    message.status !== 'failed' &&
-    message.status !== 'sending'
+    status !== 'failed' &&
+    status !== 'sending'
   );
 };
 
 const getSenderName = (
   message: MessageResponse,
   t: ReturnType<typeof useTranslationContext>['t'],
-) => message.user?.name?.trim() || message.user?.id || t('Anonymous');
+) => message.user?.name?.trim() || message.user?.id || t('common.anonymousUser.label', 'Anonymous');
 
 export type UseIncomingMessageAnnouncementsParams = {
+  /** Set when the list is a thread's reply list: only that thread's replies are announced. */
   activeThreadId?: string;
   channel?: Channel;
   ownUserId?: string;
-  threadList?: boolean;
 };
 
 /**
@@ -48,7 +53,6 @@ export const useIncomingMessageAnnouncements = ({
   activeThreadId,
   channel,
   ownUserId,
-  threadList = false,
 }: UseIncomingMessageAnnouncementsParams) => {
   const { announceNewMessages, enabled } = useAccessibilityContext();
   const announce = useAccessibilityAnnouncer();
@@ -67,12 +71,16 @@ export const useIncomingMessageAnnouncements = ({
 
     if (pending.count === 1) {
       announce(
-        t('a11y/New message from {{user}}', {
-          user: pending.firstSender || t('Anonymous'),
+        t('a11y.newMessage.withUser.accessibilityLabel', 'New message from {{user}}', {
+          user: pending.firstSender || t('common.anonymousUser.label', 'Anonymous'),
         }),
       );
     } else {
-      announce(t('a11y/{{count}} new messages', { count: pending.count }));
+      announce(
+        t('a11y.newMessages.withCount.accessibilityLabel', '{{count}} new messages', {
+          count: pending.count,
+        }),
+      );
     }
 
     pending.count = 0;
@@ -104,7 +112,7 @@ export const useIncomingMessageAnnouncements = ({
   useEffect(() => {
     if (!enabled || !announceNewMessages || !channel) return;
 
-    const handleMessageNew = (event: Event) => {
+    const handleMessageNew = (event: EventPayload<'message.new'>) => {
       const message = event.message;
       if (!message) return;
       if (
@@ -116,8 +124,8 @@ export const useIncomingMessageAnnouncements = ({
 
       const isReply = !!message.parent_id;
       const belongsToActiveThread = !!activeThreadId && message.parent_id === activeThreadId;
-      const shouldAnnounceInThreadList = threadList && belongsToActiveThread;
-      const shouldAnnounceInMainList = !threadList && !isReply;
+      const shouldAnnounceInThreadList = belongsToActiveThread;
+      const shouldAnnounceInMainList = !activeThreadId && !isReply;
       if (!shouldAnnounceInThreadList && !shouldAnnounceInMainList) return;
 
       if (announcedMessageIdsRef.current.has(message.id || '')) return;
@@ -144,14 +152,5 @@ export const useIncomingMessageAnnouncements = ({
         flushTimeoutRef.current = undefined;
       }
     };
-  }, [
-    activeThreadId,
-    announceNewMessages,
-    channel,
-    enabled,
-    ownUserId,
-    scheduleFlush,
-    t,
-    threadList,
-  ]);
+  }, [activeThreadId, announceNewMessages, channel, enabled, ownUserId, scheduleFlush, t]);
 };

package/src/components/Attachment/Attachment.tsx

@@ -3,11 +3,14 @@ import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 
 import {
+  getAttachmentPreviewUrl,
   isAudioAttachment,
   isFileAttachment,
   isImageAttachment,
+  isLocalUploadAttachment,
   isVideoAttachment,
   isVoiceRecordingAttachment,
+  resolveAttachmentFullByteSize,
   type Attachment as AttachmentType,
   type LocalMessage,
 } from 'stream-chat';
@@ -30,7 +33,6 @@ import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUplo
 import { isSoundPackageAvailable, isVideoPlayerAvailable } from '../../native';
 
 import { primitives } from '../../theme';
-import type { DefaultAttachmentData } from '../../types/types';
 import { FileTypes } from '../../types/types';
 import { isLocalUrl } from '../../utils/utils';
 
@@ -122,7 +124,9 @@ const areEqual = (prevProps: AttachmentPropsWithContext, nextProps: AttachmentPr
     prevAttachment.actions?.length === nextAttachment.actions?.length &&
     prevAttachment.image_url === nextAttachment.image_url &&
     prevAttachment.thumb_url === nextAttachment.thumb_url &&
-    prevAttachment.type === nextAttachment.type;
+    prevAttachment.type === nextAttachment.type &&
+    getAttachmentPreviewUrl(prevAttachment, prevAttachment.asset_url, prevAttachment.image_url) ===
+      getAttachmentPreviewUrl(nextAttachment, nextAttachment.asset_url, nextAttachment.image_url);
   if (!attachmentEqual) {
     return false;
   }
@@ -189,15 +193,15 @@ const MessageAudioAttachment = ({
   index,
   message,
 }: MessageAudioAttachmentProps) => {
-  const localId = (attachment as DefaultAttachmentData).localId;
-  const sourceUrl = attachment.asset_url ?? attachment.originalFile?.uri;
-  const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl);
+  const localId = isLocalUploadAttachment(attachment) ? attachment.localMetadata.id : undefined;
+  const sourceUrl = getAttachmentPreviewUrl(attachment, attachment.asset_url, attachment.image_url);
+  const shouldTrackPendingUpload = !!localId && isLocalUrl(sourceUrl);
   const pendingUpload = usePendingAttachmentUpload(shouldTrackPendingUpload ? localId : undefined);
   const indicator = pendingUpload.isUploading ? (
     <AttachmentFileUploadProgressIndicator
       localId={localId}
       sourceUrl={sourceUrl}
-      totalBytes={attachment.file_size}
+      totalBytes={resolveAttachmentFullByteSize(attachment)}
     />
   ) : undefined;
 

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import {
+  getAttachmentPreviewUrl,
   isLocalVoiceRecordingAttachment,
   isVoiceRecordingAttachment,
   LocalMessage,
@@ -49,10 +50,8 @@ const getAudioDurationLabel = (durationInMilliseconds: number) => {
 };
 
 export type AudioAttachmentType = AudioConfig &
-  Pick<
-    StreamAudioAttachment | StreamVoiceRecordingAttachment,
-    'waveform_data' | 'asset_url' | 'title' | 'mime_type'
-  > & {
+  Pick<StreamAudioAttachment | StreamVoiceRecordingAttachment, 'asset_url' | 'title'> & {
+    custom: StreamVoiceRecordingAttachment['custom'];
     id: string;
     type: 'audio' | 'voiceRecording';
   };
@@ -110,15 +109,16 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     indicator,
   } = props;
   const isVoiceRecording = isVoiceRecordingAttachment(item);
+  const waveformData = item.custom?.waveform_data;
 
   const audioPlayer = useAudioPlayer({
-    duration: item.duration ?? 0,
-    mimeType: item.mime_type ?? '',
+    duration: item.duration ?? item.custom?.duration ?? 0,
+    mimeType: item.custom?.mime_type ?? '',
     requester: isPreview
       ? 'preview'
       : message?.id && `${message?.parent_id ?? message?.id}${message?.id}`,
     type: isVoiceRecording ? 'voiceRecording' : 'audio',
-    uri: item.asset_url ?? '',
+    uri: getAttachmentPreviewUrl(item, item.asset_url) ?? '',
   });
   const { duration, isPlaying, position, progress, currentPlaybackRate } = useStateStore(
     audioPlayer.state,
@@ -265,13 +265,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             />
             {!hideProgressBar && (
               <View style={[styles.progressControlContainer, progressControlContainer]}>
-                {item.waveform_data ? (
+                {waveformData ? (
                   <WaveProgressBar
                     isPlaying={isPlaying}
                     onEndDrag={dragEnd}
                     onStartDrag={dragStart}
                     progress={progress}
-                    waveformData={item.waveform_data}
+                    waveformData={waveformData}
                   />
                 ) : (
                   <ProgressControl
@@ -296,7 +296,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             rate={currentPlaybackRate}
             soundRef={soundRef as RefObject<SoundReturnType>}
             testID='sound-player'
-            uri={item.asset_url}
+            uri={getAttachmentPreviewUrl(item, item.asset_url)}
           />
         )}
       </View>

package/src/components/Attachment/FileAttachment.tsx

@@ -1,7 +1,12 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import {
+  type Attachment,
+  getAttachmentPreviewUrl,
+  isLocalUploadAttachment,
+  resolveAttachmentFullByteSize,
+} from 'stream-chat';
 
 import { AttachmentFileUploadProgressIndicator } from './AttachmentFileUploadProgressIndicator';
 import { openUrlSafely } from './utils/openUrlSafely';
@@ -18,7 +23,6 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type { DefaultAttachmentData } from '../../types/types';
 
 export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
@@ -52,7 +56,7 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
   } = props;
   const { FilePreview } = useComponentsContext();
 
-  const localId = (attachment as DefaultAttachmentData).localId;
+  const localId = isLocalUploadAttachment(attachment) ? attachment.localMetadata.id : undefined;
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -98,8 +102,12 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
           indicator={
             <AttachmentFileUploadProgressIndicator
               localId={localId}
-              sourceUrl={attachment.asset_url ?? attachment.originalFile?.uri}
-              totalBytes={attachment.file_size}
+              sourceUrl={getAttachmentPreviewUrl(
+                attachment,
+                attachment.asset_url,
+                attachment.image_url,
+              )}
+              totalBytes={resolveAttachmentFullByteSize(attachment)}
             />
           }
           styles={stylesProp}

package/src/components/Attachment/FilePreview.tsx

@@ -44,9 +44,13 @@ export const FilePreview = (props: FilePreviewProps) => {
     },
   } = useTheme();
 
+  // `duration` is only populated for audio / voice-recording attachments, where it lives under
+  // `custom` (untyped on the base `Attachment`, hence the narrow field read).
+  const duration = (attachment.custom as { duration?: number } | undefined)?.duration;
+
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentIconSize} />
+      <FileAttachmentIcon mimeType={attachment.custom?.mime_type} size={attachmentIconSize} />
       <View style={[styles.details, details, stylesProp.details]}>
         <Text numberOfLines={titleNumberOfLines} style={[styles.title, title, stylesProp.title]}>
           {attachment.title}
@@ -55,9 +59,9 @@ export const FilePreview = (props: FilePreviewProps) => {
           indicator
         ) : (
           <Text style={[styles.size, fileSize, stylesProp.size]}>
-            {attachment.duration
-              ? getDurationLabelFromDuration(attachment.duration)
-              : getFileSizeDisplayText(attachment.file_size)}
+            {duration
+              ? getDurationLabelFromDuration(duration)
+              : getFileSizeDisplayText(attachment.custom?.file_size)}
           </Text>
         )}
       </View>

package/src/components/Attachment/Gallery.tsx

@@ -40,6 +40,7 @@ import { isVideoPlayerAvailable } from '../../native';
 import { primitives } from '../../theme';
 import type { ViewRef } from '../../types/react-native-compat';
 import { FileTypes } from '../../types/types';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getUrlWithoutParams } from '../../utils/utils';
 
 export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
@@ -103,9 +104,10 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     minWidth,
   };
   const imagesAndVideos = [...(images || []), ...(videos || [])];
+  const galleryItemKey = (i: Attachment) => `${getUrlOfImageAttachment(i)}${i.thumb_url}`;
   const imagesAndVideosValue = `${images?.length}${videos?.length}${images
-    ?.map((i) => `${i.image_url}${i.thumb_url}`)
-    .join('')}${videos?.map((i) => `${i.image_url}${i.thumb_url}`).join('')}`;
+    ?.map(galleryItemKey)
+    .join('')}${videos?.map(galleryItemKey).join('')}`;
   const { height, invertedDirections, thumbnailGrid, width } = useMemo(
     () =>
       buildGallery({
@@ -240,9 +242,13 @@ const GalleryThumbnail = ({
   const styles = useStyles();
   const isVideo = thumbnail.type === FileTypes.Video;
   const thumbnailAccessibilityLabel = useA11yLabel(
-    isVideo ? 'a11y/Gallery Video' : 'a11y/Gallery Image',
+    isVideo
+      ? 'attachment.gallery.video.accessibilityLabel'
+      : 'attachment.gallery.image.accessibilityLabel',
+  );
+  const thumbnailAccessibilityHint = useA11yLabel(
+    'attachment.gallery.doubleTapToOpen.accessibilityLabel',
   );
-  const thumbnailAccessibilityHint = useA11yLabel('a11y/Double tap to open');
   const thumbnailRef = useRef<ViewRef>(null);
   const openImageViewer = () => {
     if (!message) {
@@ -331,7 +337,13 @@ const GalleryThumbnail = ({
           ]}
         >
           <Text style={[styles.moreImagesText, moreImagesText]}>
-            {String(t('+{{count}}', { count: imagesAndVideos.length - 4 }))}
+            {String(
+              t('attachment.gallery.moreImages.label', {
+                count: imagesAndVideos.length - 4,
+                defaultValue_one: '+{{count}}',
+                defaultValue_other: '+{{count}}',
+              }),
+            )}
           </Text>
         </View>
       ) : null}

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -70,7 +70,9 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     >
       <View style={[styles.header, header]}>
         <icons.EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
-        <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
+        <Text style={[styles.headerText, giphyHeaderText]}>
+          {t('attachment.giphy.onlyVisibleToYou.text', 'Only visible to you')}
+        </Text>
       </View>
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -38,10 +38,10 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
 
   return (
     <View style={[styles.container, container]}>
-      <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentIconSize} />
+      <FileAttachmentIcon mimeType={attachment.custom?.mime_type} size={attachmentIconSize} />
       <View style={[styles.details, details]}>
         <Text numberOfLines={2} style={[styles.title, title]}>
-          {attachment.title ?? t('Unsupported Attachment')}
+          {attachment.title ?? t('attachment.unsupported.title', 'Unsupported Attachment')}
         </Text>
       </View>
     </View>