working on emulator but crashing on physical device after calling startRecording

App.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-import { Text } from "react-native";
-import ClientProvider from "./graphql/client";
-import ShotsContainer from "./component/shot";
 import CameraScreen from "./component/video/camera";
 
 const App: React.FC = () => {

babel.config.js

@@ -10,6 +10,7 @@ module.exports = function(api) {
                 "allowUndefined": true,
                 "verbose": false,
             }],
+            'react-native-reanimated/plugin',
         ],
     };
 };

component/video/camera.tsx

@@ -2,12 +2,20 @@ import React, { useCallback, useRef, useState } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile } from 'react-native-vision-camera'
 import { RecordingButton } from './capture-button'
+import { useSharedValue } from 'react-native-reanimated'
 
 export default function CameraScreen(): React.ReactElement {
   const camera = useRef<Camera>(null)
   const { hasPermission, requestPermission } = useCameraPermission()
   const [isCameraInitialized, setIsCameraInitialized] = useState(false)
-  const [isPressingButton, setIsPressingButton] = useState(false)
+  const isPressingButton = useSharedValue(false)
+
+  const setIsPressingButton = useCallback(
+    (_isPressingButton: boolean) => {
+      isPressingButton.value = _isPressingButton
+    },
+    [isPressingButton],
+  )
 
   const onInitialized = useCallback(() => {
     console.log('Camera initialized!')
@@ -47,6 +55,7 @@ export default function CameraScreen(): React.ReactElement {
           format={format}
           onInitialized={onInitialized}
           video={true}
+          // orientation='portrait' // TODO: figure out what this looks like to the native module
           isActive={true}
         />
         <RecordingButton

component/video/capture-button.tsx

@@ -1,44 +1,98 @@
-import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useCallback, useRef, useState } from 'react';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
 
 export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
 
-  const handlePressIn = () => {
-    setIsPressingButton(true);
-    // Additional functionality when the button is pressed
-    console.log('pressed in')
-};
+	const isRecording = useRef(false)
+	// UseRef won't trigger a re-render
+	const [, setRecordingState] = useState(false);
 
-const handlePressOut = () => {
-    setIsPressingButton(false);
-    // Stop recording and handle media capture
-    if (camera && enabled) {
-        // Assuming you have a method in your camera object to capture media
-        const media = camera.captureMedia();
-        if (onMediaCaptured) {
-            onMediaCaptured(media);
+	const onStoppedRecording = useCallback(() => {
+		isRecording.current = false
+		setRecordingState(false)
+		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
 			}
+			console.log('calling stopRecording()...')
+			await camera.current.stopRecording()
+			console.log('called stopRecording()!')
+		} catch (e) {
+			console.error('failed to stop recording!', e)
+		}
+	}, [camera])
+
+const startRecording = useCallback(() => {
+	try {
+		if (camera.current === null) {
+			throw new Error('Camera ref is null!') // Error handling could be more graceful
+		}
+		console.log('calling startRecording()...')
+		camera.current.startRecording({
+			onRecordingError: (error) => {
+				console.error('Recording failed!', error)
+				onStoppedRecording()
+			},
+			onRecordingFinished: (video) => {
+				console.log(`Recording successfully finished! ${video.path}`)
+				onMediaCaptured(video, 'video')
+				onStoppedRecording()
+			},
+		})
+		// TODO: wait until startRecording returns to actually find out if the recording has successfully started
+		console.log('called startRecording()!')
+		isRecording.current = true
+		setRecordingState(true)
+		} catch (e) {
+		console.error('failed to start recording!', e, 'camera')
+	}
+}, [camera, onMediaCaptured, onStoppedRecording])
+
+const handlePress = () => {
+	if (isRecording.current) {
+			stopRecording();
+	} else {
+			startRecording();
 	}
 };
 
 	return (
 		<TouchableOpacity
 			style={[styles.captureButton, style]}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+			onPress={handlePress}
 			disabled={!enabled}
-      />
+		>
+			<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
+		</TouchableOpacity>
 	);
 };
 
 const styles = StyleSheet.create({
 	captureButton: {
+			height: 80,
+			width: 80,
+			borderRadius: 40,
+			borderWidth: 3,
+			borderColor: 'white',
+			backgroundColor: 'transparent',
+			justifyContent: 'center',
+			alignItems: 'center',
+	},
+	innerCircle: {
 			height: 70,
 			width: 70,
 			borderRadius: 35,
 			backgroundColor: '#FF3B30',
-        justifyContent: 'center',
-        alignItems: 'center',
+	},
+	recordingSquare: {
+			height: 40,
+			width: 40,
+			borderRadius: 10,
+			backgroundColor: '#FF3B30',
 	},
 });
 

package.json

@@ -43,8 +43,11 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dotenv": "^3.4.9",
+    "react-native-reanimated": "^3.6.2",
+    "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": {
@@ -58,4 +61,3 @@
   },
   "private": true
 }
-