Merge pull request 'ivan/react-native-vision-camera-submodule' (#68) from ivan/react-native-vision-camera-submodule into master

Reviewed-on: railbird/rn-playground#68
Reviewed-by: Kat Huang <kkathuang@gmail.com>

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*.json]
+end_of_line = lf
+charset = utf-8
+indent_style = space
+indent_size =  2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1 @@
+/react-native-vision-camera/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "react-native-vision-camera"]
+	path = react-native-vision-camera
+	url = https://dev.railbird.ai/railbird/react-native-vision-camera.git

android/app/build.gradle

@@ -174,9 +174,11 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    implementation project(':react-native-vision-camera')
 }
 
 apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
 applyNativeModulesAppBuildGradle(project)
 
-apply plugin: 'com.google.gms.google-services'
+apply plugin: 'com.google.gms.google-services'

android/app/src/main/java/android/railbird/app/MainApplication.java

@@ -15,6 +15,7 @@ import com.facebook.soloader.SoLoader;
 
 import expo.modules.ApplicationLifecycleDispatcher;
 import expo.modules.ReactNativeHostWrapper;
+import com.mrousavy.camera.CameraPackage;
 
 import java.util.List;
 
@@ -32,7 +33,8 @@ public class MainApplication extends Application implements ReactApplication {
         @SuppressWarnings("UnnecessaryLocalVariable")
         List<ReactPackage> packages = new PackageList(this).getPackages();
         // Packages that cannot be autolinked yet can be added manually here, for example:
-        // packages.add(new MyReactNativePackage());
+            // packages.add(new MyReactNativePackage());
+        packages.add(new CameraPackage());
         return packages;
       }
 

android/build.gradle

@@ -20,6 +20,7 @@ buildscript {
         classpath 'com.google.gms:google-services:4.3.3'
         classpath('com.android.tools.build:gradle:7.4.2')
         classpath('com.facebook.react:react-native-gradle-plugin')
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.22")
     }
 }
 

android/settings.gradle

@@ -1,10 +1,17 @@
 rootProject.name = 'Railbird'
 
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
+
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
+
 useExpoModules()
 
 apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+
 applyNativeModulesSettingsGradle(settings)
 
+include ':react-native-vision-camera'
+project(':react-native-vision-camera').projectDir = new File(rootProject.projectDir, '../react-native-vision-camera/package/android')
+
 include ':app'
 includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile())

app.json

@@ -11,9 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
+    "assetBundlePatterns": ["**/*"],
-      "**/*"
-    ],
     "plugins": [
       "@react-native-firebase/app",
       "@react-native-firebase/auth",

babel.config.js

@@ -1,16 +1,34 @@
-module.exports = function(api) {
+const path = require("path");
-    api.cache(true);
+const pak = require("./react-native-vision-camera/package/package.json");
-    return {
+
-        presets: ["babel-preset-expo"],
+module.exports = function (api) {
-        plugins: [
+  api.cache(true);
-            ["module:react-native-dotenv", {
+  return {
-                "moduleName": "@env",
+    presets: ["babel-preset-expo"],
-                "path": ".env",
+    plugins: [
-                "safe": false,
+      [
-                "allowUndefined": true,
+        "module:react-native-dotenv",
-                "verbose": false,
+        {
-            }],
+          moduleName: "@env",
-            'react-native-reanimated/plugin',
+          path: ".env",
-        ],
+          safe: false,
-    };
+          allowUndefined: true,
+          verbose: false,
+        },
+      ],
+      "react-native-reanimated/plugin",
+      [
+        "module-resolver",
+        {
+          alias: {
+            [pak.name]: path.join(
+              __dirname,
+              "./react-native-vision-camera/package",
+              pak.source,
+            ),
+          },
+        },
+      ],
+    ],
+  };
 };

component/video/camera.tsx

@@ -1,57 +1,69 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from "react";
-import { Button, StyleSheet, Text, View } from 'react-native'
+import { Button, StyleSheet, Text, View } from "react-native";
-import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera'
+import {
-import { RecordingButton } from './capture-button'
+  Camera,
-import { useIsForeground } from './is-foreground'
+  useCameraPermission,
+  useCameraDevice,
+  useCameraFormat,
+  PhotoFile,
+  VideoFile,
+  CameraRuntimeError,
+  Orientation,
+  // @ts-ignore
+} from "react-native-vision-camera";
+import { RecordingButton } from "./capture-button";
+import { useIsForeground } from "./is-foreground";
 
 export default function CameraScreen(): React.ReactElement {
-  const camera = useRef<Camera>(null)
+  const camera = useRef<Camera>(null);
-  const { hasPermission, requestPermission } = useCameraPermission()
+  const { hasPermission, requestPermission } = useCameraPermission();
-  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
+  const [isCameraInitialized, setIsCameraInitialized] =
+    useState<boolean>(false);
 
-  const isForeground: boolean = useIsForeground()
+  const isForeground: boolean = useIsForeground();
-  const isActive: boolean = isForeground // Should be combined with isFocused hook
+  const isActive: boolean = isForeground; // Should be combined with isFocused hook
 
   const onError = useCallback((error: CameraRuntimeError) => {
-    console.error(error)
+    console.error(error);
-  }, [])
+  }, []);
 
   const onInitialized = useCallback(() => {
-    console.log('Camera initialized!')
+    console.log("Camera initialized!");
-    setIsCameraInitialized(true)
+    setIsCameraInitialized(true);
-  }, [])
+  }, []);
 
