Basic app skeleton with functional nav bar and page headers with title and aarti logo

app.json

@@ -27,7 +27,8 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true

app/(tabs)/_layout.tsx

@@ -1,9 +1,13 @@
 import { Tabs } from 'expo-router';
-import React from 'react';
+import { Image, View, Text, StyleSheet } from 'react-native';
+import React, { useEffect } from 'react';
 
-import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import Feather from '@expo/vector-icons/Feather';
+import Entypo from '@expo/vector-icons/Entypo';
+
+const ICON_SIZE = 29;
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
@@ -12,26 +16,128 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
+        tabBarInactiveTintColor: 'black',
+        tabBarShowLabel: true,
+        tabBarStyle: {
+          backgroundColor: '#CCCCCC',
+          borderTopWidth: 0,
+          height: 85,
+          paddingBottom: 0,
+          paddingTop: 10,
+        },
+        headerShown: true,
       }}>
       <Tabs.Screen
         name="index"
         options={{
-          title:"",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
+          tabBarLabel: "Home",
+          tabBarIcon: ({ color }) => (
+            <Feather name="home" size={ICON_SIZE} color = {color} />
+          ),
+          header: () => (
+            <View style={styles.customHeader}>
+              <Text style={styles.headerText}>Home</Text>
+              <Image 
+                source={require('../../assets/images/aarti-logo.png')}
+                style={styles.logo}
+              />
+            </View>
+          )
+        }}
+      />
+      <Tabs.Screen
+        name="resources"
+        options={{
+          tabBarLabel: "Resources",
+          tabBarIcon: ({ color }) => (
+            <Feather name="book-open" size={ICON_SIZE} color = {color} />
           ),
+          header: () => (
+            <View style={styles.customHeader}>
+              <Text style={styles.headerText}>Resources</Text>
+              <Image 
+                source={require('../../assets/images/aarti-logo.png')}
+                style={styles.logo}
+              />
+            </View>
+          )
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="quizzes"
         options={{
-          title:"",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
+          tabBarLabel: "Quizzes",
+          tabBarIcon: ({ color }) => (
+            <Entypo name="graduation-cap" size={ICON_SIZE} color= {color} />
           ),
+          header: () => (
+            <View style={styles.customHeader}>
+              <Text style={styles.headerText}>Quizzes</Text>
+              <Image 
+                source={require('../../assets/images/aarti-logo.png')}
+                style={styles.logo}
+              />
+            </View>
+          )
+        }}
+      />
+      <Tabs.Screen
+      name="profile"
+      options={{
+        tabBarLabel: "Profile",
+        tabBarIcon: ({ color }) => (
+            <Feather name="user" size={ICON_SIZE} color = {color} />
+        ),
+        header: () => (
+          <View style={styles.customHeader}>
+            <Text style={styles.headerText}>Profile</Text>
+            <Image 
+              source={require('../../assets/images/aarti-logo.png')}
+              style={styles.logo}
+            />
+          </View>
+        )
+      }}
+    />
+    <Tabs.Screen
+        name="chatbot"
+        options={{
+          tabBarLabel: "Chat",
+          tabBarIcon: ({ color }) => (
+            <Entypo name="chat" size={ICON_SIZE} color = {color} />
+          ),
+          header: () => (
+            <View style={styles.customHeader}>
+              <Text style={styles.headerText}>Chat</Text>
+              <Image 
+                source={require('../../assets/images/aarti-logo.png')}
+                style={styles.logo}
+              />
+            </View>
+          )
         }}
       />
     </Tabs>
   );
 }
+
+const styles = StyleSheet.create({
+  customHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 100,
+    backgroundColor: '#5f2446',
+    justifyContent: 'space-between',
+    paddingHorizontal: 15,
+  },
+  logo: {
+    width: 120,
+    height: 70,
+    marginRight: 10,
+  },
+  headerText: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+});

app/(tabs)/chatbot.tsx

@@ -0,0 +1,18 @@
+import { Image, StyleSheet, Platform, View, Text } from 'react-native';
+
+export default function ChatBotScreen() {
+  return (
+    <View style={styles.container}>
+      <Text>This is a chatbot screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app/(tabs)/index.tsx

@@ -1,13 +1,18 @@
-import { Image, StyleSheet, Platform } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { Image, StyleSheet, Platform, View, Text } from 'react-native';
 
 export default function HomeScreen() {
   return (
-    <>
-    </>
+    <View style={styles.container}>
+      <Text>This is a home screen</Text>
+    </View>
   );
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app/(tabs)/profile.tsx

@@ -0,0 +1,18 @@
+import { Image, StyleSheet, Platform, View, Text } from 'react-native';
+
+export default function ProfileScreen() {
+  return (
+    <View style={styles.container}>
+      <Text>This is a profile screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app/(tabs)/quizzes.tsx

@@ -0,0 +1,18 @@
+import { Image, StyleSheet, Platform, View, Text } from 'react-native';
+
+export default function QuizScreen() {
+  return (
+    <View style={styles.container}>
+      <Text>This is a quiz screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app/(tabs)/resources.tsx

@@ -0,0 +1,18 @@
+import { Image, StyleSheet, Platform, View, Text } from 'react-native';
+
+export default function ResourcesScreen() {
+  return (
+    <View style={styles.container}>
+      <Text>This is a resource screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});