Add memes & meme-editing views

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

src/components/memes/memeCard.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+import { Meme } from '../../database';
+import { ROUTE, RootStackParamList } from '../../types';
+import { Card } from 'react-native-paper';
+import { Image, StyleSheet } from 'react-native';
+import { useDimensions } from '../../contexts';
+
+const memeCardStyles = StyleSheet.create({
+  card: {
+    margin: 5,
+  },
+});
+
+const MemeCard = ({ meme }: { meme: Meme }) => {
+  const { navigate } = useNavigation<NavigationProp<RootStackParamList>>();
+  const { dimensions } = useDimensions();
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  Image.getSize(meme.uri, (width, height) => {
+    const paddedWidth = (dimensions.width * 0.92) / 2 - 10;
+    setImageWidth(paddedWidth);
+    setImageHeight((paddedWidth / width) * height);
+  });
+
+  return (
+    <>
+      {imageWidth && imageHeight && (
+        <Card
+          onPress={() =>
+            navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() })
+          }
+          style={memeCardStyles.card}>
+          <Card.Cover
+            source={{ uri: meme.uri }}
+            style={{ width: imageWidth, height: imageHeight }}
+          />
+          <Card.Title
+            title={meme.title}
+            titleVariant="titleSmall"
+            titleNumberOfLines={3}
+          />
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default MemeCard;