-  const onMediaCaptured = useCallback(
+  const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
-    (media: PhotoFile | VideoFile) => {
+    console.log(`Media captured! ${JSON.stringify(media)}`);
-      console.log(`Media captured! ${JSON.stringify(media)}`)
+  }, []);
-    },
-    [],
-  )
 
   if (!hasPermission) {
-    requestPermission()
+    requestPermission();
     // Error handling in case they refuse to give permission
   }
 
-  const device = useCameraDevice('back')
+  const device = useCameraDevice("back");
   const format = useCameraFormat(device, [
     { videoResolution: { width: 3048, height: 2160 } },
-    { fps: 60 }
+    { fps: 60 },
-  ]) // this sets as a target
+  ]); // this sets as a target
 
   //Orientation detection
-  const [orientation, setOrientation] = useState<Orientation>('portrait');
+  const [orientation, setOrientation] = useState<Orientation>("portrait");
 
   const toggleOrientation = () => {
-    setOrientation(currentOrientation => 
+    setOrientation(
-      currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left' // Can adjust this and the type to match what we want
+      (currentOrientation) =>
+        currentOrientation === "landscape-left" ? "portrait" : "landscape-left", // Can adjust this and the type to match what we want
     );
   };
 
   if (device === null) {
-    return <Text>Camera not available. Does user have permissions:  {hasPermission}</Text>
+    return (
+      <Text>
+        Camera not available. Does user have permissions: {hasPermission}
+      </Text>
+    );
   }
-  
   return (
     hasPermission && (
       <View style={styles.container}>
@@ -67,12 +79,22 @@ export default function CameraScreen(): React.ReactElement {
           isActive={isActive}
         />
         <RecordingButton
-          style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
+          style={[
+            styles.captureButton,
+            orientation === "portrait" ? styles.portrait : styles.landscape,
+          ]}
           camera={camera}
           onMediaCaptured={onMediaCaptured}
           enabled={isCameraInitialized}
         />
-        <View style={[styles.button, orientation === 'portrait' ? styles.togglePortrait : styles.toggleLandscape ]}>
+        <View
+          style={[
+            styles.button,
+            orientation === "portrait"
+              ? styles.togglePortrait
+              : styles.toggleLandscape,
+          ]}
+        >
           <Button
             title="Toggle Orientation"
             onPress={toggleOrientation}
@@ -82,35 +104,35 @@ export default function CameraScreen(): React.ReactElement {
         </View>
       </View>
     )
-  )
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'black',
+    backgroundColor: "black",
   },
   captureButton: {
-    position: 'absolute',
+    position: "absolute",
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   button: {
-    position: 'absolute',
+    position: "absolute",
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   togglePortrait: {
     bottom: 110, // needs refined
   },
   toggleLandscape: {
-    transform: [{ rotate: '90deg' }],
+    transform: [{ rotate: "90deg" }],
-    bottom: '43%', // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
+    bottom: "43%", // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
-    left: 50 // needs refined
+    left: 50, // needs refined
   },
   portrait: {
-    bottom: 20 // needs refined
+    bottom: 20, // needs refined
   },
   landscape: {
-    bottom: '40%', // Should come from SafeAreaProvider
+    bottom: "40%", // Should come from SafeAreaProvider
-    left: 20 // needs refined
+    left: 20, // needs refined
-  }
+  },
-})
+});

