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 = (