Skip to content

Commit 6c0c9b8

Browse files
jasminegurujasmineguru
authored
Merge pull request #36 from utmgdsc/feature/58/BottomNavigation
nav bar finally added
2 parents 80b8c7c + 5ecfd82 commit 6c0c9b8

File tree

9 files changed

+176
-42
lines changed

9 files changed

+176
-42
lines changed

‎frontend/assets/colorConstants.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ const Colors = {
1414
BLUE: 'blue',
1515
};
1616

17-
export default Colors;
17+
export default Colors;

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@react-native-firebase/auth": "^18.6.0",
1919
"@react-native-firebase/firestore": "^18.6.0",
2020
"@react-native-picker/picker": "^2.5.1",
21+
"@react-navigation/bottom-tabs": "^6.5.11",
2122
"@react-navigation/native": "^6.1.9",
2223
"@react-navigation/native-stack": "^6.9.15",
2324
"@react-navigation/stack": "^6.3.19",
@@ -68,7 +69,7 @@
6869
"eslint-plugin-react-native": "^4.1.0",
6970
"prettier": "3.0.3",
7071
"react-native-svg-transformer": "^1.1.0",
71-
"typescript": "^5.1.3"
72+
"typescript": "^5.3.2"
7273
},
7374
"private": true
7475
}

‎frontend/src/APIs/FLASK_API.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from "axios";
22
import firebaseService from "../utilities/firebase";
3-
const FLASK_LOCAL_ADDRESS: string = "http://10.0.10.10:6050";
3+
const FLASK_LOCAL_ADDRESS: string = "http://100.112.45.130:6050";
44