component/video/capture-button.tsx

@@ -1,77 +1,89 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from "react";
-import { TouchableOpacity, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import {
+	TouchableOpacity,
+	StyleSheet,
+	View,
+	StyleProp,
+	ViewStyle,
+} from "react-native";
 import { CameraRoll } from "@react-native-camera-roll/camera-roll";
-import { Camera } from 'react-native-vision-camera/lib/typescript/Camera';
+// @ts-ignore
-import { VideoFile } from 'react-native-vision-camera/lib/typescript/VideoFile';
+import { Camera } from "react-native-vision-camera/lib/typescript/Camera";
+// @ts-ignore
+import { VideoFile } from "react-native-vision-camera/lib/typescript/VideoFile";
 
 interface RecordingButtonProps {
-  style: StyleProp<ViewStyle>;
+	style: StyleProp<ViewStyle>;
-  camera: React.RefObject<Camera>;
+	camera: React.RefObject<Camera>;
-  // eslint-disable-next-line no-unused-vars
+	// eslint-disable-next-line no-unused-vars
-  onMediaCaptured: (media: VideoFile, mediaType: string) => void;
+	onMediaCaptured: (media: VideoFile, mediaType: string) => void;
-  enabled: boolean;
+	enabled: boolean;
 }
 
-
+export const RecordingButton: React.FC<RecordingButtonProps> = ({
-export const RecordingButton: React.FC<RecordingButtonProps> = ({ style, camera, onMediaCaptured, enabled }) => {
+	style,
-	const isRecording = useRef(false)
+	camera,
+	onMediaCaptured,
+	enabled,
+}) => {
+	const isRecording = useRef(false);
 	// UseRef won't trigger a re-render
 	const [, setRecordingState] = useState(false);
 
 	const onStoppedRecording = useCallback(() => {
-		isRecording.current = false
+		isRecording.current = false;
-		setRecordingState(false)
+		setRecordingState(false);
-		console.log('stopped recording video!')
+		console.log("stopped recording video!");
-	}, [])
+	}, []);
 
 	const stopRecording = useCallback(async () => {
 		try {
 			if (camera.current === null) {
-				throw new Error('Camera ref is null!') // Error handling could be more graceful
+				throw new Error("Camera ref is null!"); // Error handling could be more graceful
 			}
-			console.log('calling stopRecording()...')
+			console.log("calling stopRecording()...");
-			await camera.current.stopRecording()
+			await camera.current.stopRecording();
-			console.log('called stopRecording()!')
+			console.log("called stopRecording()!");
 		} catch (e) {
-			console.error('failed to stop recording!', e)
+			console.error("failed to stop recording!", e);
 		}
-	}, [camera])
+	}, [camera]);
 
-const startRecording = useCallback(() => {
+	const startRecording = useCallback(() => {
-	try {
+		try {
-		if (camera.current === null) {
+			if (camera.current === null) {
-			throw new Error('Camera ref is null!') // Error handling could be more graceful
+				throw new Error("Camera ref is null!"); // Error handling could be more graceful
-		}
+			}
-		console.log('calling startRecording()...')
+			console.log("calling startRecording()...");
-		camera.current.startRecording({
+			camera.current.startRecording({
-			onRecordingError: (error) => {
+				onRecordingError: (error) => {
-				console.error('Recording failed!', error)
+					console.error("Recording failed!", error);
-				onStoppedRecording()
+					onStoppedRecording();
-			},
+				},
-			onRecordingFinished: async (video) => {
+				onRecordingFinished: async (video) => {
-				onMediaCaptured(video, 'video')
+					onMediaCaptured(video, "video");
-				const path = video.path
+					const path = video.path;
-				await CameraRoll.saveAsset(`file://${path}`, {
+					await CameraRoll.saveAsset(`file://${path}`, {
-					type: 'video',
+						type: "video",
-				})
+					});
-				onStoppedRecording()
+					onStoppedRecording();
-			},
+				},
-		})
+			});
-		console.log('called startRecording()!')
+			console.log("called startRecording()!");
-		isRecording.current = true
+			isRecording.current = true;
-		setRecordingState(true)
+			setRecordingState(true);
 		} catch (e) {
-		console.error('failed to start recording!', e, 'camera')
+			console.error("failed to start recording!", e, "camera");
-	}
+		}
-}, [camera, onMediaCaptured, onStoppedRecording])
+	}, [camera, onMediaCaptured, onStoppedRecording]);
 
