@ethora/chat-component-rn 26.7.9 → 26.8.1

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,16 +1,18 @@
-/** @format */
-
 import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useDispatch } from 'react-redux';
-import { ModalContainerFullScreen } from '../styledModalComponents';
+
+import {
+  ModalContainerFullScreen,
+  Viewider,
+  Label,
+  LabelData,
+  BorderedContainer,
+  CenterContainer,
+} from '../styledModalComponents';
 import ModalHeaderComponent from '../ModalHeaderComponent';
-import { ArowDownIcon } from '../../../assets/icons';
+import Button from '../../styled/Button';
+import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
-import { useChatSettingState } from '../../../hooks/useChatSettingState';
-import { chatTextStyle } from '../../../helpers/typography';
-import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -19,84 +21,65 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
-  const t = useT();
-  const dispatch = useDispatch();
-  const { config } = useChatSettingState();
-
   const options = useMemo(
     () => [
-      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
-      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
+      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
+      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
+      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
+      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
+      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
+      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
     ],
-    [t]
+    []
   );
 
-  const handleClick = useCallback(
-    (key: string) => {
-      dispatch(setActiveModal(key as any));
-    },
-    [dispatch]
-  );
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback((key: string) => {
+    dispatch(setActiveModal(key as any));
+  }, []);
 
   return (
-    <ModalContainerFullScreen style={styles.screen}>
+    <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={t('settings.menu.title')}
-        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
+        headerTitle={'Settings'}
       />
-      {/* One card per entry, rather than a single bordered block with
-        * hairline dividers — the rows are separate destinations, and the
-        * design gives each its own surface. */}
-      <View style={styles.body}>
-        {options.map((option) => (
-          <TouchableOpacity
-            key={option.key}
-            testID={`settings-row-${option.key}`}
-            activeOpacity={0.7}
-            style={styles.card}
-            onPress={() => handleClick(option.key)}
-          >
-            <Text style={styles.label}>{option.label}</Text>
-            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
-          </TouchableOpacity>
-        ))}
-      </View>
+      <CenterContainer>
+        <BorderedContainer
+          style={{
+            padding: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          {options.map((option: { value: string; key: string }, index) => (
+            <>
+              <Button
+                variant="default"
+                style={{
+                  minHeight: 40,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  width: '100%',
+                  justifyContent: 'center',
+                  borderRadius: 0,
+                  alignItems: 'flex-start',
+                }}
+                onPress={() => handleClick(option.key)}
+              >
+                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
+                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
+              </Button>
+              {index < 5 && <Viewider />}
+            </>
+          ))}
+        </BorderedContainer>
+      </CenterContainer>
     </ModalContainerFullScreen>
   );
 };
 
-const styles = StyleSheet.create({
-  screen: {
-    backgroundColor: '#E8EDF2',
-  },
-  body: {
-    width: '100%',
-    padding: 12,
-    gap: 12,
-  },
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    paddingHorizontal: 20,
-    paddingVertical: 22,
-    shadowColor: '#101828',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.06,
-    shadowRadius: 12,
-    elevation: 3,
-  },
-  label: {
-    fontSize: 17,
-    fontWeight: '500',
-    color: '#141414',
-  },
-  chevron: {
-    transform: [{ rotate: '-90deg' }],
-  },
-});
-
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,15 +86,8 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  /* Same card treatment as the room-list header: rounded bottom corners
-   * and a soft drop shadow instead of a hairline rule. */
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  shadow-color: #101828;
-  shadow-offset: 0px 4px;
-  shadow-opacity: 0.06;
-  shadow-radius: 12px;
-  elevation: 4;
+  border-bottom-width: 1px;
+  border-bottom-color: #f0f0f0;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
-import { useFileToken } from '../../hooks/useFileToken';
-import { appendFileToken } from '../../helpers/secureFileUrl';
+import React, { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { IMessage } from '../../types/types';
 import { IConfig, IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -28,21 +29,60 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
-  // Room icons can live on the membership-gated secure-files host.
-  const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
 
+  // usersSet is the canonical name store — the same one Message.tsx
+  // resolves sender names through. The preview must go through it too
+  // (mirrors web's ChatRoomItem.withAuthorFallback): a message restored
+  // from the persist cache carries only a compacted user, so reading
+  // `user.name` alone left this line showing a raw JID after a refresh.
+  const usersSet = useSelector((state: RootState) => state.rooms.usersSet) as
+    | Record<string, any>
+    | undefined;
+
+  const withAuthorFallback = useCallback(
+    (message?: IMessage): IMessage | undefined => {
+      if (!message) {return message;}
+      const rawUserId = String(message?.user?.id || '');
+      const localId = rawUserId.split('@')[0];
+      const entry = usersSet?.[localId] ?? usersSet?.[rawUserId];
+      const fromUsersSet = entry
+        ? `${entry.firstName ?? ''} ${entry.lastName ?? ''}`.trim()
+        : '';
+
+      // usersSet first, exactly like Message.tsx: it's the live store, so
+      // a renamed user updates here too. The message's own `name` is the
+      // fallback that carries broadcast/system senders ("Ethora"), which
+      // never appear in usersSet.
+      const safeName =
+        fromUsersSet ||
+        String(message?.user?.name || '').trim() ||
+        localId ||
+        rawUserId ||
+        'Unknown';
+
+      return {
+        ...message,
+        user: {
+          ...message.user,
+          name: safeName,
+        },
+      };
+    },
+    [usersSet]
+  );
+
   const lastMessage = useMemo(() => {
     if (!chat?.messages || chat.messages.length === 0) {return undefined;}
 
     for (let i = chat.messages.length - 1; i >= 0; i--) {
       const msg = chat.messages[i];
       if (!msg.deleted && !msg.isDeleted) {
-        return msg;
+        return withAuthorFallback(msg);
       }
     }
     return undefined;
-  }, [chat?.messages]);
+  }, [chat?.messages, withAuthorFallback]);
 
   // Mirrors web's formatter: tolerates undefined/garbage inputs (returns
   // undefined instead of "NaN:NaN"), and uses HH:MM today / MM/DD this
