railbird-gql/navigation/tab-navigator.tsx

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>
);
}