tested on emulator, works on some physical devices, will record + save to local camera roll & produce logs

component/video/camera.tsx

@@ -1,21 +1,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 { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
 import { RecordingButton } from './capture-button'
-import { useSharedValue } from 'react-native-reanimated'
+import { useIsForeground } from './is-foreground'
 
 export default function CameraScreen(): React.ReactElement {
   const camera = useRef<Camera>(null)
   const { hasPermission, requestPermission } = useCameraPermission()
   const [isCameraInitialized, setIsCameraInitialized] = useState(false)
-  const isPressingButton = useSharedValue(false)
 
-  const setIsPressingButton = useCallback(
-    (_isPressingButton: boolean) => {
-      isPressingButton.value = _isPressingButton
-    },
-    [isPressingButton],
-  )
+  const isForeground = useIsForeground()
+  const isActive = isForeground
+
+  const onError = useCallback((error: CameraRuntimeError) => {
+    console.error(error)
+  }, [])
 
   const onInitialized = useCallback(() => {
     console.log('Camera initialized!')
@@ -32,14 +31,13 @@ export default function CameraScreen(): React.ReactElement {
   if (!hasPermission) {
     requestPermission()
     // Error handling in case they refuse to give permission
-    // In the case of our app this might be a requirement
   }
 
   const device = useCameraDevice('back')
-  // const format = useCameraFormat(device, [
-  //   { videoResolution: { width: 3048, height: 2160 } },
-  //   { fps: 60 }
-  // ])
+  const format = useCameraFormat(device, [
+    { videoResolution: { width: 3048, height: 2160 } },
+    { fps: 60 }
+  ])
 
   if (device === null) {
     return <Text>Camera not available. Does user have permissions:  {hasPermission}</Text>
@@ -52,19 +50,19 @@ export default function CameraScreen(): React.ReactElement {
           ref={camera}
           style={StyleSheet.absoluteFill}
           device={device}
-          // format={format}
+          format={format}
           onInitialized={onInitialized}
+          onError={onError}
           video={true}
           photo={false}
-          // orientation='portrait' // TODO: figure out what this looks like to the native module
-          isActive={true}
+          orientation='portrait' // TODO: #60
+          isActive={isActive}
         />
         <RecordingButton
           style={styles.captureButton}
           camera={camera}
           onMediaCaptured={onMediaCaptured}
           enabled={isCameraInitialized}
-          setIsPressingButton={setIsPressingButton}
         />
       </View>
       
@@ -80,6 +78,6 @@ const styles = StyleSheet.create({
   captureButton: {
     position: 'absolute',
     alignSelf: 'center',
-    bottom: 20, // should be safe area padding
+    bottom: 20, // Should come from SafeAreaProvider
   },
 })

component/video/capture-button.tsx

@@ -3,21 +3,19 @@ import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import { CameraRoll } from "@react-native-camera-roll/camera-roll";
 
 
-export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
+export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
 
 	const isRecording = useRef(false)
 	// UseRef won't trigger a re-render
 	const [, setRecordingState] = useState(false);
 
 	const onStoppedRecording = useCallback(() => {
-		console.log(' on stopped recording called')
 		isRecording.current = false
 		setRecordingState(false)
 		console.log('stopped recording video!')
 	}, [])
 
 	const stopRecording = useCallback(async () => {
-		console.log(' stop recording called')
 		try {
 			if (camera.current === null) {
 				throw new Error('Camera ref is null!') // Error handling could be more graceful
@@ -42,7 +40,6 @@ const startRecording = useCallback(() => {
 				onStoppedRecording()
 			},
 			onRecordingFinished: async (video) => {
-				console.log(`Recording successfully finished! ${video.path}`)
 				onMediaCaptured(video, 'video')
 				const path = video.path
 				await CameraRoll.saveAsset(`file://${path}`, {
@@ -51,10 +48,8 @@ const startRecording = useCallback(() => {
 				onStoppedRecording()
 			},
 		})
-		// TODO: wait until startRecording returns to actually find out if the recording has successfully started
 		console.log('called startRecording()!')
 		isRecording.current = true
-		console.log('after setting isRecording ref')
 		setRecordingState(true)
 		} catch (e) {
 		console.error('failed to start recording!', e, 'camera')
@@ -69,8 +64,6 @@ const handlePress = () => {
 	}
 };
 
-// console.log('ref', isRecording.current)
-
 	return (
 		<TouchableOpacity
 			style={[styles.captureButton, style]}

component/video/is-foreground.tsx

@@ -0,0 +1,16 @@
+import { useState, useEffect  } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
+
+export const useIsForeground = (): boolean => {
+  const [isForeground, setIsForeground] = useState(true)
+
+  useEffect(() => {
+    const onChange = (state: AppStateStatus): void => {
+      setIsForeground(state === 'active')
+    }
+    const listener = AppState.addEventListener('change', onChange)
+    return () => listener.remove()
+  }, [setIsForeground])
+
+  return isForeground
+}