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 ( ); }