Add broken URI handling

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

src/components/memes/memesList/memesMasonryItem.tsx

@@ -5,6 +5,8 @@ import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { MemeFail } from '..';
+import { getFontAwesome5IconSize } from '../../../utilities';
 
 const memeMasonryItemStyles = StyleSheet.create({
   view: {
@@ -32,23 +34,36 @@ const MemesMasonryItem = ({
 
   const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
 
-  if (loading || error || !dimensions) return <></>;
+  if (!error && (loading || !dimensions)) return <></>;
 
   return (
     <TouchableHighlight
       onPress={() => focusMeme(index)}
       style={memeMasonryItemStyles.view}>
-      <Image
-        source={{ uri: meme.uri }}
-        style={[
-          memeMasonryItemStyles.image,
-          {
-            width: (width * 0.92) / masonryColumns - 5,
-            height:
-              ((width * 0.92) / masonryColumns - 5) / dimensions.aspectRatio,
-          },
-        ]}
-      />
+      {error || !dimensions ? (
+        <MemeFail
+          style={[
+            memeMasonryItemStyles.image,
+            {
+              width: (width * 0.92) / masonryColumns - 5,
+              height: (width * 0.92) / masonryColumns - 5,
+            },
+          ]}
+          iconSize={getFontAwesome5IconSize(masonryColumns)}
+        />
+      ) : (
+        <Image
+          source={{ uri: meme.uri }}
+          style={[
+            memeMasonryItemStyles.image,
+            {
+              width: (width * 0.92) / masonryColumns - 5,
+              height:
+                ((width * 0.92) / masonryColumns - 5) / dimensions.aspectRatio,
+            },
+          ]}
+        />
+      )}
     </TouchableHighlight>
   );
 };