-const handlePress = () => {
+	const handlePress = () => {
-	if (isRecording.current) {
+		if (isRecording.current) {
 			stopRecording();
-	} else {
+		} else {
 			startRecording();
-	}
+		}
-};
+	};
 
 	return (
 		<TouchableOpacity
@@ -79,34 +91,38 @@ const handlePress = () => {
 			onPress={handlePress}
 			disabled={!enabled}
 		>
-			<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
+			<View
+				style={
+					isRecording.current ? styles.recordingSquare : styles.innerCircle
+				}
+			/>
 		</TouchableOpacity>
 	);
 };
 
 const styles = StyleSheet.create({
 	captureButton: {
-			height: 80,
+		height: 80,
-			width: 80,
+		width: 80,
-			borderRadius: 40,
+		borderRadius: 40,
-			borderWidth: 3,
+		borderWidth: 3,
-			borderColor: 'white',
+		borderColor: "white",
-			backgroundColor: 'transparent',
+		backgroundColor: "transparent",
-			justifyContent: 'center',
+		justifyContent: "center",
-			alignItems: 'center',
+		alignItems: "center",
 	},
 	innerCircle: {
-			height: 70,
+		height: 70,
-			width: 70,
+		width: 70,
-			borderRadius: 35,
+		borderRadius: 35,
-			backgroundColor: '#FF3B30',
+		backgroundColor: "#FF3B30",
 	},
 	recordingSquare: {
-			height: 40,
+		height: 40,
-			width: 40,
+		width: 40,
-			borderRadius: 10,
+		borderRadius: 10,
-			backgroundColor: '#FF3B30',
+		backgroundColor: "#FF3B30",
 	},
 });
 
-export default RecordingButton;
+export default RecordingButton;

flake.nix

@@ -11,56 +11,64 @@
       url = "github:tadfisher/android-nixpkgs";
     };
   };
