Merge pull request 'Move camera access permissions' (#113) from loewy/permissions into master

Reviewed-on: railbird/railbird-mobile#113
Reviewed-by: Kat Huang <kkathuang@gmail.com>

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/constants.ts

@@ -0,0 +1,21 @@
+interface PermissionMessage {
+	android: {
+		title: string;
+		message: string;
+	};
+	ios: {
+		title: string;
+		message: string;
+	};
+}
+
+export const CAMERA_PERMISSION_DENIED: PermissionMessage = {
+	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/lib/alert-messages/index.ts

@@ -0,0 +1,12 @@
+import { Alert, Platform } from "react-native";
+import { CAMERA_PERMISSION_DENIED } from "./constants";
+
+const ALERT_TYPE = {
+	camera: CAMERA_PERMISSION_DENIED,
+};
+
+export const showAlert = (alertType: string) => {
+	const alert = ALERT_TYPE[alertType];
+	const { title, message } = alert[Platform.OS];
+	Alert.alert(title, message);
+};

src/screens/video-stack/record.tsx

@@ -8,6 +8,9 @@ import {
 	View,
 } from "react-native";
 import DropDownPicker from "react-native-dropdown-picker";
+// @ts-ignore
+import { useCameraPermission } from "react-native-vision-camera";
+import { showAlert } from "../../lib/alert-messages";
 import { recordStyles as styles } from "./styles";
 
 interface CameraScreenParams {
@@ -17,10 +20,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
@@ -64,6 +71,10 @@ export default function RecordScreen({ navigation }): React.JSX.Element {
 	const [location, setLocation] = useState<string>("");
 
 	const handleSubmit = () => {
+		if (!hasPermission) {
+			return showAlert("camera");
+		}
+
 		// needs to pass info as params or store in a context/state provider
 		const params: CameraScreenParams = {
 			gameType: gameType,