85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
|
import { AntDesign, Entypo, FontAwesome, FontAwesome5, Ionicons } from '@expo/vector-icons';
|
||
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||
|
|
import React from 'react';
|
||
|
|
import { useColors } from './common/colors';
|
||
|
|
import Calendar from './screens/Calendar';
|
||
|
|
import Dashboard from './screens/Dashboard';
|
||
|
|
import Schedule from './screens/Schedule';
|
||
|
|
import Settings from './screens/Settings';
|
||
|
|
import Search from './screens/Search';
|
||
|
|
import { View, Text, Image, StyleSheet } from 'react-native';
|
||
|
|
|
||
|
|
const Tab = createBottomTabNavigator();
|
||
|
|
|
||
|
|
const BottomTabs = () => {
|
||
|
|
const colors = useColors();
|
||
|
|
return (
|
||
|
|
<Tab.Navigator
|
||
|
|
screenOptions={{
|
||
|
|
tabBarStyle: { backgroundColor: colors.backSecondary },
|
||
|
|
tabBarActiveTintColor: colors.primary,
|
||
|
|
tabBarInactiveTintColor: colors.text,
|
||
|
|
headerStyle: {
|
||
|
|
backgroundColor: colors.backSecondary,
|
||
|
|
},
|
||
|
|
tabBarShowLabel: false,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Tab.Screen name="Dashboard" component={Dashboard} options={{
|
||
|
|
tabBarHideOnKeyboard: true,
|
||
|
|
headerTitle: () => <CustomHeaderTitle title="Dashboard" />,
|
||
|
|
tabBarIcon: ({ color, size }) => <Entypo name="home" size={size} color={color} />
|
||
|
|
}} />
|
||
|
|
<Tab.Screen name="Schedule" component={Schedule} options={{
|
||
|
|
tabBarHideOnKeyboard: true,
|
||
|
|
headerTitle: () => <CustomHeaderTitle title="Stundenplan" />,
|
||
|
|
tabBarIcon: ({ color, size }) => <AntDesign name="table" size={size} color={color} />
|
||
|
|
}} />
|
||
|
|
<Tab.Screen name="Calendar" component={Calendar} options={{
|
||
|
|
tabBarHideOnKeyboard: true,
|
||
|
|
headerTitle: () => <CustomHeaderTitle title="Kalender" />,
|
||
|
|
tabBarIcon: ({ color, size }) => <FontAwesome5 name="calendar-day" size={size} color={color} />
|
||
|
|
}} />
|
||
|
|
<Tab.Screen name="Search" component={Search} options={{
|
||
|
|
tabBarHideOnKeyboard: true,
|
||
|
|
headerTitle: () => <CustomHeaderTitle title="Freie Räume" />,
|
||
|
|
tabBarIcon: ({ color, size }) => <FontAwesome name="search" size={size} color={color} />
|
||
|
|
}} />
|
||
|
|
<Tab.Screen name="Settings" component={Settings} options={{
|
||
|
|
|
||
|
|
tabBarHideOnKeyboard: true,
|
||
|
|
headerTitle: () => <CustomHeaderTitle title="Einstellungen" />,
|
||
|
|
tabBarIcon: ({ color, size }) => <Ionicons name="settings-sharp" size={size} color={color} />
|
||
|
|
}} />
|
||
|
|
</Tab.Navigator >
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BottomTabs;
|
||
|
|
|
||
|
|
|
||
|
|
const CustomHeaderTitle = ({ title }) => {
|
||
|
|
const colors = useColors();
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<Image source={require('./assets/favicon.png')} style={styles.logo} />
|
||
|
|
<Text style={[styles.title, {color: colors.text}]}>KlaTab - {title}</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
logo: {
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
marginRight: 8,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 18,
|
||
|
|
},
|
||
|
|
});
|