-  outputs = { self, nixpkgs, flake-utils, gitignore, android-nixpkgs, ... }:
+  outputs = {
-  flake-utils.lib.eachDefaultSystem (system:
+    self,
-  let
+    nixpkgs,
-    pkgs = import nixpkgs { inherit system; };
+    flake-utils,
-    nodejs = pkgs.nodejs-18_x;
+    gitignore,
-    # NOTE: this does not work
+    android-nixpkgs,
-    appBuild = pkgs.stdenv.mkDerivation {
+    ...
-      name = "example-ts-node";
+  }:
-      version = "0.1.0";
+    flake-utils.lib.eachDefaultSystem (system: let
-      src = gitignore.lib.gitignoreSource ./.; # uses the gitignore in the repo to only copy files git would see
+      pkgs = import nixpkgs {inherit system;};
-      buildInputs = [ nodejs ];
+      nodejs = pkgs.nodejs-18_x;
-      # https://nixos.org/manual/nixpkgs/stable/#sec-stdenv-phases
+      # NOTE: this does not work
-      buildPhase = ''
+      appBuild = pkgs.stdenv.mkDerivation {
-        # each phase has pre/postHooks. When you make your own phase be sure to still call the hooks
+        name = "example-ts-node";
-        runHook preBuild
+        version = "0.1.0";
-        npm ci
+        src = gitignore.lib.gitignoreSource ./.; # uses the gitignore in the repo to only copy files git would see
-        npm run build
+        buildInputs = [nodejs];
-        runHook postBuild
+        # https://nixos.org/manual/nixpkgs/stable/#sec-stdenv-phases
-      '';
+        buildPhase = ''
-      installPhase = ''
+          # each phase has pre/postHooks. When you make your own phase be sure to still call the hooks
-        runHook preInstall
+          runHook preBuild
-        cp -r node_modules $out/node_modules
+          npm ci
-        cp package.json $out/package.json
+          npm run build
-        cp -r dist $out/dist
+          runHook postBuild
-        runHook postInstall
+        '';
-      '';
+        installPhase = ''
-    };
+          runHook preInstall
-    android-sdk = android-nixpkgs.sdk.${system} (sdkPkgs: with sdkPkgs; [
+          cp -r node_modules $out/node_modules
-      cmdline-tools-latest
+          cp package.json $out/package.json
-      build-tools-30-0-3
+          cp -r dist $out/dist
-      build-tools-33-0-0
+          runHook postInstall
-      platform-tools
+        '';
-      platforms-android-33
+      };
-      emulator
+      android-sdk = android-nixpkgs.sdk.${system} (sdkPkgs:
-      ndk-23-1-7779620
+        with sdkPkgs; [
-      cmake-3-22-1
+          cmdline-tools-latest
-      system-images-android-33-google-apis-x86-64
+          build-tools-30-0-3
-      system-images-android-34-google-apis-x86-64
+          build-tools-33-0-0
-    ]);
+          platform-tools
-  in with pkgs; {
+          platforms-android-33
-    defaultPackage = appBuild;
+          emulator
-    devShell = mkShell {
+          ndk-23-1-7779620
-      buildInputs = [ nodejs yarn watchman gradle_7 alejandra nodePackages.prettier ];
+          cmake-3-22-1
-      ANDROID_SDK_BIN = android-sdk;
+          system-images-android-33-google-apis-x86-64
-      shellHook = ''
+          system-images-android-34-google-apis-x86-64
-        export JAVA_HOME=${pkgs.jdk17.home}
+        ]);
-        source ${android-sdk.out}/nix-support/setup-hook
+    in
-        export PATH=${android-sdk}/bin:$PATH
+      with pkgs; {
-        ORG_GRADLE_PROJECT_ANDROID_HOME="$ANDROID_HOME"
+        defaultPackage = appBuild;
-      '';
+        devShell = mkShell {
-    };
+          buildInputs = [nodejs yarn watchman gradle_7 alejandra nodePackages.prettier];
-  });
+          ANDROID_SDK_BIN = android-sdk;
+          shellHook = ''
+            export JAVA_HOME=${pkgs.jdk17.home}
+            source ${android-sdk.out}/nix-support/setup-hook
+            export PATH=${android-sdk}/bin:${android-sdk}/share/android-sdk/build-tools/33.0.0/:$PATH
+            ORG_GRADLE_PROJECT_ANDROID_HOME="$ANDROID_HOME"
+          '';
+        };
+      });
 }

ios/Railbird.xcodeproj/project.pbxproj

@@ -384,7 +384,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = ai.railbird.railbird;
-				PRODUCT_NAME = Railbird;
+				PRODUCT_NAME = "Railbird";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Railbird/Railbird-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -419,7 +419,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = ai.railbird.railbird;
-				PRODUCT_NAME = Railbird;
+				PRODUCT_NAME = "Railbird";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Railbird/Railbird-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;

metro.config.js

@@ -1,7 +1,53 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
-const { getDefaultConfig } = require('expo/metro-config');
+const { mergeConfig } = require("@react-native/metro-config");
+const path = require("path");
+const escape = require("escape-string-regexp");
+const exclusionList = require("metro-config/src/defaults/exclusionList");
+const pak = require("./react-native-vision-camera/package/package.json");
 
-/** @type {import('expo/metro-config').MetroConfig} */
+const root = path.resolve(__dirname, "./react-native-vision-camera/package");
-const config = getDefaultConfig(__dirname);
+const modules = Object.keys({ ...pak.peerDependencies });
+const localPackagePath = path.resolve(
+  __dirname,
+  "./react-native-vision-camera/package/src/index",
+);
 
