59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
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 }} />,
|
|
'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>
|
|
);
|
|
} |