diff --git a/native/media/encrypted-image.react.js b/native/media/encrypted-image.react.js --- a/native/media/encrypted-image.react.js +++ b/native/media/encrypted-image.react.js @@ -36,6 +36,7 @@ const connectionStatus = useSelector(state => state.connection.status); const prevConnectionStatusRef = React.useRef(connectionStatus); const [attempt, setAttempt] = React.useState(0); + const [errorOccured, setErrorOccured] = React.useState(false); if (prevConnectionStatusRef.current !== connectionStatus) { if (!source && connectionStatus === 'connected') { @@ -79,8 +80,7 @@ mediaCache?.set(blobURI, result.uri); setSource({ uri: result.uri }); } else { - // Setting an invalid uri will cause the Image to run onError - setSource({ uri: 'data:,' }); + setErrorOccured(true); } } }; @@ -107,6 +107,7 @@ style={style} invisibleLoad={invisibleLoad} key={attempt} + errorOccured={errorOccured} /> ); } diff --git a/native/media/loadable-image.react.js b/native/media/loadable-image.react.js --- a/native/media/loadable-image.react.js +++ b/native/media/loadable-image.react.js @@ -16,9 +16,10 @@ +spinnerColor: string, +style: ImageStyle, +invisibleLoad: boolean, + +errorOccured?: boolean, }; function LoadableImage(props: Props): React.Node { - const { source, placeholder, onLoad: onLoadProp } = props; + const { source, placeholder, onLoad: onLoadProp, errorOccured } = props; const styles = useStyles(unboundStyles); const [loaded, setLoaded] = React.useState(false); @@ -52,7 +53,13 @@ } let statusIndicator; - if (!loaded) { + if (error || errorOccured) { + statusIndicator = ( + + + + ); + } else if (!loaded) { statusIndicator = (