Skip to content

Commit 5f781ee

Browse files
romanobro56romanobro56
authored
Merge pull request #2 from build-umass/sean-tabBarAndHeader
Basic app skeleton with functional nav bar and page headers with title and aarti logo
2 parents e251292 + c26d50a commit 5f781ee

15 files changed

+3140
-4433
lines changed

‎app.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"favicon": "./assets/images/favicon.png"
2828
},
2929
"plugins": [
30-
"expo-router"
30+
"expo-router",
31+
"expo-font"
3132
],
3233
"experiments": {
3334
"typedRoutes": true

‎app/(tabs)/_layout.tsx

+116-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { Tabs } from 'expo-router';
2-
import React from 'react';
2+
import { Image, View, Text, StyleSheet } from 'react-native';
3+
import React, { useEffect } from 'react';
34

4-
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
55
import { Colors } from '@/constants/Colors';
66
import { useColorScheme } from '@/hooks/useColorScheme';
7+
import Feather from '@expo/vector-icons/Feather';
8+
import Entypo from '@expo/vector-icons/Entypo';
9+
10+
const ICON_SIZE = 29;
711

812
export default function TabLayout() {
913
const colorScheme = useColorScheme();
@@ -12,26 +16,128 @@ export default function TabLayout() {
1216
<Tabs
1317
screenOptions={{
1418
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
15-
headerShown: false,
19+
tabBarInactiveTintColor: 'black',
20+
tabBarShowLabel: true,
21+
tabBarStyle: {
22+
backgroundColor: '#CCCCCC',
23+
borderTopWidth: 0,
24+
height: 85,
25+
paddingBottom: 0,
26+
paddingTop: 10,
27+
},
28+
headerShown: true,
1629
}}>
1730
<Tabs.Screen
1831
name="index"
1932
options={{
20-
title:"",
21-
tabBarIcon: ({ color, focused }) => (
22-
<TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
33+
tabBarLabel: "Home",
34+
tabBarIcon: ({ color }) => (
35+
<Feather name="home" size={ICON_SIZE} color = {color} />
36+
),
37+
header: () => (
38+
<View style={styles.customHeader}>
39+
<Text style={styles.headerText}>Home</Text>
40+
<Image
41+
source={require('../../assets/images/aarti-logo.png')}
42+
style={styles.logo}
43+
/>
44+
</View>
45+
)
46+
}}
47+
/>
48+
<Tabs.Screen
49+
name="resources"
50+
options={{
51+
tabBarLabel: "Resources",
52+
tabBarIcon: ({ color }) => (
53+
<Feather name="book-open" size={ICON_SIZE} color = {color} />
2354
),
55+
header: () => (
56+
<View style={styles.customHeader}>
57+
<Text style={styles.headerText}>Resources</Text>
58+
<Image
59+
source={require('../../assets/images/aarti-logo.png')}
60+
style={styles.logo}
61+
/>
62+
</View>
63+
)
2464
}}
2565
/>
2666
<Tabs.Screen
27-
name="explore"
67+
name="quizzes"
2868
options={{
29-
title:"",
30-
tabBarIcon: ({ color, focused }) => (
31-
<TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
69+
tabBarLabel: "Quizzes",
70+
tabBarIcon: ({ color }) => (
71+
<Entypo name="graduation-cap" size={ICON_SIZE} color= {color} />
3272
),
73+
header: () => (
74+
<View style={styles.customHeader}>
75+
<Text style={styles.headerText}>Quizzes</Text>
76+
<Image
77+
source={require('../../assets/images/aarti-logo.png')}
78+
style={styles.logo}
79+
/>
80+
</View>
81+
)
82+
}}
83+
/>
84+
<Tabs.Screen
85+
name="profile"
86+
options={{
87+
tabBarLabel: "Profile",
88+
tabBarIcon: ({ color }) => (
89+
<Feather name="user" size={ICON_SIZE} color = {color} />
90+
),
91+
header: () => (
92+
<View style={styles.customHeader}>
93+
<Text style={styles.headerText}>Profile</Text>
94+
<Image
95+
source={require('../../assets/images/aarti-logo.png')}
96+
style={styles.logo}
97+
/>
98+
</View>
99+
)
100+
}}
101+
/>
102+
<Tabs.Screen
103+
name="chatbot"
104+
options={{
105+
tabBarLabel: "Chat",
106+
tabBarIcon: ({ color }) => (
107+
<Entypo name="chat" size={ICON_SIZE} color = {color} />
108+
),
109+
header: () => (
110+
<View style={styles.customHeader}>
111+
<Text style={styles.headerText}>Chat</Text>
112+
<Image
113+
source={require('../../assets/images/aarti-logo.png')}
114+
style={styles.logo}
115+
/>
116+
</View>
117+
)
33118
}}
34119
/>
35120
</Tabs>
36121
);
37122
}
123+
124+
const styles = StyleSheet.create({
125+
customHeader: {
126+
flexDirection: 'row',
127+
alignItems: 'center',
128+
height: 100,
129+
backgroundColor: '#5f2446',
130+
justifyContent: 'space-between',
131+
paddingHorizontal: 15,
132+
},
133+
logo: {
134+
width: 120,
135+
height: 70,
136+
marginRight: 10,
137+
},
138+
headerText: {
139+
fontSize: 25,
140+
fontWeight: 'bold',
141+
color: '#fff',
142+
},
143+
});

‎app/(tabs)/chatbot.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
2+
3+
export default function ChatBotScreen() {
4+
return (
5+
<View style={styles.container}>
6+
<Text>This is a chatbot screen</Text>
7+
</View>
8+
);
9+
}
10+
11+
const styles = StyleSheet.create({
12+
container: {
13+
flex: 1,
14+
backgroundColor: 'white',
15+
alignItems: 'center',
16+
justifyContent: 'center',
17+
},
18+
});

‎app/(tabs)/explore.tsx

-14
This file was deleted.

‎app/(tabs)/index.tsx

+14-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import { Image, StyleSheet, Platform } from 'react-native';
2-
3-
import { HelloWave } from '@/components/HelloWave';
4-
import ParallaxScrollView from '@/components/ParallaxScrollView';
5-
import { ThemedText } from '@/components/ThemedText';
6-
import { ThemedView } from '@/components/ThemedView';
1+
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
72

83
export default function HomeScreen() {
94
return (
10-
<>
11-
</>
5+
<View style={styles.container}>
6+
<Text>This is a home screen</Text>
7+
</View>
128
);
13-
}
9+
}
10+
11+
const styles = StyleSheet.create({
12+
container: {
13+
flex: 1,
14+
backgroundColor: 'white',
15+
alignItems: 'center',
16+
justifyContent: 'center',
17+
},
18+
});

‎app/(tabs)/profile.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
2+
3+
export default function ProfileScreen() {
4+
return (
5+
<View style={styles.container}>
6+
<Text>This is a profile screen</Text>
7+
</View>
8+
);
9+
}
10+
11+
const styles = StyleSheet.create({
12+
container: {
13+
flex: 1,
14+
backgroundColor: 'white',
15+
alignItems: 'center',
16+
justifyContent: 'center',
17+
},
18+
});

‎app/(tabs)/quizzes.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
2+
3+
export default function QuizScreen() {
4+
return (
5+
<View style={styles.container}>
6+
<Text>This is a quiz screen</Text>
7+
</View>
8+
);
9+
}
10+
11+
const styles = StyleSheet.create({
12+
container: {
13+
flex: 1,
14+
backgroundColor: 'white',
15+
alignItems: 'center',
16+
justifyContent: 'center',
17+
},
18+
});

‎app/(tabs)/resources.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
2+
3+
export default function ResourcesScreen() {
4+
return (
5+
<View style={styles.container}>
6+
<Text>This is a resource screen</Text>
7+
</View>
8+
);
9+
}
10+
11+
const styles = StyleSheet.create({
12+
container: {
13+
flex: 1,
14+
backgroundColor: 'white',
15+
alignItems: 'center',
16+
justifyContent: 'center',
17+
},
18+
});

‎assets/images/aarti-logo.png

32.5 KB
Loading

‎assets/images/partial-react-logo.png

-4.96 KB
Binary file not shown.

‎assets/images/react-logo.png

-6.19 KB
Binary file not shown.

‎assets/images/react-logo@2x.png

-13.9 KB
Binary file not shown.

‎assets/images/react-logo@3x.png

-20.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)