Improve mime type handling using magic byes

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

src/components/memes/memeEditor.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
-import { MemeFail, MemeTagSelector, LoadingView } from '..';
+import { MemeFail, MemeTagSelector } from '..';
 import { Tag } from '../../database';
 import { StringValidationResult, validateMemeTitle } from '../../utilities';
+import { Dimensions } from '../../types';
 
 const memeEditorStyles = {
   image: {
@@ -46,10 +46,7 @@ const MemeEditor = ({
   const { width } = useSafeAreaFrame();
   const { colors } = useTheme();
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: memeUri });
-  useEffect(() => setMemeError(error), [error, setMemeError]);
-
-  if (!memeError && (loading || !dimensions)) return <LoadingView />;
+  const [dimensions, setDimensions] = useState<Dimensions>();
 
   return (
     <>
@@ -64,7 +61,7 @@ const MemeEditor = ({
       <HelperText type="error" visible={!memeTitle.valid}>
         {memeTitle.error}
       </HelperText>
-      {memeError || !dimensions ? (
+      {memeError ? (
         <MemeFail
           style={[
             {
@@ -79,19 +76,31 @@ const MemeEditor = ({
         <Image
           source={{ uri: memeUri }}
           style={[
-            {
-              width: width * 0.92,
-              height: Math.max(
-                Math.min(
-                  ((width * 0.92) / dimensions.width) * dimensions.height,
-                  500,
-                ),
-                100,
-              ),
-            },
+            dimensions
+              ? {
+                  width: width * 0.92,
+                  height: Math.max(
+                    Math.min(
+                      ((width * 0.92) / dimensions.width) * dimensions.height,
+                      500,
+                    ),
+                    100,
+                  ),
+                }
+              : {
+                  width: width * 0.92,
+                  height: width * 0.92,
+                },
             memeEditorStyles.image,
           ]}
           resizeMode="contain"
+          onLoad={event => {
+            setDimensions({
+              width: event.nativeEvent.source.width,
+              height: event.nativeEvent.source.height,
+            });
+          }}
+          onError={event => setMemeError(event.nativeEvent.error as Error)}
         />
       )}
       <Text