62 lines
1.9 KiB
TypeScript
62 lines
1.9 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 Session from "../screens/session";
|
|
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 }} />,
|
|
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.
|
|
* 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}
|
|
options={{ tabBarLabel: "Session" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="VideoStack"
|
|
component={VideoTabStack}
|
|
options={{ tabBarLabel: "Record" }}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|