move folders etc, need to solve app import issue

src/screens/video-stack/record.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useState } from "react";
+import {
+	Keyboard,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	TouchableWithoutFeedback,
+	View,
+} from "react-native";
+import DropDownPicker from "react-native-dropdown-picker";
+import { recordStyles as styles } from "./styles";
+
+interface CameraScreenParams {
+	gameType: string;
+	tableSize: string;
+	tags: Array<string>;
+	location: string;
+}
+
+// Record Screen
+// Precedes Camera.tsx
+// Can be made into Modal when ready
+export default function RecordScreen({ navigation }): React.JSX.Element {
+	// Game type dropdown
+	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
+	const [gameType, setGameType] = useState<string | null>(null); // This is a dropdown
+	const [gameTypes, setGameTypes] = useState([
+		{ label: "Free Play", value: "freePlay" },
+		{ label: "Straight Pool", value: "straightPool" },
+		{ label: "Nine Ball", value: "nineBall" },
+	]);
+	const onGameTypeOpen = useCallback(() => {
+		setTableSizeOpen(false);
+		setTagsOpen(false);
+	}, []);
+
+	// Table size dropdown
+	const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false);
+	const [tableSize, setTableSize] = useState<string>("");
+	const [tableSizes, setTableSizes] = useState([
+		{ label: `9'`, value: "nineFoot" },
+		{ label: `8'`, value: "eightFoot" },
+		{ label: "7", value: "sevenFoot" },
+	]);
+	const onTableSizeOpen = useCallback(() => {
+		setGameTypeOpen(false);
+		setTagsOpen(false);
+	}, []);
+
+	// Tags multi-select dropdown
+	const [tagsOpen, setTagsOpen] = useState<boolean>(false);
+	const [tags, setTags] = useState<Array<string>>([]);
+	const [tagsList, setTagsList] = useState([
+		{ label: `Tag1`, value: "tag1" },
+		{ label: `Tag2`, value: "tag2" },
+		{ label: "Tag3", value: "tag3" },
+	]);
+	const onTagsOpen = useCallback(() => {
+		setTableSizeOpen(false);
+		setGameTypeOpen(false);
+	}, []);
+
+	// Location
+	const [location, setLocation] = useState<string>("");
+
+	const handleSubmit = () => {
+		// needs to pass info as params or store in a context/state provider
+		const params: CameraScreenParams = {
+			gameType: gameType,
+			tableSize: tableSize,
+			tags: tags,
+			location: location,
+		};
+		navigation.push("Camera", params);
+	};
+
+	const dropDownStyles = {
+		style: styles.dropdownStyle,
+	};
+
+	return (
+		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+			<View style={styles.container}>
+				<View style={styles.dropdownContainer}>
+					<Text style={styles.dropdownTitle}>Game Type</Text>
+					<DropDownPicker
+						zIndex={3000}
+						zIndexInverse={1000}
+						open={gameTypeOpen}
+						value={gameType}
+						items={gameTypes}
+						setOpen={setGameTypeOpen}
+						setValue={setGameType}
+						setItems={setGameTypes}
+						onOpen={onGameTypeOpen}
+						{...dropDownStyles}
+					/>
+					<Text style={styles.dropdownTitle}>Table size</Text>
+					<DropDownPicker
+						zIndex={2000}
+						zIndexInverse={2000}
+						open={tableSizeOpen}
+						value={tableSize}
+						items={tableSizes}
+						setOpen={setTableSizeOpen}
+						setValue={setTableSize}
+						setItems={setTableSizes}
+						onOpen={onTableSizeOpen}
+						{...dropDownStyles}
+					/>
+					<Text style={styles.dropdownTitle}>Tags</Text>
+					<DropDownPicker
+						zIndex={1000}
+						zIndexInverse={3000}
+						multiple
+						min={0}
+						max={5}
+						open={tagsOpen}
+						value={tags}
+						items={tagsList}
+						setOpen={setTagsOpen}
+						setValue={setTags}
+						setItems={setTagsList}
+						onOpen={onTagsOpen}
+						{...dropDownStyles}
+					/>
+				</View>
+				<Text style={styles.dropdownTitle}>Location</Text>
+				<TextInput
+					style={styles.input}
+					placeholder="Location"
+					value={location}
+					onChangeText={(value) => setLocation(value)}
+				/>
+
+				<View style={styles.buttonContainer}>
+					<TouchableOpacity
+						style={styles.buttonStyle}
+						onPress={() => navigation.goBack()}
+					>
+						<Text style={styles.buttonText}>Back</Text>
+					</TouchableOpacity>
+					<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
+						<Text style={styles.buttonText}>Next</Text>
+					</TouchableOpacity>
+				</View>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+}

src/screens/video-stack/styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from "react-native";
+
+export const recordStyles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		padding: 20,
+	},
+	dropdownContainer: {
+		width: "100%",
+		marginBottom: 20,
+		zIndex: 50,
+	},
+	dropdownTitle: {
+		fontSize: 16,
+		fontWeight: "500",
+		marginBottom: 5,
+		alignSelf: "flex-start",
+	},
+	input: {
+		width: "100%",
+		marginBottom: 20,
+		borderWidth: 1,
+		borderColor: "grey",
+		borderRadius: 5,
+		padding: 10,
+	},
+	buttonContainer: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		width: "100%",
+	},
+	buttonStyle: {
+		backgroundColor: "lightblue",
+		paddingVertical: 10,
+		paddingHorizontal: 20,
+		borderRadius: 20,
+		margin: 10,
+	},
+	buttonText: {
+		color: "white",
+		textAlign: "center",
+	},
+	dropdownStyle: {
+		backgroundColor: "#ffffff",
+		borderColor: "#D1D1D1",
+		borderWidth: 1,
+		borderRadius: 4,
+	},
+	dropdownContainerStyle: {
+		marginBottom: 10,
+		borderColor: "#D1D1D1",
+		borderWidth: 1,
+		borderRadius: 4,
+	},
+});