diff --git a/android/settings.gradle b/android/settings.gradle index 2998473..a002532 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,10 +1,15 @@ rootProject.name = 'Railbird' apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.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 ':app' includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile()) + +include ':react-native-vision-camera' +project(':react-native-vision-camera').projectDir = new File(rootProject.projectDir, '../react-native-vision-camera/package/android') diff --git a/app.json b/app.json index e9a87f7..7766581 100644 --- a/app.json +++ b/app.json @@ -11,9 +11,7 @@ "resizeMode": "contain", "backgroundColor": "#ffffff" }, - "assetBundlePatterns": [ - "**/*" - ], + "assetBundlePatterns": ["**/*"], "plugins": [ "@react-native-firebase/app", "@react-native-firebase/auth", diff --git a/babel.config.js b/babel.config.js index cf6bd4c..2f02724 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,16 +1,34 @@ -module.exports = function(api) { - api.cache(true); - return { - presets: ["babel-preset-expo"], - plugins: [ - ["module:react-native-dotenv", { - "moduleName": "@env", - "path": ".env", - "safe": false, - "allowUndefined": true, - "verbose": false, - }], - 'react-native-reanimated/plugin', - ], - }; +const path = require("path"); +const pak = require("./react-native-vision-camera/package/package.json"); + +module.exports = function (api) { + api.cache(true); + return { + presets: ["babel-preset-expo"], + plugins: [ + [ + "module:react-native-dotenv", + { + moduleName: "@env", + 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, + ), + }, + }, + ], + ], + }; }; diff --git a/component/video/camera.tsx b/component/video/camera.tsx index ce1abf1..45f10a2 100644 --- a/component/video/camera.tsx +++ b/component/video/camera.tsx @@ -1,57 +1,68 @@ -import React, { useCallback, useRef, useState } from 'react' -import { Button, StyleSheet, Text, View } from 'react-native' -import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera' -import { RecordingButton } from './capture-button' -import { useIsForeground } from './is-foreground' +import React, { useCallback, useRef, useState } from "react"; +import { Button, StyleSheet, Text, View } from "react-native"; +import { + Camera, + useCameraPermission, + useCameraDevice, + useCameraFormat, + PhotoFile, + VideoFile, + CameraRuntimeError, + Orientation, +} from "react-native-vision-camera"; +import { RecordingButton } from "./capture-button"; +import { useIsForeground } from "./is-foreground"; export default function CameraScreen(): React.ReactElement { - const camera = useRef(null) - const { hasPermission, requestPermission } = useCameraPermission() - const [isCameraInitialized, setIsCameraInitialized] = useState(false) + const camera = useRef(null); + const { hasPermission, requestPermission } = useCameraPermission(); + const [isCameraInitialized, setIsCameraInitialized] = + useState(false); - const isForeground: boolean = useIsForeground() - const isActive: boolean = isForeground // Should be combined with isFocused hook + const isForeground: boolean = useIsForeground(); + 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!') - setIsCameraInitialized(true) - }, []) + console.log("Camera initialized!"); + setIsCameraInitialized(true); + }, []); - const onMediaCaptured = useCallback( - (media: PhotoFile | VideoFile) => { - console.log(`Media captured! ${JSON.stringify(media)}`) - }, - [], - ) + const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => { + 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 } - ]) // this sets as a target + { fps: 60 }, + ]); // this sets as a target //Orientation detection - const [orientation, setOrientation] = useState('portrait'); + const [orientation, setOrientation] = useState("portrait"); const toggleOrientation = () => { - setOrientation(currentOrientation => - currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left' // Can adjust this and the type to match what we want + setOrientation( + (currentOrientation) => + currentOrientation === "landscape-left" ? "portrait" : "landscape-left", // Can adjust this and the type to match what we want ); }; if (device === null) { - return Camera not available. Does user have permissions: {hasPermission} + return ( + + Camera not available. Does user have permissions: {hasPermission} + + ); } - return ( hasPermission && ( @@ -67,12 +78,22 @@ export default function CameraScreen(): React.ReactElement { isActive={isActive} /> - +