-module.exports = config;
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we block them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, "node_modules", m))}\\/.*$`),
+      ),
+    ),
+
+    extraNodeModules: modules.reduce(
+      (acc, name) => {
+        acc[name] = path.join(__dirname, "node_modules", name);
+        return acc;
+      },
+      { "react-native-vision-camera": localPackagePath },
+    ),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json

@@ -4,10 +4,10 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "cp .env.development .env && expo start",
-    "android": "expo start --android",
+    "android": "expo run:android",
-    "ios": "expo start --ios",
+    "ios": "expo run:ios",
-    "run:android": "expo run:android",
+    "run:android": "expo start --android",
-    "run:ios": "expo run:ios",
+    "run:ios": "expo start --android",
     "web": "expo start --web",
     "lint": "eslint . --ext .js,.ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
@@ -28,6 +28,7 @@
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
     "babel-plugin-inline-dotenv": "^1.7.0",
+    "expo-constants": "15.4.5",
     "d3-path": "^3.1.0",
     "d3-scale": "^1.0.6",
     "eslint": "^8.56.0",
@@ -48,15 +49,16 @@
     "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-svg": "13.9.0",
     "react-native-svg-charts": "^5.4.0",
-    "react-native-vision-camera": "^3.8.2",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.4.3",
+    "@react-native/metro-config": "^0.72.9",
     "@types/d3-path": "^3.0.2",
     "@types/jest": "^29.5.11",
+    "metro-react-native-babel-preset": "^0.77.0",
     "@types/react-native-svg-charts": "^5.0.16",
     "eslint-config-prettier": "^9.1.0"
   },

react-native-vision-camera

@@ -0,0 +1 @@
+Subproject commit fb425458904eb240466768be08352973fd2f78d8

tsconfig.json

@@ -1,4 +1,5 @@
 {
-  "compilerOptions": {},
+  "include": ["."],
-  "extends": "expo/tsconfig.base"
+  "exclude": ["node_modules", "./react-native-vision-camera/package"],
+  "extends": ["expo/tsconfig.base"]
 }

yarn.lock

@@ -2487,6 +2487,16 @@
     hermes-parser "0.15.0"
     nullthrows "^1.1.1"
 
+"@react-native/metro-config@^0.72.9":
+  version "0.72.11"
+  resolved "https://registry.yarnpkg.com/@react-native/metro-config/-/metro-config-0.72.11.tgz#c775a22fbb138cedd4513ca46c06bfd6a9dad316"
+  integrity sha512-661EyQnDdVelyc0qP/ew7kKkGAh6N6KlkuPLC2SQ8sxaXskVU6fSuNlpLW4bUTBUDFKG8gEOU2hp6rzk4wQnGQ==
+  dependencies:
+    "@react-native/js-polyfills" "^0.72.1"
+    metro-config "0.76.8"
+    metro-react-native-babel-transformer "0.76.8"
+    metro-runtime "0.76.8"
+
 "@react-native/normalize-color@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.1.0.tgz#939b87a9849e81687d3640c5efa2a486ac266f91"
@@ -7214,6 +7224,51 @@ metro-react-native-babel-preset@0.76.8:
     babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.4.0"
 
+metro-react-native-babel-preset@^0.77.0:
+  version "0.77.0"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.77.0.tgz#47457eca8e36b77156afbe790247a70dbb40faaa"
+  integrity sha512-HPPD+bTxADtoE4y/4t1txgTQ1LVR6imOBy7RMHUsqMVTbekoi8Ph5YI9vKX2VMPtVWeFt0w9YnCSLPa76GcXsA==
+  dependencies:
+    "@babel/core" "^7.20.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
+    "@babel/plugin-proposal-class-properties" "^7.18.0"
+    "@babel/plugin-proposal-export-default-from" "^7.0.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.0"
+    "@babel/plugin-proposal-numeric-separator" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-default-from" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.18.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.20.0"
+    "@babel/plugin-transform-block-scoping" "^7.0.0"
+    "@babel/plugin-transform-classes" "^7.0.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.20.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.20.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
+    "@babel/plugin-transform-parameters" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+    "@babel/plugin-transform-runtime" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.5.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    babel-plugin-transform-flow-enums "^0.0.2"
+    react-refresh "^0.4.0"
+
 metro-react-native-babel-transformer@0.76.8:
   version "0.76.8"
   resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.76.8.tgz#c3a98e1f4cd5faf1e21eba8e004b94a90c4db69b"
@@ -8417,11 +8472,6 @@ react-native-svg@^6.2.1:
     lodash "^4.16.6"
     pegjs "^0.10.0"
 
-react-native-vision-camera@^3.8.2:
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.8.2.tgz#f4f75f84c6a19e1c3474ddc0f7f785b5a526739b"
-  integrity sha512-MY39l2e3hNRPUefn2JPShOFExcw0PblbAcUGvJrIfS9pMzdIyceo0umRAx8lOGXzDUAdb+xy/tFWb8zGxKimCQ==
-
 react-native@*:
   version "0.73.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.2.tgz#74ee163c8189660d41d1da6560411da7ce41a608"