chore: rename navigation

ios/Podfile.lock

@@ -801,4 +801,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: b0e3f0f7f573d264ac8c53b7b631360254dc3679
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.13.0

src/navigation/CameraTabNavigator.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {useColorScheme} from 'react-native';
+
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+
+import {EventsScreen, LiveViewScreen} from '@screens';
+import {hslToHex} from '@utils';
+
+import {colors} from '../../themeColors.js';
+
+import {TabBarIcon} from './components/TabBarIcon';
+
+export type CameraTabsStackParamList = {
+  Events: undefined;
+  Live: undefined;
+  Recordings: undefined;
+};
+
+const CameraTabStack = createBottomTabNavigator<CameraTabsStackParamList>();
+
+export const CameraTabNavigator = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <CameraTabStack.Navigator
+      screenOptions={({route}) => ({
+        headerTitle: '',
+        tabBarIcon: ({color, size}) =>
+          TabBarIcon({color, size, route, isDarkMode}),
+        tabBarActiveTintColor: isDarkMode ? 'white' : 'black',
+        tabBarInactiveTintColor: 'gray',
+        tabBarStyle: {
+          borderTopWidth: 0,
+          backgroundColor: isDarkMode
+            ? hslToHex(colors.dark.background)
+            : hslToHex(colors.light.background),
+        },
+        header: () => null,
+      })}>
+      <CameraTabStack.Screen name="Live" component={LiveViewScreen} />
+      <CameraTabStack.Screen name="Events" component={EventsScreen} />
+      <CameraTabStack.Screen name="Recordings" component={EventsScreen} />
+    </CameraTabStack.Navigator>
+  );
+};

src/navigation/RootNavigation.tsx

@@ -0,0 +1,95 @@
+import {useColorScheme} from 'react-native';
+
+import {
+  NavigationContainer,
+  NavigatorScreenParams,
+} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import {
+  CameraTabNavigator,
+  CameraTabsStackParamList,
+} from './CameraTabNavigator';
+import {LeftHeaderButton, RightHeaderButton} from './components';
+import {
+  BirdseyeScreen,
+  HomeScreen,
+  OnBoardingScreen,
+  SettingsScreen,
+} from '@screens';
+import {useAppDataStore} from '@stores';
+import {hslToHex} from '@utils';
+
+import {colors} from '../../themeColors.js';
+
+export type MainStackParamList = {
+  Home: undefined;
+  Birdseye: undefined;
+  CameraTabs: NavigatorScreenParams<CameraTabsStackParamList>;
+  Settings: undefined;
+  Onboarding: undefined;
+};
+
+const Stack = createNativeStackNavigator<MainStackParamList>();
+
+export const RootNavigation = () => {
+  const currentCamera = useAppDataStore(state => state.currentCamera);
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const tintColor = isDarkMode
+    ? hslToHex(colors.dark.foreground)
+    : hslToHex(colors.light.foreground);
+
+  const backgroundColor = isDarkMode
+    ? hslToHex(colors.dark.background)
+    : hslToHex(colors.light.background);
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          headerStyle: {backgroundColor: backgroundColor},
+          headerShadowVisible: false,
+          headerTintColor: tintColor,
+        }}>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            headerBackTitle: 'Back',
+            headerTitle: 'Bird Watcher - Frigate',
+            headerLeft: props => LeftHeaderButton(props as {tintColor: string}),
+            headerRight: props =>
+              RightHeaderButton(props as {tintColor: string}),
+            headerTintColor: isDarkMode
+              ? hslToHex(colors.dark.foreground)
+              : hslToHex(colors.light.foreground),
+          }}
+        />
+        <Stack.Screen
+          name="CameraTabs"
+          component={CameraTabNavigator}
+          options={{
+            headerBackTitle: 'Home',
+            headerTitle: currentCamera?.replaceAll('_', ' '),
+            headerTintColor: tintColor,
+          }}
+        />
+        <Stack.Screen
+          name="Settings"
+          component={SettingsScreen}
+          options={{presentation: 'modal', headerTransparent: false}}
+        />
+        <Stack.Screen name="Onboarding" component={OnBoardingScreen} />
+        <Stack.Screen
+          name="Birdseye"
+          component={BirdseyeScreen}
+          options={{
+            headerBackTitle: 'Home',
+            presentation: 'modal',
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};

src/navigation/components/LeftHeaderButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+import BirdseyeIcon from '@icons/birdseye.svg';
+import {useNavigation} from '@react-navigation/native';
+
+import {useConfig} from '@api';
+
+export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
+  const nav = useNavigation();
+  const config = useConfig();
+
+  if (!config.data?.birdseye.enabled) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        nav.navigate('Birdseye');
+      }}>
+      <BirdseyeIcon
+        height={24}
+        width={24}
+        fill={tintColor}
+        fillSecondary={tintColor}
+        style={{marginTop: 2}}
+      />
+    </TouchableOpacity>
+  );
+};

src/navigation/components/RightHeaderButton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+import SettingsIcon from '@icons/settings.svg';
+import {useNavigation} from '@react-navigation/native';
+
+export const RightHeaderButton = ({tintColor}: {tintColor?: string}) => {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
+      <SettingsIcon height={22} width={22} fill={tintColor} />
+    </TouchableOpacity>
+  );
+};

src/navigation/components/TabBarIcon.tsx

@@ -0,0 +1,50 @@
+import EventIcon from '@icons/event.svg';
+import RecordingIcon from '@icons/recording.svg';
+import VideoIcon from '@icons/video-waveform.svg';
+import {RouteProp} from '@react-navigation/native';
+
+import {CameraTabsStackParamList} from '../CameraTabNavigator';
+
+export const TabBarIcon = ({
+  color,
+  size,
+  route,
+  isDarkMode,
+}: {
+  color: string;
+  size: number;
+  isDarkMode: boolean;
+  route: RouteProp<CameraTabsStackParamList, keyof CameraTabsStackParamList>;
+}) => {
+  if (route.name === 'Recordings') {
+    return (
+      <RecordingIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={color}
+      />
+    );
+  }
+  if (route.name === 'Events') {
+    return (
+      <EventIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={color}
+      />
+    );
+  }
+  if (route.name === 'Live') {
+    return (
+      <VideoIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={isDarkMode ? 'black' : 'white'}
+      />
+    );
+  }
+  return null;
+};

src/navigation/components/index.ts

@@ -0,0 +1,2 @@
+export * from './LeftHeaderButton';
+export * from './RightHeaderButton';

src/navigation/index.ts

@@ -1 +1 @@
-export * from './navigationContainer';
+export * from './RootNavigation';