Merge pull request 'Record flow -- Entry screen + navigation stack' (#79) from loewy/camera-screen-stack into master

Reviewed-on: railbird/rn-playground#79

component/video/camera.tsx

@@ -15,7 +15,15 @@ import { RecordingButton } from "./capture-button";
 import { useIsForeground } from "./is-foreground";
 import { useIsFocused } from "@react-navigation/native";
 
-export default function CameraScreen(): React.ReactElement {
+export default function CameraScreen({ route, navigation }): React.ReactElement {
+  // TODO: #73 Does this need to be passed to Camera component?
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const { gameType, tableSize, tags, location } = route.params
+  // LOG for params -- Remove when no longer needed
+  // Note: camelCased value being passed, change on record.tsx if you want a different value format
+  console.log(gameType, tableSize, tags, location)
+
+
   const camera = useRef<Camera>(null);
   const { hasPermission, requestPermission } = useCameraPermission();
   const [isCameraInitialized, setIsCameraInitialized] =
@@ -63,6 +71,7 @@ export default function CameraScreen(): React.ReactElement {
     );
   };
 
+  // Replace with error handling
   if (device === null) {
     console.log(device);
     return (
@@ -86,6 +95,9 @@ export default function CameraScreen(): React.ReactElement {
           orientation={orientation} // TODO: #60
           isActive={isActive}
         />
+        <View style={orientation === "portrait" ? styles.goBackPortrait : styles.goBackLandscape}>
+          <Button title="Go back" onPress={() => navigation.goBack()} />
+        </View>
         <RecordingButton
           style={[
             styles.captureButton,
@@ -143,4 +155,15 @@ const styles = StyleSheet.create({
     bottom: "40%", // Should come from SafeAreaProvider
     left: 20, // needs refined
   },
+  goBackPortrait: {
+    position: 'absolute',
+    top: 20, // or wherever you want the button to be positioned in portrait
+    left: 20, // or wherever you want the button to be positioned in portrait
+  },
+  goBackLandscape: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    transform: [{ rotate: '90deg' }],
+  },
 });

navigation/tab-navigator.tsx

@@ -2,18 +2,36 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Image } from 'react-native';
 import CameraScreen from '../component/video/camera';
 import Session from '../screens/session';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import RecordScreen from '../screens/video-stack/record';
 
 // TODO: add ts support for assets folder to use imports
 const Icon = require('../assets/favicon.png')
 
 const Tab = createBottomTabNavigator();
+const RecordStack = createNativeStackNavigator();
 
 // tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
 const tabIcons = {
   'Session': <Image source={Icon} style={{ width: 20, height: 20 }} />,
-  'Camera': <Image source={Icon} style={{ width: 20, height: 20 }} />,
+  'VideoStack': <Image source={Icon} style={{ width: 20, height: 20 }} />,
 };
 
+function VideoTabStack() {
+  return (
+    <RecordStack.Navigator screenOptions={{ headerShown: false }}>
+      <RecordStack.Screen
+        name="Record"
+        component={RecordScreen}
+      />
+      <RecordStack.Screen
+        name="Camera"
+        component={CameraScreen}
+      />
+    </RecordStack.Navigator>
+  );
+}
+
 /**
  * Functional component creating a tab navigator with called 
  * Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
@@ -34,8 +52,8 @@ export default function Tabs(): React.JSX.Element {
         }
       })}
     >
-      <Tab.Screen name="Session" component={Session} />
+      <Tab.Screen name="Session" component={Session} options={{ tabBarLabel: 'Session' }} />
-      <Tab.Screen name="Camera" component={CameraScreen} />
+      <Tab.Screen name="VideoStack" component={VideoTabStack} options={{ tabBarLabel: 'Record' }} />
     </Tab.Navigator>
   );
 }

package.json

@@ -49,6 +49,7 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dotenv": "^3.4.9",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-reanimated": "^3.6.2",
     "react-native-safe-area-context": "^4.8.2",
     "react-native-screens": "~3.22.0",

react-native-vision-camera

@@ -1 +1 @@
-Subproject commit 0e05fc314fb759ec0944bf09c07aba9ad753fc2b
+Subproject commit fb425458904eb240466768be08352973fd2f78d8

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

yarn.lock

@@ -9733,6 +9733,11 @@ react-native-dotenv@^3.4.9:
   dependencies:
     dotenv "^16.3.1"
 
+react-native-dropdown-picker@^5.4.6:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz#3736fc468de4a295e4df8d1f65ed2eadaf9b445f"
+  integrity sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==
+
 react-native-reanimated@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356"