add record entry screen/modal and required nav flow

screens/video-stack/record.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useState } from 'react'
+import { View, TextInput, TouchableWithoutFeedback, Text, TouchableOpacity, Keyboard } 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>
+  )
+}
+

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,
+  },
+});