boots on android, no recording/file logging/etc, just camera access and button ui

component/video/camera.tsx

@@ -0,0 +1,75 @@
+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'
+
+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 onInitialized = useCallback(() => {
+    console.log('Camera initialized!')
+    setIsCameraInitialized(true)
+  }, [])
+
+  const onMediaCaptured = useCallback(
+    (media: PhotoFile | VideoFile) => {
+      console.log(`Media captured! ${JSON.stringify(media)}`)
+    },
+    [],
+  )
+
+  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 }
+  ])
+
+  if (device === null) {
+    return <Text>Camera not available. Does user have permissions:  {hasPermission}</Text>
+  }
+
+  return (
+    hasPermission && (
+      <View style={styles.container}>
+        <Camera
+          ref={camera}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          format={format}
+          onInitialized={onInitialized}
+          video={true}
+          isActive={true}
+        />
+        <RecordingButton
+          style={styles.captureButton}
+          camera={camera}
+          onMediaCaptured={onMediaCaptured}
+          enabled={isCameraInitialized}
+          setIsPressingButton={setIsPressingButton}
+        />
+      </View>
+      
+    )
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  captureButton: {
+    position: 'absolute',
+    alignSelf: 'center',
+    bottom: 20, // should be safe area padding
+  },
+})

component/video/capture-button.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } 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 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);
+        }
+    }
+};
+
+    return (
+      <TouchableOpacity
+        style={[styles.captureButton, style]}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={!enabled}
+      />
+    );
+};
+
+const styles = StyleSheet.create({
+    captureButton: {
+        height: 70,
+        width: 70,
+        borderRadius: 35,
+        backgroundColor: '#FF3B30',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+
+export default RecordingButton;

component/video/constants.ts

@@ -0,0 +1,31 @@
+import { Dimensions, Platform } from 'react-native'
+import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
+
+export const CONTENT_SPACING = 15
+
+const SAFE_BOTTOM =
+  Platform.select({
+    ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
+  }) ?? 0
+
+export const SAFE_AREA_PADDING = {
+  paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
+  paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
+  paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
+  paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
+}
+
+// The maximum zoom _factor_ you should be able to zoom in
+export const MAX_ZOOM_FACTOR = 10
+
+export const SCREEN_WIDTH = Dimensions.get('window').width
+export const SCREEN_HEIGHT = Platform.select<number>({
+  android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
+  ios: Dimensions.get('window').height,
+}) as number
+
+// Capture Button
+export const CAPTURE_BUTTON_SIZE = 78
+
+// Control Button like Flash
+export const CONTROL_BUTTON_SIZE = 40