@@ -90,13 +130,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <View pointerEvents="none">
-        <ProfileImagePlaceholder
-          name={displayName}
-          icon={appendFileToken(chat?.icon, fileToken)}
-          active={false}
-        />
-      </View>
+      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
       <View
         style={{
           flexDirection: 'column',
@@ -106,9 +140,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
-          // than the ground itself, so the row separators vanished.
-          borderBottomColor: '#C6CFDA',
+          borderBottomColor: '#F0F0F0',
         }}
       >
         <View
@@ -219,11 +251,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
-          // Darker than the list's own ground (#E8EDF2), otherwise the
-          // separator disappears into it — white and the old #0052CD0D
-          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
           />
         )}
       </View>

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -8,19 +8,9 @@ import {
 } from './StyledRoomComponents';
 import { FileIcon } from '../../../assets/icons';
 import { Image, View } from 'react-native';
-import { useFileToken } from '../../../hooks/useFileToken';
-import {
-  appendFileToken,
-  isSecureFileUrl,
-  requestFileTokenRecovery,
-} from '../../../helpers/secureFileUrl';
-import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 interface LastMessageFileProps
-  extends Pick<
-    LastMessage,
-    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -28,18 +18,9 @@ const fallbackImage =
 const LastMessageFile: FC<LastMessageFileProps> = ({
   user,
   originalName,
-  fileName,
-  mimetype,
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
-  const fileToken = useFileToken();
-  // Bug #40: prefer the sender's original name over the stored hash
-  // name; only fall back to the generic "file" label when neither is
-  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
-  const displayName = originalName || fileName
-    ? getDisplayFileName({ originalName, fileName, mimetype })
-    : 'file';
 
   return (
     <LastRoomMessageContainer>
@@ -53,23 +34,18 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
       >
         {imgSrc ? (
           <Image
-            source={{ uri: appendFileToken(imgSrc, fileToken) }}
+            source={{ uri: imgSrc }}
             style={{
               borderRadius: 16,
               width: 20,
               height: 20,
             }}
-            onError={() => {
-              if (isSecureFileUrl(imgSrc)) {
-                requestFileTokenRecovery();
-              }
-              setImgSrc(fallbackImage);
-            }}
+            onError={() => setImgSrc(fallbackImage)}
           />
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />
         )}
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from 'react';
-import { useFileToken } from '../../../hooks/useFileToken';
-import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -11,7 +9,6 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { View } from 'react-native';
-import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const PhotoContainer = styled.View`
   position: relative;
@@ -26,25 +23,13 @@ const PhotoContainer = styled.View`
 `;
 
 interface LastMessagePhotoProps
-  extends Pick<
-    LastMessage,
-    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
-  > {}
+  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
   locationPreview,
   originalName,
-  fileName,
-  mimetype,
 }) => {
-  const fileToken = useFileToken();
-  // Bug #40: prefer the sender's original name over the stored hash
-  // name; only fall back to the generic "file" label when neither is
-  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
-  const displayName = originalName || fileName
-    ? getDisplayFileName({ originalName, fileName, mimetype })
-    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -57,10 +42,10 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
       >
         <PhotoContainer>
           <ShadeWrapper>
-            <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
+            <LastMessageImg src={locationPreview} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from 'react';
-import { useFileToken } from '../../../hooks/useFileToken';
-import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -10,7 +8,6 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { Text, View } from 'react-native';
-import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const VideoContainer = styled.View`
   position: relative;
@@ -41,25 +38,13 @@ const PlayButton = styled.View`
 `;
 
 interface LastMessageVideoProps
-  extends Pick<
-    LastMessage,
-    'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
-  > {}
+  extends Pick<LastMessage, 'user' | 'location' | 'originalName'> {}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
   location,
   originalName,
-  fileName,
-  mimetype,
 }) => {
-  const fileToken = useFileToken();
-  // Bug #40: prefer the sender's original name over the stored hash
-  // name; only fall back to the generic "file" label when neither is
-  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
-  const displayName = originalName || fileName
-    ? getDisplayFileName({ originalName, fileName, mimetype })
-    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -72,11 +57,11 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
       >
         <VideoContainer>
           <ShadeWrapper>
-            <Thumbnail src={appendFileToken(location, fileToken)} />
+            <Thumbnail src={location} />
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{displayName}</LastRoomMessageText>
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -345,14 +345,9 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     if (!runtime) {return;}
     try {
       if (Platform.OS === 'android') {
-        // NB: not `setAndroidAudioConfiguration` — that method has never
-        // existed on AudioSession (the old `?.` call silently no-oped, so
-        // the speaker icon toggled while audio stayed on the earpiece).
-        // `selectAudioOutput` routes directly; on Android its device ids
-        // are the literal strings 'speaker' / 'earpiece'.
-        await runtime.AudioSession.selectAudioOutput(
-          next ? 'speaker' : 'earpiece'
-        );
+        await runtime.AudioSession.setAndroidAudioConfiguration?.({
+          preferredOutputList: next ? ['speaker'] : ['earpiece'],
+        });
       } else {
         await runtime.AudioSession.setAppleAudioConfiguration?.({
           audioCategory: 'playAndRecord',

package/src/components/styled/AudioMessage.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { withFileToken } from '../../helpers/secureFileUrl';
 import {
   View,
   TouchableOpacity,
@@ -426,7 +425,7 @@ const AudioMessage = ({
     const partInfo = await FileSystem.getInfoAsync(part);
     if (!partInfo.exists) {
       const download = await withTimeout(
-        FileSystem.downloadAsync(withFileToken(src), part),
+        FileSystem.downloadAsync(src, part),
         12000,
         'audio_download_timeout'
       );

package/src/components/styled/DateLabel.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
 import { getDateLabelColor } from '../../helpers/getDateLabelColor';
+import { useT, useUiLocale } from '../../i18n/useT';
 
 interface DateLabelProps {
   date: Date;
@@ -40,6 +41,10 @@ export const StyledDateText = styled.Text<{ color?: string }>`
 `;
 
 const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
+  const t = useT();
+  // The reader's locale, so the fallback branch formats the date the way
+  // their language writes it ("15 septembre" and not "September 15").
+  const uiLocale = useUiLocale();
   const today = new Date();
   const yesterday = new Date(today);
   yesterday.setDate(today.getDate() - 1);
@@ -54,14 +59,16 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
 
   let label: string;
   if (sameDay(date, today)) {
-    label = 'Today';
+    label = t('date.today');
   } else if (sameDay(date, yesterday)) {
-    label = 'Yesterday';
+    label = t('date.yesterday');
   } else {
     const options: Intl.DateTimeFormatOptions = sameYear(date, today)
       ? { month: 'long', day: 'numeric' }
       : { month: 'long', day: 'numeric', year: 'numeric' };
-    label = date.toLocaleDateString('en-US', options);
+    // `undefined` means "the runtime's own locale", which is the right
+    // default when the host has pinned nothing — never a hardcoded 'en-US'.
+    label = date.toLocaleDateString(uiLocale, options);
   }
 
   const textColor = getDateLabelColor({ colors });

package/src/components/styled/MessageImage.tsx

@@ -1,9 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import {
-  isSecureFileUrl,
-  requestFileTokenRecovery,
-} from '../../helpers/secureFileUrl';
-import { pushLog } from '../../utils/devLogger';
 import { Container } from './StyledInputComponents/MediaComponents';
 import { useDispatch } from 'react-redux';
 import {
@@ -19,43 +14,19 @@ import {
 } from '../../helpers/mediaDimensions';
 
 interface CustomMessageImageProps {
-  /** Full-size file. Opened in the preview modal, NOT rendered inline. */
   fileURL: string;
   fileName: string;
-  /**
-   * The sender's original file name (bug #40) - kept alongside `fileName`
-   * so the preview modal's save/share/download logic can prefer it over
-   * the server's stored/hashed name.
-   */
-  originalName?: string;
   mimetype: string;
-  /**
-   * Server-generated thumbnail — what the bubble actually renders, same
-   * as the web client. The full-size original can be many megabytes and,
-   * for secure uploads, is served from a different (membership-gated)
-   * route; rendering it inline is what left the bubbles blank.
-   */
-  locationPreview?: string;
 }
 
-/** Keep the personal file token out of the logs. */
-const maskToken = (url?: string) =>
-  (url || '').replace(/([?&]ft=)[^&]*/i, '$1<redacted>');
-
 const FALLBACK_IMAGE =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
 
 const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   fileURL,
   fileName,
-  originalName,
   mimetype,
-  locationPreview,
 }) => {
-  // Preview first, original only as a fallback — mirrors the web client,
-  // where the <img> src is the preview and `fileURL` is reserved for the
-  // modal.
-  const displayURL = locationPreview || fileURL;
   const [loading, setLoading] = useState(true);
   // Start with a neutral box; swap to the real aspect ratio once the
   // image's natural dimensions are known so it's shown scaled, not cropped.
@@ -64,34 +35,28 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!displayURL) {
+    if (!fileURL) {
       return;
     }
     let active = true;
     Image.getSize(
-      displayURL,
+      fileURL,
       (w, h) => {
         if (active) {
           setDims(fitMediaDimensions(w, h));
         }
       },
-      (error) => {
-        // Keep the default box — but say WHICH url failed. A blank
-        // bubble is otherwise indistinguishable between "bad url",
-        // "403 without a token" and "host unreachable".
-        pushLog('warn', 'image: getSize failed', {
-          url: maskToken(displayURL),
-          error: (error as any)?.message || String(error),
-        });
+      () => {
+        /* keep the default box if the size probe fails */
       }
     );
     return () => {
       active = false;
     };
-  }, [displayURL]);
+  }, [fileURL]);
 
   const handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
@@ -113,7 +78,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           </View>
         )}
         <Image
-          source={{ uri: displayURL || FALLBACK_IMAGE }}
+          source={{ uri: fileURL || FALLBACK_IMAGE }}
           style={{
             width: dims.width,
             height: dims.height,
@@ -121,17 +86,6 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}
-          onError={(event) => {
-            setLoading(false);
-            pushLog('warn', 'image: load failed', {
-              url: maskToken(displayURL),
-              usingPreview: !!locationPreview,
-              error: (event as any)?.nativeEvent?.error,
-            });
-            if (isSecureFileUrl(displayURL)) {
-              requestFileTokenRecovery();
-            }
-          }}
           // The box already matches the natural aspect ratio, so 'cover'
           // fills it edge-to-edge with no actual cropping or letterboxing.
           resizeMode="cover"