add record entry screen/modal and required nav flow

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="Camera" component={CameraScreen} />
+      <Tab.Screen name="Session" component={Session} options={{ tabBarLabel: 'Session' }} />
+      <Tab.Screen name="VideoStack" component={VideoTabStack} options={{ tabBarLabel: 'Record' }} />
     </Tab.Navigator>
   );
 }