41 lines
1.4 KiB
TypeScript
41 lines
1.4 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';
|
||
|
|
|
||
|
|
// 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>
|
||
|
|
);
|
||
|
|
}
|