Routes

App.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { StatusBar, SafeAreaView } from 'react-native';
 import AppNavigator from './navigation/AppNavigator';
-import Auth from './components/Auth';
+
 
 export default function App() {
   return (
     <>
       <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <Auth />
-      </SafeAreaView>
+
       <AppNavigator />
     </>
   );

app.json

@@ -21,7 +21,7 @@
     "android": {
       "config": {
         "googleMaps": {
-          "apiKey": "AlzaSya0Ll6laKMO06oO9lBmTdqQ6P_4Qo1_fEJ"
+          "apiKey": "AlzaSykD0-TOgCvku5D5nyYC67DmWk2aaon-COna"
         }
       },
       "adaptiveIcon": {

components/Auth.js

@@ -1,43 +1,10 @@
-import React, { useState } from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
-import { supabase } from '../lib/supabase'; // Adjust the import path as necessary
-import { Button, Input } from '@rneui/themed';
-
-export default function Auth() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-  const signInWithEmail = async () => {
-    const { error } = await supabase.auth.signInWithPassword({ email, password });
-    if (error) Alert.alert(error.message);
-  };
-
-  const signUpWithEmail = async () => {
-    const { error } = await supabase.auth.signUp({ email, password });
-    if (error) Alert.alert(error.message);
-  };
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
 
+export default function Auth({ navigation }) {
   return (
     <View style={styles.container}>
-      <Input
-        label="Email"
-        leftIcon={{ type: 'font-awesome', name: 'envelope' }}
-        onChangeText={setEmail}
-        value={email}
-        placeholder="email@address.com"
-        autoCapitalize="none"
-      />
-      <Input
-        label="Password"
-        leftIcon={{ type: 'font-awesome', name: 'lock' }}
-        onChangeText={setPassword}
-        value={password}
-        secureTextEntry
-        placeholder="Password"
-        autoCapitalize="none"
-      />
-      <Button title="Sign In" onPress={signInWithEmail} />
-      <Button title="Sign Up" onPress={signUpWithEmail} />
+
     </View>
   );
 }

components/UserHeader.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { supabase } from '../lib/supabase';
+
+const fallbackAvatar = require('../assets/avatar.jpg');
+
+const UserHeader = ({ minimal = false }) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const { data } = await supabase.auth.getUser();
+      if (data?.user) {
+        const { user } = data;
+        const displayName =
+          user.user_metadata?.full_name ||
+          user.user_metadata?.name ||
+          user.email;
+        const avatar =
+          user.user_metadata?.avatar_url ||
+          user.user_metadata?.picture ||
+          null;
+        setUser({
+          name: displayName,
+          avatar,
+        });
+      }
+    };
+    fetchUser();
+  }, []);
+
+  if (minimal) {
+    // Render only the profile picture
+    return (
+      <Image
+        source={user?.avatar ? { uri: user.avatar } : fallbackAvatar}
+        style={styles.avatarLarge}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.header}>
+      <Image
+        source={user?.avatar ? { uri: user.avatar } : fallbackAvatar}
+        style={styles.avatar}
+      />
+      <Text style={styles.greeting}>
+        Hey, <Text style={styles.name}>{user?.name || 'User'}</Text>
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    margin: 10,
+    marginTop: 40,
+    padding: 10,
+    borderRadius: 50,
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+    justifyContent: 'space-between',
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 50,
+    marginRight: 16,
+  },
+  avatarLarge: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+  },
+  greeting: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '500',
+    color: '#333',
+    textAlign: 'center',
+  },
+  name: {
+    fontWeight: 'bold',
+  },
+});
+
+export default UserHeader;

navigation/AppNavigator.js

@@ -6,6 +6,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { Animated } from 'react-native';
 import { CardStyleInterpolators } from '@react-navigation/stack';
 
+
 // Auth Screens
 import SplashScreen from '../screens/SplashScreen';
 import LoginScreen from '../screens/LoginScreen';
@@ -15,7 +16,7 @@ import HomeScreen from '../screens/HomeScreen';
 import MapViewScreen from '../screens/MapViewScreen';
 import BusStopScreen from '../screens/BusStopScreen';
 import TransportInfoScreen from '../screens/TransportInfoScreen';
-import FavoritesScreen from '../screens/FavoritesScreen';
+import MostUsedScreen from '../screens/MostUsedScreen';
 import ProfileScreen from '../screens/ProfileScreen';
 
 const Tab = createBottomTabNavigator();
@@ -28,7 +29,7 @@ const MainTabNavigator = () => {
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
-        headerShown: false,
+        headerShown: false, // Ensure no header is shown
         tabBarIcon: ({ focused, color, size }) => {
           let iconName;
 
@@ -40,8 +41,8 @@ const MainTabNavigator = () => {
             iconName = focused ? 'bus' : 'bus-outline';
           } else if (route.name === 'Transport') {
             iconName = focused ? 'information-circle' : 'information-circle-outline';
-          } else if (route.name === 'Favorites') {
-            iconName = focused ? 'heart' : 'heart-outline';
+          } else if (route.name === 'Most Used') {
+            iconName = focused ? 'star' : 'star-outline';
           } else if (route.name === 'Profile') {
             iconName = focused ? 'person' : 'person-outline';
           }
@@ -50,16 +51,13 @@ const MainTabNavigator = () => {
         },
         tabBarActiveTintColor: '#acd4fd',
         tabBarInactiveTintColor: '#fff',
-        headerShown: false,
         tabBarShowLabel: true,
-
         tabBarStyle: {
           position: 'absolute',
           height: 60,
           paddingBottom: 9,
           paddingTop: 8,
           backgroundColor: 'black',
-
           left: '15%',
           right: '15%',
           bottom: 20,
@@ -72,14 +70,14 @@ const MainTabNavigator = () => {
           margin: 20,
         },
         tabBarHideOnKeyboard: false,
-        animationEnabled: false
+        animationEnabled: false,
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Map" component={MapViewScreen} />
       <Tab.Screen name="Bus Stops" component={BusStopScreen} />
       <Tab.Screen name="Transport" component={TransportInfoScreen} />
-      <Tab.Screen name="Favorites" component={FavoritesScreen} />
+      <Tab.Screen name="Most Used" component={MostUsedScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
     </Tab.Navigator>
   );
@@ -88,12 +86,12 @@ const MainTabNavigator = () => {
 // Auth stack navigator
 const AuthStack = () => {
   return (
-    <Stack.Navigator 
-      screenOptions={{ 
-        headerShown: false,
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false, // Ensure no header is shown
         cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
         presentation: 'card',
-        animation: 'slide_from_right'
+        animation: 'slide_from_right',
       }}
     >
       <Stack.Screen name="Splash" component={SplashScreen} />
@@ -122,12 +120,12 @@ const RootNavigator = () => {
   }
 
   return (
-    <Stack.Navigator 
-      screenOptions={{ 
-        headerShown: false,
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false, // Ensure no header is shown
         cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
         presentation: 'card',
-        animation: 'slide_from_right'
+        animation: 'slide_from_right',
       }}
     >
       {isAuthenticated ? (
@@ -136,6 +134,7 @@ const RootNavigator = () => {
         <>
           <Stack.Screen name="Login" component={LoginScreen} />
           <Stack.Screen name="MainTabNavigator" component={MainTabNavigator} />
+          <Stack.Screen name="Map" component={MapViewScreen} />
         </>
       )}
     </Stack.Navigator>