Merge branch 'main' into fix-list-styling

app/(tabs)/_layout.tsx

@@ -24,50 +24,41 @@ export default function TabLayout() {
         tabBarActiveBackgroundColor: Colors[colorScheme ?? 'light'].tabIconSelectedBackground,
       }}>
       <Tabs.Screen
-        name="index"
+        name="(index)"
         options={{
+          headerShown: false,
           title: 'List',
           tabBarIcon: ({ color }) => <TabBarIcon name="list-ul" color={color} />,
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <Pressable>
-                {({ pressed }) => (
-                  <FontAwesome5
-                    name="info-circle"
-                    size={25}
-                    color={Colors[colorScheme ?? 'light'].text}
-                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
-                  />
-                )}
-              </Pressable>
-            </Link>
-          ),
         }}
       />
       <Tabs.Screen
         name="expenses"
         options={{
+          headerShown: false,
           title: 'Expenses',
           tabBarIcon: ({ color }) => <TabBarIcon name="dollar-sign" color={color} />,
         }}
       />
       <Tabs.Screen
         name="meal"
         options={{
+          headerShown: false,
           title: 'Meal Plan',
           tabBarIcon: ({ color }) => <TabBarIcon name="hamburger" color={color} />,
         }}
       />
       <Tabs.Screen
         name="notice"
         options={{
+          headerShown: false,
           title: 'Notice Board',
           tabBarIcon: ({ color }) => <TabBarIcon name="info-circle" color={color} />,
         }}
       />
       <Tabs.Screen
         name="settings"
         options={{
+          headerShown: false,
           title: 'Settings',
           tabBarIcon: ({ color }) => <TabBarIcon name="cog" color={color} />,
         }}

app/(tabs)/notice.tsx

@@ -49,7 +49,6 @@ const styles = StyleSheet.create({
     color: 'white',
     backgroundColor: '#5CBCA9',
     borderTopWidth: 1,
-    borderBotWidth: 1,
   },
   input: {
     maxHeight: '50%',

app/_layout.tsx

@@ -4,17 +4,14 @@ import { useFonts } from 'expo-font';
 import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Colors from '../constants/Colors';
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
 } from 'expo-router';
 
-export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
-};
-
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
@@ -47,10 +44,11 @@ function RootLayoutNav() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
-      </Stack>
+      <SafeAreaView style={{ flex: 1, backgroundColor: Colors[colorScheme ?? 'light'].background }}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        </Stack>
+      </SafeAreaView>
     </ThemeProvider>
   );
 }