-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
109 lines (106 loc) · 3.49 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { GlobalStyles } from "./constants/styles";
import AllExpenses from "./screens/AllExpenses";
import ManageExpense from "./screens/ManageExpense";
import RecentExpenses from "./screens/RecentExpenses";
import { Ionicons } from "@expo/vector-icons";
import IconButton from "./UI/IconButton";
import ExpenseContextProvider from "./store/expenses-context";
export default function App() {
const Stack = createNativeStackNavigator();
const BottomTabs = createBottomTabNavigator();
function ExponsesOverview() {
return (
<BottomTabs.Navigator
screenOptions={({ navigation }) => ({
headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
headerTintColor: "white",
tabBarStyle: {
backgroundColor: GlobalStyles.colors.primary500,
},
tabBarActiveTintColor: GlobalStyles.colors.accent500,
headerRight: ({ tintColor }) => (
<IconButton
onPress={() => navigation.navigate("ManageExpense")}
icon="add"
size={24}
color={tintColor}
/>
),
})}
>
<BottomTabs.Screen
options={{
title: "Recent Expenses",
tabBarLabel: "Recent",
tabBarActiveTintColor: "#E7E5DF",
tabBarInactiveTintColor: "#B9B7A7",
tabBarIcon: ({ size, focused }) => (
<Ionicons
name={`${focused ? "hourglass-outline" : "hourglass"}`}
color={`${focused ? "#E7E5DF" : "#B9B7A7"}`}
size={size}
/>
),
}}
name="RecentExpenses"
component={RecentExpenses}
/>
<BottomTabs.Screen
options={{
title: "All Expenses",
tabBarLabel: "All Expenses",
tabBarActiveTintColor: "#E7E5DF",
tabBarInactiveTintColor: "#B9B7A7",
tabBarIcon: ({ size, focused }) => (
<Ionicons
name={`${focused ? "calendar-outline" : "calendar"}`}
color={`${focused ? "#E7E5DF" : "#B9B7A7"}`}
size={size}
/>
),
}}
name="AllExpenses"
component={AllExpenses}
/>
</BottomTabs.Navigator>
);
}
return (
<>
<StatusBar style="light" />
<ExpenseContextProvider>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: GlobalStyles.colors.primary500,
headerTintColor: "white",
},
}}
>
<Stack.Screen
name="ExpensesOverview"
component={ExponsesOverview}
options={{ headerShown: false }}
/>
<Stack.Screen
title="Manage Expense"
name="ManageExpense"
component={ManageExpense}
options={{
headerTintColor: "white",
presentation: "modal",
}}
/>
</Stack.Navigator>
</NavigationContainer>
</ExpenseContextProvider>
</>
);
}
const styles = StyleSheet.create({});