Add text recognition

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

src/screens/editors/meme/memeEditor.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
-import { Image, LayoutAnimation } from 'react-native';
+import { Image, LayoutAnimation, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import Video from 'react-native-video';
-import { LoadingView, MemeFail } from '../../../components';
+import { LoadingView, MemeFail, TextOverlay } from '../../../components';
 import {
   getFilenameFromUri,
   getMemeTypeFromMimeType,
@@ -13,6 +13,9 @@ import { StagingMeme } from '../../../types';
 import { useMemeDimensions } from '../../../hooks';
 import { MEME_TYPE } from '../../../database';
 import MemeTagSelector from './memeTagSelector/memeTagSelector';
+import TextRecognition, {
+  TextRecognitionResult,
+} from '@react-native-ml-kit/text-recognition';
 
 const memeEditorStyles = {
   media: {
@@ -66,8 +69,15 @@ const MemeEditor = ({
     useMemo(() => (errorIn: Error) => setError(errorIn), [setError]),
   );
 
+  const [recognizedText, setRecognizedText] = useState<TextRecognitionResult>();
+
+  useEffect(() => {
+    if (!uri || !mimeType || !mimeType.startsWith('image')) return;
+    void TextRecognition.recognize(uri).then(setRecognizedText);
+  }, [mimeType, uri]);
+
   const mediaComponent = useMemo(() => {
-    if (!mimeType || !dimensions) return <></>;
+    if (!mimeType || !dimensions || !staging) return <></>;
 
     const dimensionStyles = {
       width: width * 0.92,
@@ -84,11 +94,35 @@ const MemeEditor = ({
       case MEME_TYPE.IMAGE:
       case MEME_TYPE.GIF: {
         return (
-          <Image
-            source={{ uri }}
-            style={[memeEditorStyles.media, dimensionStyles]}
-            resizeMode="contain"
-          />
+          <View>
+            <Image
+              source={{ uri }}
+              style={[memeEditorStyles.media, dimensionStyles]}
+              resizeMode="contain"
+            />
+            {recognizedText && (
+              <TextOverlay
+                blocks={recognizedText.blocks}
+                onTextPress={text =>
+                  setStaging({
+                    ...staging,
+                    title: validateMemeTitle(text),
+                  })
+                }
+                onTextLongPress={text =>
+                  setStaging({
+                    ...staging,
+                    title: validateMemeTitle(`${staging.title.parsed} ${text}`),
+                  })
+                }
+                imageDimensions={dimensions}
+                frameDimensions={{
+                  ...dimensionStyles,
+                  aspectRatio: dimensionStyles.width / dimensionStyles.height,
+                }}
+              />
+            )}
+          </View>
         );
       }
       case MEME_TYPE.VIDEO: {
@@ -105,7 +139,7 @@ const MemeEditor = ({
         return <></>;
       }
     }
-  }, [dimensions, mimeType, uri, width]);
+  }, [dimensions, mimeType, recognizedText, setStaging, staging, uri, width]);
 
   if (!uri || !mimeType || !staging) return <LoadingView />;