From da4cbdb61b0cfe6b71393ee9ede5b7dd3c4d6592 Mon Sep 17 00:00:00 2001
From: Mazen Chami <mazenchami@gmail.com>
Date: Thu, 4 Apr 2024 12:05:05 -0400
Subject: [PATCH] iOS Document Scanner fix (#132)

---
 .changeset/old-pugs-brake.md                  |   5 +
 .../screens/DocumentScannerScreen.android.tsx | 171 ++++++++++++++++++
 .../app/screens/DocumentScannerScreen.tsx     | 141 +--------------
 apps/InfiniteRedAI/package.json               |   2 +-
 4 files changed, 182 insertions(+), 137 deletions(-)
 create mode 100644 .changeset/old-pugs-brake.md
 create mode 100644 apps/InfiniteRedAI/app/screens/DocumentScannerScreen.android.tsx

diff --git a/.changeset/old-pugs-brake.md b/.changeset/old-pugs-brake.md
new file mode 100644
index 00000000..412d1e29
--- /dev/null
+++ b/.changeset/old-pugs-brake.md
@@ -0,0 +1,5 @@
+---
+"@infinitered/infinite-red-ai": patch
+---
+
+isolating document scanner to only android (fixes iOS crash)
diff --git a/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.android.tsx b/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.android.tsx
new file mode 100644
index 00000000..0a89b4e3
--- /dev/null
+++ b/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.android.tsx
@@ -0,0 +1,171 @@
+import React, { FC } from "react"
+import { observer } from "mobx-react-lite"
+import { ViewStyle, View, ImageStyle, TextStyle } from "react-native"
+import { NativeStackScreenProps } from "@react-navigation/native-stack"
+import { AppStackScreenProps } from "../navigators"
+import { Screen, Text, Icon, Button, ListItem, TextField, Toggle } from "../components"
+import { useTypedNavigation } from "../navigators/useTypedNavigation"
+import {
+  ResultFormatOptions,
+  ScannerModeOptions,
+  launchDocumentScannerAsync,
+} from "@infinitered/react-native-mlkit-document-scanner"
+import { spacing } from "app/theme"
+
+interface DocumentScannerScreenProps
+  extends NativeStackScreenProps<AppStackScreenProps<"DocumentScanner">> {}
+
+export const DocumentScannerScreen: FC<DocumentScannerScreenProps> = observer(
+  function DocumentScannerScreen() {
+    const navigation = useTypedNavigation<"DocumentScanner">()
+    const [result, setResult] = React.useState<string>("")
+    const [allowGallery, setAllowGallery] = React.useState<boolean>(false)
+    const [mode, setMode] = React.useState<ScannerModeOptions>(ScannerModeOptions.FULL)
+    const [resultFormat, setResultFormat] = React.useState<ResultFormatOptions>(
+      ResultFormatOptions.ALL,
+    )
+    const [pageLimit, setPageLimit] = React.useState<number>(1)
+
+    return (
+      <Screen
+        style={$root}
+        preset="scroll"
+        safeAreaEdges={["top", "bottom"]}
+        contentContainerStyle={{ paddingBottom: spacing.lg }}
+      >
+        <View>
+          <Icon icon={"back"} onPress={() => navigation.navigate("Home")} style={$backIcon} />
+          <Text preset={"heading"} text="Document Scanner" />
+          <Text style={$description}>
+            Configure scanner options and tap `Scan Document` to launch the modal
+          </Text>
+
+          <View style={{ gap: spacing.lg }}>
+            <ListItem
+              text="Page Limit"
+              textStyle={$optionText}
+              RightComponent={
+                <TextField
+                  value={pageLimit.toString()}
+                  onChangeText={(text) => {
+                    // parse string to int and make sure if not or less than 1, set to 1
+                    const num = parseInt(text)
+                    setPageLimit(isNaN(num) || num < 1 ? 1 : num)
+                  }}
+                  containerStyle={$pageLimit}
+                  textAlign="right"
+                />
+              }
+            />
+            <ListItem
+              text="Allow Gallery Import"
+              textStyle={$optionText}
+              RightComponent={
+                <Toggle
+                  variant="switch"
+                  value={allowGallery}
+                  onPress={() => setAllowGallery(!allowGallery)}
+                  containerStyle={$centerSwitch}
+                />
+              }
+            />
+            <ListItem
+              text="Mode"
+              textStyle={$optionText}
+              RightComponent={
+                <View style={$radioCol}>
+                  <Toggle
+                    variant="radio"
+                    value={mode === ScannerModeOptions.BASE}
+                    label="Base"
+                    onPress={() => setMode(ScannerModeOptions.BASE)}
+                  />
+                  <Toggle
+                    variant="radio"
+                    value={mode === ScannerModeOptions.BASE_WITH_FILTER}
+                    label="Base w/ Filter"
+                    onPress={() => setMode(ScannerModeOptions.BASE_WITH_FILTER)}
+                  />
+                  <Toggle
+                    variant="radio"
+                    value={mode === ScannerModeOptions.FULL}
+                    label="Full"
+                    onPress={() => setMode(ScannerModeOptions.FULL)}
+                  />
+                </View>
+              }
+            />
+            <ListItem
+              text="Result Formats"
+              textStyle={$optionText}
+              RightComponent={
+                <View style={$radioCol}>
+                  <Toggle
+                    variant="radio"
+                    value={resultFormat === ResultFormatOptions.ALL}
+                    label="All"
+                    onPress={() => setResultFormat(ResultFormatOptions.ALL)}
+                  />
+                  <Toggle
+                    variant="radio"
+                    value={resultFormat === ResultFormatOptions.PDF}
+                    label="PDF"
+                    onPress={() => setResultFormat(ResultFormatOptions.PDF)}
+                  />
+                  <Toggle
+                    variant="radio"
+                    value={resultFormat === ResultFormatOptions.JPEG}
+                    label="JPEG"
+                    onPress={() => setResultFormat(ResultFormatOptions.JPEG)}
+                  />
+                </View>
+              }
+            />
+
+            <Button
+              onPress={async () => {
+                const result = await launchDocumentScannerAsync({
+                  pageLimit,
+                  galleryImportAllowed: allowGallery,
+                  resultFormats: resultFormat,
+                  scannerMode: mode,
+                })
+                setResult(JSON.stringify(result))
+              }}
+              text="Scan Document"
+            />
+          </View>
+        </View>
+
+        <Text style={$description}>Result: {result}</Text>
+      </Screen>
+    )
+  },
+)
+
+const $root: ViewStyle = {
+  flex: 1,
+  padding: 16,
+  display: "flex",
+  flexDirection: "column",
+}
+const $backIcon: ImageStyle = { marginVertical: 8 }
+
+const $description: TextStyle = {
+  marginVertical: 8,
+  color: "rgba(0,0,0,0.6)",
+}
+
+const $optionText: TextStyle = {
+  alignSelf: "flex-start",
+  fontWeight: "bold",
+}
+
+const $radioCol: ViewStyle = {
+  width: "50%",
+  gap: spacing.md,
+}
+
+const $centerSwitch: ViewStyle = { alignSelf: "center" }
+
+const $pageLimit: ViewStyle = { flex: 1 }
diff --git a/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.tsx b/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.tsx
index 4872eac1..4b3b0d55 100644
--- a/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.tsx
+++ b/apps/InfiniteRedAI/app/screens/DocumentScannerScreen.tsx
@@ -1,15 +1,10 @@
 import React, { FC } from "react"
 import { observer } from "mobx-react-lite"
-import { ViewStyle, View, ImageStyle, TextStyle } from "react-native"
+import { ViewStyle, View, ImageStyle } from "react-native"
 import { NativeStackScreenProps } from "@react-navigation/native-stack"
 import { AppStackScreenProps } from "../navigators"
-import { Screen, Text, Icon, Button, ListItem, TextField, Toggle } from "../components"
+import { Screen, Text, Icon } from "../components"
 import { useTypedNavigation } from "../navigators/useTypedNavigation"
-import {
-  ResultFormatOptions,
-  ScannerModeOptions,
-  launchDocumentScannerAsync,
-} from "@infinitered/react-native-mlkit-document-scanner"
 import { spacing } from "app/theme"
 
 interface DocumentScannerScreenProps
@@ -17,14 +12,7 @@ interface DocumentScannerScreenProps
 
 export const DocumentScannerScreen: FC<DocumentScannerScreenProps> = observer(
   function DocumentScannerScreen() {
-    const navigation = useTypedNavigation<"ImageLabeling">()
-    const [result, setResult] = React.useState<string>("")
-    const [allowGallery, setAllowGallery] = React.useState<boolean>(false)
-    const [mode, setMode] = React.useState<ScannerModeOptions>(ScannerModeOptions.FULL)
-    const [resultFormat, setResultFormat] = React.useState<ResultFormatOptions>(
-      ResultFormatOptions.ALL,
-    )
-    const [pageLimit, setPageLimit] = React.useState<number>(1)
+    const navigation = useTypedNavigation<"DocumentScanner">()
 
     return (
       <Screen
@@ -35,109 +23,8 @@ export const DocumentScannerScreen: FC<DocumentScannerScreenProps> = observer(
       >
         <View>
           <Icon icon={"back"} onPress={() => navigation.navigate("Home")} style={$backIcon} />
-          <Text preset={"heading"} text="Document Scanner" />
-          <Text style={$description}>
-            Configure scanner options and tap `Scan Document` to launch the modal
-          </Text>
-
-          <View style={{ gap: spacing.lg }}>
-            <ListItem
-              text="Page Limit"
-              textStyle={$optionText}
-              RightComponent={
-                <TextField
-                  value={pageLimit.toString()}
-                  onChangeText={(text) => {
-                    // parse string to int and make sure if not or less than 1, set to 1
-                    const num = parseInt(text)
-                    setPageLimit(isNaN(num) || num < 1 ? 1 : num)
-                  }}
-                  containerStyle={$pageLimit}
-                  textAlign="right"
-                />
-              }
-            />
-            <ListItem
-              text="Allow Gallery Import"
-              textStyle={$optionText}
-              RightComponent={
-                <Toggle
-                  variant="switch"
-                  value={allowGallery}
-                  onPress={() => setAllowGallery(!allowGallery)}
-                  containerStyle={$centerSwitch}
-                />
-              }
-            />
-            <ListItem
-              text="Mode"
-              textStyle={$optionText}
-              RightComponent={
-                <View style={$radioCol}>
-                  <Toggle
-                    variant="radio"
-                    value={mode === ScannerModeOptions.BASE}
-                    label="Base"
-                    onPress={() => setMode(ScannerModeOptions.BASE)}
-                  />
-                  <Toggle
-                    variant="radio"
-                    value={mode === ScannerModeOptions.BASE_WITH_FILTER}
-                    label="Base w/ Filter"
-                    onPress={() => setMode(ScannerModeOptions.BASE_WITH_FILTER)}
-                  />
-                  <Toggle
-                    variant="radio"
-                    value={mode === ScannerModeOptions.FULL}
-                    label="Full"
-                    onPress={() => setMode(ScannerModeOptions.FULL)}
-                  />
-                </View>
-              }
-            />
-            <ListItem
-              text="Result Formats"
-              textStyle={$optionText}
-              RightComponent={
-                <View style={$radioCol}>
-                  <Toggle
-                    variant="radio"
-                    value={resultFormat === ResultFormatOptions.ALL}
-                    label="All"
-                    onPress={() => setResultFormat(ResultFormatOptions.ALL)}
-                  />
-                  <Toggle
-                    variant="radio"
-                    value={resultFormat === ResultFormatOptions.PDF}
-                    label="PDF"
-                    onPress={() => setResultFormat(ResultFormatOptions.PDF)}
-                  />
-                  <Toggle
-                    variant="radio"
-                    value={resultFormat === ResultFormatOptions.JPEG}
-                    label="JPEG"
-                    onPress={() => setResultFormat(ResultFormatOptions.JPEG)}
-                  />
-                </View>
-              }
-            />
-
-            <Button
-              onPress={async () => {
-                const result = await launchDocumentScannerAsync({
-                  pageLimit,
-                  galleryImportAllowed: allowGallery,
-                  resultFormats: resultFormat,
-                  scannerMode: mode,
-                })
-                setResult(JSON.stringify(result))
-              }}
-              text="Scan Document"
-            />
-          </View>
+          <Text preset={"heading"} text="Not available on iOS yet!" />
         </View>
-
-        <Text style={$description}>Result: {result}</Text>
       </Screen>
     )
   },
@@ -149,23 +36,5 @@ const $root: ViewStyle = {
   display: "flex",
   flexDirection: "column",
 }
-const $backIcon: ImageStyle = { marginVertical: 8 }
-
-const $description: TextStyle = {
-  marginVertical: 8,
-  color: "rgba(0,0,0,0.6)",
-}
 
-const $optionText: TextStyle = {
-  alignSelf: "flex-start",
-  fontWeight: "bold",
-}
-
-const $radioCol: ViewStyle = {
-  width: "50%",
-  gap: spacing.md,
-}
-
-const $centerSwitch: ViewStyle = { alignSelf: "center" }
-
-const $pageLimit: ViewStyle = { flex: 1 }
+const $backIcon: ImageStyle = { marginVertical: 8 }
diff --git a/apps/InfiniteRedAI/package.json b/apps/InfiniteRedAI/package.json
index 30be7c85..78e2ee57 100644
--- a/apps/InfiniteRedAI/package.json
+++ b/apps/InfiniteRedAI/package.json
@@ -19,7 +19,7 @@
     "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
     "release:ios": "echo 'Not implemented yet: release:ios. Use Xcode. More info: https://reactnative.dev/docs/next/publishing-to-app-store'",
     "release:android": "cd android && rm -rf app/src/main/res/drawable-* && ./gradlew assembleRelease && cd - && echo 'APK generated in ./android/app/build/outputs/apk/release/app-release.apk'",
-    "clean": "rm -rf node_modulesios /build ios android && watchman watch-del-all",
+    "clean": "rm -rf node_modules /build ios android && watchman watch-del-all",
     "clean-all": "npx react-native clean-project-auto",
     "expo:start": "expo start",
     "prebuild": "expo prebuild"