diff --git a/src/components/Image/BaseImage.native.tsx b/src/components/Image/BaseImage.android.tsx
similarity index 100%
rename from src/components/Image/BaseImage.native.tsx
rename to src/components/Image/BaseImage.android.tsx
diff --git a/src/components/Image/BaseImage.ios.tsx b/src/components/Image/BaseImage.ios.tsx
new file mode 100644
index 000000000000..5fd7bfa5a9b1
--- /dev/null
+++ b/src/components/Image/BaseImage.ios.tsx
@@ -0,0 +1,52 @@
+import {Image as ExpoImage} from 'expo-image';
+import type {ImageLoadEventData} from 'expo-image';
+import {useCallback, useContext, useEffect, useRef} from 'react';
+import type {AttachmentSource} from '@components/Attachments/types';
+import {AttachmentStateContext} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/AttachmentStateContextProvider';
+import type {BaseImageProps} from './types';
+
+function BaseImage({onLoad, source, ...props}: BaseImageProps) {
+ const isLoadedRef = useRef(false);
+ const attachmentContext = useContext(AttachmentStateContext);
+ const {setAttachmentLoaded, isAttachmentLoaded} = attachmentContext || {};
+
+ useEffect(() => {
+ if (isAttachmentLoaded?.(source as AttachmentSource)) {
+ return;
+ }
+ setAttachmentLoaded(source as AttachmentSource, false);
+ // eslint-disable-next-line react-compiler/react-compiler
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ const imageLoadedSuccessfully = useCallback(
+ (event: ImageLoadEventData) => {
+ setAttachmentLoaded(source as AttachmentSource, true);
+ if (!onLoad) {
+ return;
+ }
+ if (isLoadedRef.current === true) {
+ return;
+ }
+
+ // We override `onLoad`, so both web and native have the same signature
+ const {width, height} = event.source;
+ isLoadedRef.current = true;
+ onLoad({nativeEvent: {width, height}});
+ },
+ [onLoad, setAttachmentLoaded, source],
+ );
+
+ return (
+
+ );
+}
+
+export default BaseImage;
diff --git a/src/components/ImageSVG/index.ios.tsx b/src/components/ImageSVG/index.ios.tsx
index f108ac962804..4e1400abb869 100644
--- a/src/components/ImageSVG/index.ios.tsx
+++ b/src/components/ImageSVG/index.ios.tsx
@@ -40,12 +40,13 @@ function ImageSVG({src, width = '100%', height = '100%', fill, contentFit = 'cov
return (
);
}