Add broken URI handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/memes/memeViewItem.tsx

@@ -5,6 +5,7 @@ import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
 import LoadingView from '../loadingView';
 import { Meme } from '../../database';
+import MemeFail from './memeFail';
 
 const memeViewItemStyles = StyleSheet.create({
   view: {
@@ -18,25 +19,42 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
 
   const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
 
-  if (loading || error || !dimensions) return <LoadingView />;
+  if (!error && (loading || !dimensions)) {
+    return (
+      <View style={{ width, height }}>
+        <LoadingView />
+      </View>
+    );
+  }
 
   return (
     <View style={[{ width, height }, memeViewItemStyles.view]}>
-      <ImageZoom
-        source={{ uri: meme.uri }}
-        style={
-          dimensions.aspectRatio > width / (height - 128)
-            ? {
-                width,
-                height: width / (dimensions.width / dimensions.height),
-              }
-            : {
-                width: (height - 128) * (dimensions.width / dimensions.height),
-                height: height - 128,
-              }
-        }
-        minScale={0.5}
-      />
+      {error || !dimensions ? (
+        <MemeFail
+          style={{
+            width: Math.min(width, height - 128),
+            height: Math.min(width, height - 128),
+          }}
+          iconSize={50}
+        />
+      ) : (
+        <ImageZoom
+          source={{ uri: meme.uri }}
+          style={
+            dimensions.aspectRatio > width / (height - 128)
+              ? {
+                  width,
+                  height: width / (dimensions.width / dimensions.height),
+                }
+              : {
+                  width:
+                    (height - 128) * (dimensions.width / dimensions.height),
+                  height: height - 128,
+                }
+          }
+          minScale={0.5}
+        />
+      )}
     </View>
   );
 };