move permissions to record

src/auth/firebase-auth.tsx

@@ -44,7 +44,7 @@ export const createOrSignInUser = async (
 	} catch (err) {
 		console.log(err);
 		// TODO: #107 -- Correct error handling
-		Alert.alert(err.message);
+		Alert.alert("There was an issue.", err.message);
 	}
 };
 

src/component/video/camera.tsx

@@ -129,7 +129,7 @@ export default function CameraScreen({
 	}, [data, uploadManager]);
 
 	const camera = useRef<Camera>(null);
-	const { hasPermission, requestPermission } = useCameraPermission();
+	const { hasPermission } = useCameraPermission();
 	const [isCameraInitialized, setIsCameraInitialized] =
 		useState<boolean>(false);
 
@@ -161,11 +161,6 @@ export default function CameraScreen({
 		[uploadManager],
 	);
 
-	if (!hasPermission) {
-		requestPermission();
-		// Error handling in case they refuse to give permission
-	}
-
 	const device = useCameraDevice("back");
 	const format = useCameraFormat(device, [
 		{ videoResolution: { width: 1920, height: 1080 } },
@@ -184,6 +179,7 @@ export default function CameraScreen({
 	// Replace with error handling
 	if (device === null) {
 		console.log(device);
+		// hasPermission redundant here - user should not be able to launch camera without permissions
 		return (
 			<Text>
 				Camera not available. Does user have permissions: {hasPermission}

src/lib/alert-messages/index.ts

@@ -0,0 +1,10 @@
+export const cameraPermissionsDenied = {
+	android: {
+		title: "In order to use the camera, you need to grant app permissions.",
+		message: "Please go to Railbird > App Info and grant permissions. ",
+	},
+	ios: {
+		title: "In order to use the camera, you need to grant app permissions.",
+		message: "Please go to Settings > Railbird > Camera and grant permissions.",
+	},
+};

src/screens/video-stack/record.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from "react";
 import {
+	Alert,
 	Keyboard,
+	Platform,
 	Text,
 	TextInput,
 	TouchableOpacity,
@@ -8,6 +10,9 @@ import {
 	View,
 } from "react-native";
 import DropDownPicker from "react-native-dropdown-picker";
+// @ts-ignore
+import { useCameraPermission } from "react-native-vision-camera";
+import { cameraPermissionsDenied } from "../../lib/alert-messages";
 import { recordStyles as styles } from "./styles";
 
 interface CameraScreenParams {
@@ -17,10 +22,14 @@ interface CameraScreenParams {
 	location: string;
 }
 
-// Record Screen
-// Precedes Camera.tsx
-// Can be made into Modal when ready
 export default function RecordScreen({ navigation }): React.JSX.Element {
+	// Permissions
+	const { hasPermission, requestPermission } = useCameraPermission();
+
+	if (!hasPermission) {
+		requestPermission();
+	}
+
 	// Game type dropdown
 	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
 	const [gameType, setGameType] = useState<string | null>(null); // This is a dropdown
@@ -63,7 +72,15 @@ export default function RecordScreen({ navigation }): React.JSX.Element {
 	// Location
 	const [location, setLocation] = useState<string>("");
 
+	const { android, ios } = cameraPermissionsDenied;
+
 	const handleSubmit = () => {
+		// Next block's alert message are OS specific
+		if (!hasPermission) {
+			if (Platform.OS === 'android') return Alert.alert(android.title, android.message);
+			else return Alert.alert(ios.title, ios.message);
+		}
+
 		// needs to pass info as params or store in a context/state provider
 		const params: CameraScreenParams = {
 			gameType: gameType,