app navigator, tab navigator, session screen, minimal config on tabs & container

navigation/app-navigator.tsx

@@ -0,0 +1,43 @@
+import { useColorScheme } from 'react-native';
+import { NavigationContainer, DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+
+import Tabs from './tab-navigator';
+import Login from '../screens/login';
+
+const Stack = createNativeStackNavigator()
+
+const ScreensStack = () => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="Tabs"
+      component={Tabs}
+      options={{ headerShown: false }}
+    />
+    <Stack.Screen
+      name="Login"
+      component={Login}
+      options={{ headerShown: false }}
+    />
+  </Stack.Navigator>
+)
+/**
+ * Functional component for app navigation. Configures a navigation container with a stack navigator.
+ * Dynamically selects between dark and light themes based on the device's color scheme.
+ * The stack navigator is configured to manage various app screens.
+ *
+ * @returns {React.ComponentType} A NavigationContainer wrapping a Stack.Navigator for app screens.
+ */
+export default function AppNavigator(): React.JSX.Element {
+
+  // useColorScheme get's the theme from device settings
+  const scheme = useColorScheme();
+
+  return (
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="App" component={ScreensStack} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}

navigation/tab-navigator.tsx

@@ -0,0 +1,41 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Image } from 'react-native';
+import CameraScreen from '../component/video/camera';
+import Session from '../screens/session';
+
+// TODO: add ts support for assets folder to use imports
+const Icon = require('../assets/favicon.png')
+
+const Tab = createBottomTabNavigator();
+
+// 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 }} />,
+};
+
+/**
+ * Functional component creating a tab navigator with called 
+ * Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
+ * Import screens and call them on component of Tab.Screen.
+ *
+ * @returns {React.ComponentType} A Tab.Navigator component with bottom tabs with screens.
+ */
+
+export default function Tabs(): React.JSX.Element {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarActiveTintColor: 'tomato',
+        tabBarInactiveTintColor: 'gray',
+        tabBarIcon: () => {
+          return tabIcons[route.name];
+        }
+      })}
+    >
+      <Tab.Screen name="Session" component={Session} />
+      <Tab.Screen name="Camera" component={CameraScreen} />
+    </Tab.Navigator>
+  );
+}