97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { NavigationContainer } from "@react-navigation/native";
|
|
import { StyleSheet } from "react-native";
|
|
import Icon from "react-native-vector-icons/Ionicons";
|
|
|
|
import Colors from "../constants/colors";
|
|
|
|
import MainScreen from "../screens/MainScreen";
|
|
import LogoTitle from "../components/LogoTitle";
|
|
import PersonOverviewScreen from "../screens/PersonOverviewScreen";
|
|
import EventOverviewScreen from "../screens/EventOverviewScreen";
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
function Navigator() {
|
|
return (
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: Colors.accent500,
|
|
},
|
|
tabBarShowLabel: true,
|
|
headerTitle: (props) => <LogoTitle {...props} />,
|
|
tabBarStyle: styles.TabBar,
|
|
tabBarActiveTintColor: Colors.accent500,
|
|
tabBarActiveBackgroundColor: Colors.primary400,
|
|
}}
|
|
>
|
|
<Tab.Screen
|
|
name="Persons"
|
|
component={PersonOverviewScreen}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Icon name="gift-outline" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Budget"
|
|
component={MainScreen}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Icon name="logo-usd" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Home"
|
|
component={MainScreen}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Icon name="home-outline" color={color} size={size} />
|
|
),
|
|
tabBarItemStyle: styles.homeTab,
|
|
tabBarActiveTintColor: Colors.accent500,
|
|
tabBarActiveBackgroundColor: Colors.primary400,
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Calendar"
|
|
component={EventOverviewScreen}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Icon name="calendar-outline" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Profile"
|
|
component={MainScreen}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Icon name="person-circle-outline" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
TabBar: {
|
|
backgroundColor: Colors.primary500,
|
|
},
|
|
homeTab: {
|
|
marginTop: 2,
|
|
borderWidth: 1,
|
|
borderColor: Colors.accent300,
|
|
borderRadius: 50,
|
|
padding: 5,
|
|
},
|
|
});
|
|
|
|
export default Navigator;
|