Add meme view & sharing

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

src/components/memes/memesList/memesMasonryItem.tsx

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