-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
125 lines (112 loc) · 3.55 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
* Base for the React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {ExerciseListHomeScreen, ExerciseDetailsScreen, ExerciseGraphsScreen} from 'screens/lifts';
import {createStackNavigator} from '@react-navigation/stack';
import {Color} from 'components/stylesheet';
import {DevToolScreen, SettingsScreen, GeneralStatisticsScreen} from 'screens';
import Icon from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
const MyTheme = {
dark: true,
colors: {
primary: Color.active,
background: Color.backgroundColor,
card: Color.mainBackgroundColor,
text: Color.mainFontColor,
border: Color.borderColor,
},
};
const ExerciseStack = createStackNavigator();
function ExerciseStackScreen() {
return (
<ExerciseStack.Navigator initialRouteName="Exercises">
<ExerciseStack.Screen
name="Exercises"
component={ExerciseListHomeScreen}
options={{title: 'Weight Based Exercises'}}
/>
<ExerciseStack.Screen name="Details" component={ExerciseDetailsScreen} />
<ExerciseStack.Screen name="Graphs" component={ExerciseGraphsScreen} />
</ExerciseStack.Navigator>
);
}
const SettingsStack = createStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator initialRouteName="Settings">
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
<SettingsStack.Screen name="DevTools" component={DevToolScreen} />
</SettingsStack.Navigator>
);
}
const StatisticStack = createStackNavigator();
function StatisticStackScreen() {
return (
<StatisticStack.Navigator initialRouteName="Stats">
<StatisticStack.Screen name="Stats" component={GeneralStatisticsScreen} />
</StatisticStack.Navigator>
);
}
const App: () => React$Node = () => {
return (
<NavigationContainer theme={MyTheme}>
<Tab.Navigator
initialRouteName="ExerciseList"
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName = focused ? 'ios-list-box' : 'ios-list';
if (route.name === 'ExerciseList') {
iconName = 'ios-fitness';
} else if (route.name === 'Graphs') {
iconName = 'ios-trending-up';
} else if (route.name === 'Settings') {
iconName = 'ios-options';
} else if (route.name === 'DevTools') {
iconName = 'ios-bug';
}
return <Icon name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: Color.active,
inactiveTintColor: Color.inactive,
activeBackgroundColor: Color.activeBackgroundColor,
style: {
backgroundColor: Color.backgroundColor,
fontWeight: 'bold',
},
}}>
<Tab.Screen
name="ExerciseList"
component={ExerciseStackScreen}
options={{
title: 'Lifts',
}}
/>
<Tab.Screen
name="Stats"
component={StatisticStackScreen}
options={{
title: 'Stats',
}}
/>
<Tab.Screen
name="Settings"
component={SettingsStackScreen}
options={{
title: 'Settings',
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
};
export default App;