55
// Function to get the Firebase authentication token
66
const getFirebaseAuthToken = async (): Promise<string | null> => {

‎frontend/src/components/appNavigation.tsx‎

Lines changed: 109 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import * as React from 'react';
22
import { NavigationContainer } from '@react-navigation/native';
33
import { createNativeStackNavigator } from '@react-navigation/native-stack';
4-
import type { RootStackParamList } from './types';
4+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5+
import Ionicons from '@expo/vector-icons/Ionicons';
6+
import { Fontisto, AntDesign } from '@expo/vector-icons';
7+
import Colors from '../../assets/colorConstants';
58
import HomeScreen from '../screens/home';
69
import LogInScreen from '../screens/login';
710
import SignUpScreen from '../screens/signup';
811
import DashBoardScreen from '../screens/dashboard';
912
import Forum from '../screens/forum';
10-
import CommunityHub from '../screens/communityHub';
1113
import FoodForum from '../screens/Food/foodForum';
1214
import EnergyForum from '../screens/Energy/energyForum';
1315
import TransportationForum from '../screens/Transportation/transportationForum';
@@ -17,34 +19,118 @@ import TransportationHistory from '../screens/Transportation/transportationHisto
1719
import EnergyHistory from '../screens/Energy/energyHistory';
1820
import EnergyEntryEdit from '../screens/Energy/energyEntryEdit';
1921
import FoodEntryEdit from '../screens/Food/foodEntryEdit';
22+
import SettingsScreen from '../screens/settings';
23+
import YourForms from '../screens/yourForms';
24+
import CommunityHub from '../screens/communityHub';
2025

21-
const Stack = createNativeStackNavigator<RootStackParamList>();
26+
const Stack = createNativeStackNavigator();
27+
const Tab = createBottomTabNavigator();
2228

2329
const AppNavigation = (): JSX.Element => {
2430
return (
31+
2532
<NavigationContainer>
26-
<Stack.Navigator screenOptions={{ headerShown: false }}>
27-
<Stack.Screen name="Home" component={HomeScreen} />
28-
<Stack.Screen name="LogIn" component={LogInScreen} />
29-
<Stack.Screen name="SignUp" component={SignUpScreen} />
30-
<Stack.Screen name="DashBoard" component={DashBoardScreen} />
31-
<Stack.Screen name="Forum" component={Forum} />
32-
<Stack.Screen name="CommunityHub" component={CommunityHub} />
33-
34-
<Stack.Screen name="TransportationForum" component={TransportationForum} />
35-
<Stack.Screen name="TransportationEntryEdit" component={TransportationEntryEdit} />
36-
<Stack.Screen name="TransportationHistory" component={TransportationHistory} />
37-
38-
<Stack.Screen name="FoodForum" component={FoodForum} />
39-
<Stack.Screen name="FoodEntryEdit" component={FoodEntryEdit} />
40-
<Stack.Screen name="FoodHistory" component={FoodHistory} />
41-
42-
<Stack.Screen name="EnergyForum" component={EnergyForum} />
43-
<Stack.Screen name="EnergyEntryEdit" component={EnergyEntryEdit} />
44-
<Stack.Screen name="EnergyHistory" component={EnergyHistory} />
33+
<Stack.Navigator>
34+
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
35+
<Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
36+
<Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
37+
<Stack.Screen name="Settings" component={SettingsScreen} />
38+
<Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false }} />
39+
40+
<Stack.Screen name="Forum" component={Forum} options={{ headerShown: false }} />
41+
42+
<Stack.Screen name="TransportationForum" component={TransportationForum} options={{ headerShown: false }}/>
43+
<Stack.Screen name="TransportationEntryEdit" component={TransportationEntryEdit} options={{ headerShown: false }} />
44+
<Stack.Screen name="TransportationHistory" component={TransportationHistory} options={{ headerShown: false }} />
45+
46+
<Stack.Screen name="FoodForum" component={FoodForum} options={{ headerShown: false }} />
47+
<Stack.Screen name="FoodEntryEdit" component={FoodEntryEdit} options={{ headerShown: false }}/>
48+
<Stack.Screen name="FoodHistory" component={FoodHistory} options={{ headerShown: false }} />
49+
50+
<Stack.Screen name="EnergyForum" component={EnergyForum} options={{ headerShown: false }} />
51+
<Stack.Screen name="EnergyEntryEdit" component={EnergyEntryEdit} options={{ headerShown: false }} />
52+
<Stack.Screen name="EnergyHistory" component={EnergyHistory} options={{ headerShown: false }} />
53+
4554
</Stack.Navigator>
46-
</NavigationContainer>
55+
</NavigationContainer>
56+
);
57+
}
58+
59+
const MainAppTabs = (): JSX.Element => {
60+
return (
61+
<Tab.Navigator
62+
screenOptions={{
63+
tabBarActiveTintColor: Colors.LIGHTFGREEN,
64+
tabBarInactiveTintColor: Colors.WHITE,
65+
tabBarStyle: {
66+
backgroundColor: Colors.DARKGREEN,
67+
},
68+
}}
69+
>
70+
71+
<Tab.Screen name="Dashboard" component={DashboardStack}
72+
options={{
73+
headerShown: false,
74+
tabBarIcon: ({ focused }) => (
75+
<Ionicons
76+
name={'home-sharp'}
77+
size={24}
78+
style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }}
79+
/>
80+
),
81+
}}
82+
/>
83+
<Tab.Screen name="SettingsPage" component={SettingsScreen}
84+
options={{
85+
title: 'Settings',
86+
headerStyle: { backgroundColor: Colors.DARKGREEN },
87+
headerTintColor: '#fff',
88+
headerTitleStyle: { fontWeight: 'bold' },
89+
tabBarIcon: ({ focused }) => (
90+
<Ionicons
91+
name={'settings'}
92+
size={24}
93+
style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }}
94+
/>
95+
),
96+
}} />
97+
<Tab.Screen name="YourForms" component={YourForms}
98+
options={{
99+
title: 'My Forms',
100+
headerStyle: { backgroundColor: Colors.DARKGREEN },
101+
headerTintColor: '#fff',
102+
headerTitleStyle: { fontWeight: 'bold' },
103+
tabBarIcon: ({ focused }) => (
104+
<AntDesign name="form" size={24} color="black" style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }} />
105+
),
106+
}} />
107+
<Tab.Screen name="CommunityHub" component={CommunityHub}
108+
options={{
109+
title: 'Community Hub',
110+
headerStyle: { backgroundColor: Colors.DARKGREEN },
111+
headerTintColor: '#fff',
112+
headerTitleStyle: { fontWeight: 'bold' },
113+
tabBarIcon: ({ focused }) => (
114+
<Fontisto name="world-o" size={24} color="black" style={{ color: (focused as boolean) ? Colors.LIGHTFGREEN : Colors.WHITE }} />
115+
),
116+
}} />
117+
</Tab.Navigator>
47118
);
48119
};
49120

121+
const DashboardStack = (): React.JSX.Element => (
122+
<Stack.Navigator>
123+
<Stack.Screen
124+
name="DashBoard"
125+
component={DashBoardScreen}
126+
options={{
127+
title: 'Dashboard',
128+
headerStyle: { backgroundColor: Colors.DARKGREEN },
129+
headerTintColor: '#fff',
130+
headerTitleStyle: { fontWeight: 'bold' },
131+
}}
132+
/>
133+
</Stack.Navigator>
134+
);
135+
50136
export default AppNavigation;

