Fix various spacing issues

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

src/components/memes/memesList/memesMasonryItem.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Image, StyleSheet, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { Meme } from '../../../database';
-import { useDimensions } from '../../../contexts';
 import { RootState } from '../../../state';
+import { useImageDimensions } from '@react-native-community/hooks';
 
 const memeMasonryItemStyles = StyleSheet.create({
   view: {
@@ -24,36 +25,31 @@ const MemesMasonryItem = ({
   index: number;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
 
-  const [imageWidth, setImageWidth] = useState<number>();
-  const [imageHeight, setImageHeight] = useState<number>();
+  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
 
-  Image.getSize(meme.uri, (width, height) => {
-    const paddedWidth = (dimensions.width * 0.92) / masonryColumns - 5;
-    setImageWidth(paddedWidth);
-    setImageHeight((paddedWidth / width) * height);
-  });
+  if (loading || error || !dimensions) return <></>;
 
   return (
-    <>
-      {imageWidth && imageHeight && (
-        <TouchableHighlight
-          onPress={() => focusMeme(index)}
-          style={memeMasonryItemStyles.view}>
-          <Image
-            source={{ uri: meme.uri }}
-            style={[
-              memeMasonryItemStyles.image,
-              { width: imageWidth, height: imageHeight },
-            ]}
-          />
-        </TouchableHighlight>
-      )}
-    </>
+    <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,
+          },
+        ]}
+      />
+    </TouchableHighlight>
   );
 };