Add meme view & sharing

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

src/components/memes/memeViewItem.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, useTheme } from 'react-native-paper';
+import { ImageZoom } from '@likashefqet/react-native-image-zoom';
+import { Meme } from '../../database';
+import { useDimensions } from '../../contexts';
+import { Image, View } from 'react-native';
+import styles from '../../styles';
+
+const MemeViewItem = ({ meme }: { meme: Meme }) => {
+  const { dimensions } = useDimensions();
+  const { colors } = useTheme();
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  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]);
+
+  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>
+  );
+};
+
+export default MemeViewItem;