‎frontend/src/components/types.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export interface RootStackParamList {
44
Home: undefined;
55
LogIn: undefined;
66
SignUp: undefined;
7+
MainApp: { screen: string } | undefined;
78
DashBoard: undefined;
89
Forum: undefined;
910
FoodForum: undefined;
@@ -12,7 +13,7 @@ export interface RootStackParamList {
1213
TransportationForum: undefined;
1314
FoodHistory: undefined;
1415
TransportationHistory: undefined;
15-
[key: string]: undefined;
16+
[key: string]: { screen: string } | undefined
1617
}
1718

1819
export interface GoogleSVGType {

‎frontend/src/screens/dashboard.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,6 @@ export default function DashBoardScreen(): JSX.Element {
109109
</TouchableOpacity>
110110
</View>
111111

112-
<View style={styles.widgetBoarder}>
113-
<TouchableOpacity
114-
onPress={() => {
115-
navigation.navigate('Settings');
116-
}}
117-
>
118-
<WidgetBox title="Settings" content={"Access User Settings"} />
119-
</TouchableOpacity>
120-
</View>
121-
122112
</View>
123113
</View>
124114
);

‎frontend/src/screens/login.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
22
import { useFonts } from 'expo-font';
33
import type { RootStackParamList } from '../components/types';
44
import type { StackNavigationProp } from '@react-navigation/stack';
5-
import { useNavigation } from '@react-navigation/native';
65
import firebaseService from '../utilities/firebase';
76
import Colors from '../../assets/colorConstants';
87
import { Formik } from 'formik';
@@ -12,6 +11,11 @@ import { UsersAPI } from '../APIs/UsersAPI';
1211

1312
export type StackNavigation = StackNavigationProp<RootStackParamList>;
1413

14+
15+
export interface LoginScreenProps {
16+
navigation: StackNavigationProp<RootStackParamList, 'LogIn'>; // Specify the type for the navigation prop
17+
};
18+
1519
interface ILogInFields {
1620
email: string;
1721
password: string;
@@ -21,16 +25,14 @@ const LogInSchema = Yup.object().shape({
2125
password: Yup.string().required('Password is required'),
2226
});
2327

24-
export default function LogInScreen(): JSX.Element {
25-
const navigation = useNavigation<StackNavigation>();
26-
28+
export default function LogInScreen({ navigation }: LoginScreenProps): JSX.Element {
2729
const handleLogIn = async (fields: ILogInFields): Promise<void> => {
2830
const { email, password } = fields;
2931
try {
3032
await firebaseService.signInUser(email, password).then(async () => {
3133
await UsersAPI.GetLoggedInUser().then((res) => {
3234
if (res != null) {
33-
navigation.navigate('DashBoard');
35+
navigation.navigate('MainApp', { screen: 'DashBoard' });
3436
} else {
3537
console.warn('User was not logged in: ' + res);
3638
}

‎frontend/src/screens/settings.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { View, Text, StyleSheet } from 'react-native';
3+
import Colors from '../../assets/colorConstants';
4+
5+
6+
export default function SettingsScreen(): JSX.Element {
7+
return (
8+
<View style={styles.container}>
9+
<Text> Welcome to Settings </Text>
10+
</View>
11+
);
12+
}
13+
14+
const styles = StyleSheet.create({
15+
container: {
16+
flex: 1,
17+
justifyContent: 'center',
18+
alignItems: 'center',
19+
backgroundColor: Colors.LIGHTFGREEN,
20+
},
21+
22+
});

‎frontend/src/screens/yourForms.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { Text, StyleSheet, ScrollView } from 'react-native';
3+
import { useFonts } from 'expo-font';
4+
import Colors from '../../assets/colorConstants';
5+
6+
export default function YourForms(): JSX.Element {
7+
const [loaded] = useFonts({
8+
Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'),
9+
Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
10+
});
11+
12+
if (!loaded) {
13+
return <></>;
14+
}
15+
16+
return (
17+
<ScrollView contentContainerStyle={styles.container}>
18+
<Text> Complete your Food 🍉 Quiz! </Text>
19+
<Text> Complete your Energy 💡 Quiz! </Text>
20+
<Text> Complete your Transportation 🚗 Quiz! </Text>
21+
</ScrollView>
22+
);
23+
}
24+
25+
const styles = StyleSheet.create({
26+
container: {
27+
alignItems: 'center',
28+
flexGrow: 1,
29+
backgroundColor: Colors.LIGHTFGREEN,
30+
},
31+
32+
});

0 commit comments

Comments
 (0)