88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
|
import { Image } from "react-native";
|
|
import CameraScreen from "../component/video/camera";
|
|
import Profile from "../screens/profile";
|
|
import Session from "../screens/session-stack/session";
|
|
import SessionFeed from "../screens/session-stack/session-feed";
|
|
import VideoDetails from "../screens/video-stack/video-details";
|
|
import { tabIconColors } from "../styles";
|
|
|
|
import Icon from "../assets/icons/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 = {
|
|
SessionStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
|
VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
|
Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
|
|
};
|
|
|
|
function VideoTabStack() {
|
|
return (
|
|
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
|
|
<RecordStack.Screen
|
|
name="Record"
|
|
component={VideoDetails}
|
|
initialParams={{ mode: "start-video" }}
|
|
/>
|
|
<RecordStack.Screen name="Camera" component={CameraScreen} />
|
|
<RecordStack.Screen
|
|
name="SaveVideo"
|
|
component={VideoDetails}
|
|
initialParams={{ mode: "save-video" }}
|
|
/>
|
|
</RecordStack.Navigator>
|
|
);
|
|
}
|
|
|
|
function SessionTabStack() {
|
|
return (
|
|
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
|
|
<RecordStack.Screen name="SessionFeed" component={SessionFeed} />
|
|
<RecordStack.Screen name="Session" component={Session} />
|
|
</RecordStack.Navigator>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 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: tabIconColors.selected,
|
|
tabBarInactiveTintColor: tabIconColors.default,
|
|
tabBarIcon: () => {
|
|
return tabIcons[route.name];
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="SessionStack"
|
|
component={SessionTabStack}
|
|
options={{ tabBarLabel: "Session" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="VideoStack"
|
|
component={VideoTabStack}
|
|
options={{ tabBarLabel: "Record" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Profile"
|
|
component={Profile}
|
|
options={{ tabBarLabel: "Profile" }}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|