Fix various spacing issues

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

src/components/memes/memesList/memesGridItem.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Image, TouchableHighlight, View } from 'react-native';
+import React from 'react';
+import { Image, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { useImageDimensions } from '@react-native-community/hooks';
 import { Meme } from '../../../database';
-import { useDimensions } from '../../../contexts';
 import { RootState } from '../../../state';
 
 const MemesGridItem = ({
@@ -14,33 +15,27 @@ const MemesGridItem = ({
   index: number;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions } = useDimensions();
+  const { width } = useSafeAreaFrame();
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
 
-  const [imageWidth, setImageWidth] = useState<number>();
-  const [imageHeight, setImageHeight] = useState<number>();
+  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
 
-  Image.getSize(meme.uri, () => {
-    const paddedWidth = (dimensions.width * 0.92 - 5) / gridColumns;
-    setImageWidth(paddedWidth);
-    setImageHeight(paddedWidth);
-  });
+  if (loading || error || !dimensions) return <></>;
 
   return (
-    <>
-      {imageWidth && imageHeight && (
-        <View>
-          <TouchableHighlight onPress={() => focusMeme(index)}>
-            <Image
-              source={{ uri: meme.uri }}
-              style={[{ width: imageWidth, height: imageHeight }]}
-            />
-          </TouchableHighlight>
-        </View>
-      )}
-    </>
+    <TouchableHighlight onPress={() => focusMeme(index)}>
+      <Image
+        source={{ uri: meme.uri }}
+        style={[
+          {
+            width: (width * 0.92 - 5) / gridColumns,
+            height: (width * 0.92 - 5) / gridColumns,
+          },
+        ]}
+      />
+    </TouchableHighlight>
   );
 };