Fix layout bugs

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

src/components/memes/memeEditor.tsx

@@ -11,6 +11,19 @@ import {
   validateMemeTitle,
 } from '../../utilities';
 
+const memeEditorStyles = {
+  image: {
+    marginBottom: 15,
+    borderRadius: 5,
+  },
+  memeTagSelector: {
+    marginBottom: 10,
+  },
+  description: {
+    marginBottom: 10,
+  },
+};
+
 const MemeEditor = ({
   imageUri,
   memeTitle,
@@ -20,7 +33,7 @@ const MemeEditor = ({
   memeTags,
   setMemeTags,
 }: {
-  imageUri: string[];
+  imageUri: string;
   memeTitle: StringValidationResult;
   setMemeTitle: (name: StringValidationResult) => void;
   memeDescription: StringValidationResult;
@@ -28,14 +41,14 @@ const MemeEditor = ({
   memeTags: Map<string, Tag>;
   setMemeTags: (tags: Map<string, Tag>) => void;
 }) => {
-  const { dimensions, fixed, responsive } = useDimensions();
+  const { dimensions } = useDimensions();
 
   const [imageWidth, setImageWidth] = useState<number>();
   const [imageHeight, setImageHeight] = useState<number>();
 
   useEffect(() => {
-    Image.getSize(imageUri[0], (width, height) => {
-      const paddedWidth = dimensions.width - dimensions.width * 0.08;
+    Image.getSize(imageUri, (width, height) => {
+      const paddedWidth = dimensions.width * 0.92;
       setImageWidth(paddedWidth);
       setImageHeight((paddedWidth / width) * height);
     });
@@ -57,33 +70,31 @@ const MemeEditor = ({
         {memeTitle.error}
       </HelperText>
       <Image
-        source={{ uri: imageUri[0] }}
-        style={{
-          width: imageWidth,
-          height: imageHeight,
-          marginBottom: fixed.verticalScale(10),
-          borderRadius: fixed.verticalScale(5),
-        }}
+        source={{ uri: imageUri }}
+        style={[
+          {
+            width: imageWidth,
+            height: imageHeight,
+          },
+          memeEditorStyles.image,
+        ]}
       />
       <MemeTagSelector
         memeTags={memeTags}
         setMemeTags={setMemeTags}
-        style={{
-          marginBottom: responsive.verticalScale(10),
-        }}
+        style={memeEditorStyles.memeTagSelector}
       />
       <TextInput
         mode="outlined"
         label="Description"
         multiline
         numberOfLines={6}
-        style={{
-          marginBottom: responsive.verticalScale(15),
-        }}
         value={memeDescription.raw}
+        style={memeEditorStyles.description}
         onChangeText={description =>
           setMemeDescription(validateMemeDescription(description))
         }
+        error={!memeDescription.valid}
       />
     </>
   );