Add meme view & sharing

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

src/components/memes/memesList/memesGridItem.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Image, TouchableHighlight, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { Meme } from '../../../database';
+import { useDimensions } from '../../../contexts';
+import { RootState } from '../../../state';
+
+const MemesGridItem = ({
+  meme,
+  index,
+  focusMeme,
+}: {
+  meme: Meme;
+  index: number;
+  focusMeme: (index: number) => void;
+}) => {
+  const { dimensions } = useDimensions();
+  const gridColumns = useSelector(
+    (state: RootState) => state.settings.gridColumns,
+  );
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  Image.getSize(meme.uri, () => {
+    const paddedWidth = (dimensions.width * 0.92 - 5) / gridColumns;
+    setImageWidth(paddedWidth);
+    setImageHeight(paddedWidth);
+  });
+
+  return (
+    <>
+      {imageWidth && imageHeight && (
+        <View>
+          <TouchableHighlight onPress={() => focusMeme(index)}>
+            <Image
+              source={{ uri: meme.uri }}
+              style={[{ width: imageWidth, height: imageHeight }]}
+            />
+          </TouchableHighlight>
+        </View>
+      )}
+    </>
+  );
+};
+
+export default MemesGridItem;