Add meme view & sharing

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

src/components/memes/memeEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { HelperText, TextInput } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useDimensions } from '../../contexts';
@@ -21,13 +21,13 @@ const memeEditorStyles = {
 };
 
 const MemeEditor = ({
-  imageUri,
+  memeUri,
   memeTitle,
   setMemeTitle,
   memeTags,
   setMemeTags,
 }: {
-  imageUri: string;
+  memeUri: string;
   memeTitle: StringValidationResult;
   setMemeTitle: (name: StringValidationResult) => void;
   memeTags: Map<string, Tag>;
@@ -38,15 +38,23 @@ const MemeEditor = ({
   const [imageWidth, setImageWidth] = useState<number>();
   const [imageHeight, setImageHeight] = useState<number>();
 
-  Image.getSize(imageUri, (width, height) => {
-    const paddedWidth = dimensions.width * 0.92;
-    const paddedHeight = Math.max(
-      Math.min((paddedWidth / width) * height, 500),
-      100,
-    );
-    setImageWidth(paddedWidth);
-    setImageHeight(paddedHeight);
-  });
+  useEffect(() => {
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    setImageWidth(undefined);
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    setImageHeight(undefined);
+
+    Image.getSize(memeUri, (width, height) => {
+      const paddedWidth = dimensions.width * 0.92;
+      const paddedHeight = Math.max(
+        Math.min((paddedWidth / width) * height, 500),
+        100,
+      );
+
+      setImageWidth(paddedWidth);
+      setImageHeight(paddedHeight);
+    });
+  }, [memeUri, dimensions.width]);
 
   if (!imageWidth || !imageHeight) return <LoadingView />;
 
@@ -64,7 +72,7 @@ const MemeEditor = ({
         {memeTitle.error}
       </HelperText>
       <Image
-        source={{ uri: imageUri }}
+        source={{ uri: memeUri }}
         style={[
           {
             width: imageWidth,