Fix various spacing issues

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

src/components/memes/memeViewItem.tsx

@@ -1,51 +1,36 @@
-import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, useTheme } from 'react-native-paper';
+import React from 'react';
 import { ImageZoom } from '@likashefqet/react-native-image-zoom';
 import { Meme } from '../../database';
-import { useDimensions } from '../../contexts';
-import { Image, View } from 'react-native';
+import { View } from 'react-native';
 import styles from '../../styles';
+import LoadingView from '../loadingView';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { useImageDimensions } from '@react-native-community/hooks';
 
 const MemeViewItem = ({ meme }: { meme: Meme }) => {
-  const { dimensions } = useDimensions();
-  const { colors } = useTheme();
+  const { height, width } = useSafeAreaFrame();
 
-  const [imageWidth, setImageWidth] = useState<number>();
-  const [imageHeight, setImageHeight] = useState<number>();
+  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
 
-  useEffect(() => {
-    Image.getSize(meme.uri, (width, height) => {
-      const ratio = width / height;
-      const screenRatio = dimensions.width / dimensions.height - 160;
-
-      if (ratio > screenRatio) {
-        setImageWidth(dimensions.width);
-        setImageHeight(dimensions.width / ratio);
-      } else {
-        setImageWidth(dimensions.height * ratio);
-        setImageHeight(dimensions.height);
-      }
-    });
-  }, [meme.uri, dimensions.width, dimensions.height]);
+  if (loading || error || !dimensions) return <LoadingView />;
 
   return (
-    <View
-      style={[
-        {
-          width: dimensions.width,
-          height: dimensions.height - 160,
-          backgroundColor: colors.background,
-        },
-        styles.centered,
-      ]}>
-      {imageWidth && imageHeight ? (
-        <ImageZoom
-          source={{ uri: meme.uri }}
-          style={{ width: imageWidth, height: imageHeight }}
-        />
-      ) : (
-        <ActivityIndicator size="large" color={colors.primary} />
-      )}
+    <View style={[{ width, height }, styles.center]}>
+      <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>
   );
 };