Fix color schemes!

app/(tabs)/_layout.tsx

@@ -1,67 +1,101 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, useColorScheme, View } from 'react-native';
 
 import { HapticTab } from '@/components/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import TabBarBackground from '@/components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { lightTheme, darkTheme } from '@/constants/Colors';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ThemedView } from '@/components/ThemedView';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+  const insets = useSafeAreaInsets();
 
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarLabelPosition: 'below-icon',
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
-          },
-          default: {},
-        }),
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Journey',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
+    <View style={{ flex: 1 }}>
+      <View
+        // Top status bar background
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: insets.top,
+          backgroundColor: theme.colors.primary, // Or any custom color
+          zIndex: 1000,
         }}
       />
-      <Tabs.Screen
-        name="calendar"
-        options={{
-          title: 'Calendar',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
+      <View
+        // Bottom navigation bar background
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: insets.bottom,
+          backgroundColor: theme.colors.primary, // Or any custom color
+          zIndex: 1000,
         }}
       />
-      <Tabs.Screen
-        name="media"
-        options={{
-          title: 'Media',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="atlas"
-        options={{
-          title: 'Atlas',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="today"
-        options={{
-          title: 'Today',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
-        }}
-      />
-    </Tabs>
+
+      <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
+        <ThemedView style={{ flex: 1 }}>
+          <Tabs
+            screenOptions={{
+              tabBarActiveTintColor: theme.colors.primary,
+              headerShown: false,
+              tabBarLabelPosition: 'below-icon',
+              tabBarButton: HapticTab,
+              tabBarBackground: TabBarBackground,
+              tabBarStyle: Platform.select({
+                ios: {
+                  // Use a transparent background on iOS to show the blur effect
+                  position: 'absolute',
+                },
+                default: {},
+              }),
+            }}>
+            <Tabs.Screen
+              name="index"
+              options={{
+                title: 'Journey',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
+              }}
+            />
+            <Tabs.Screen
+              name="calendar"
+              options={{
+                title: 'Calendar',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
+              }}
+            />
+            <Tabs.Screen
+              name="media"
+              options={{
+                title: 'Media',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
+              }}
+            />
+            <Tabs.Screen
+              name="atlas"
+              options={{
+                title: 'Atlas',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
+              }}
+            />
+            <Tabs.Screen
+              name="today"
+              options={{
+                title: 'Today',
+                tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
+              }}
+            />
+          </Tabs>
+        </ThemedView>
+      </SafeAreaView>
+    </View>
   );
 }

app/(tabs)/index.tsx

@@ -1,35 +1,46 @@
 import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, useColorScheme, View } from 'react-native';
 
 import { HelloWave } from '@/components/HelloWave';
 import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
-import { Text } from 'react-native-paper';
+import { List, Text, useTheme } from 'react-native-paper';
+import { useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
 
 export default function HomeScreen() {
+  const [dataDirectoryUri, setDirectoryUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadDirectoryUri = async () => {
+      try {
+        const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
+        if (savedUri) {
+          setDirectoryUri(savedUri);
+        }
+      } catch (error) {
+        console.error('Error loading directory URI:', error);
+      }
+    };
+
+    loadDirectoryUri();
+  }, []);
+
+  const theme = useTheme();
+
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#35C4E5', dark: '#35C4E5' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/main-screen.png')}
-          style={styles.headerImage}
-        />
-      }>
-      <Text variant="headlineLarge" style={styles.titleContainer}>
+    <ThemedView style={{ flex: 1, padding: 16 }}>
+      <ThemedText type="title">
         My Journey
-      </Text>
-    </ParallaxScrollView>
+      </ThemedText>
+      <ThemedText>{theme.colors.primary}</ThemedText>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
   stepContainer: {
     gap: 8,
     marginBottom: 8,

app/SettingsScreen.tsx

@@ -5,8 +5,8 @@ import { List, Text } from 'react-native-paper';
 import { Directory, Paths } from 'expo-file-system/next';
 import { StorageAccessFramework } from 'expo-file-system';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
 
-const DATA_DIRECTORY_URI_KEY = 'dataDirectoryUri';
 
 const prettyName = (uri: string | null) => {
     if (!uri) return null;

app/_layout.tsx

@@ -1,17 +1,19 @@
-import { DarkTheme, ThemeProvider } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
-import { MD3LightTheme as DefaultTheme, PaperProvider } from 'react-native-paper';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { PaperProvider } from 'react-native-paper';
+import * as NavigationBar from 'expo-navigation-bar';
+
+import { Platform, useColorScheme } from 'react-native';
+import { lightTheme, darkTheme } from '@/constants/Colors';
 import SettingsScreen from './SettingsScreen';
 import { IconSymbol } from '@/components/ui/IconSymbol';
-import { TouchableOpacity } from 'react-native';
-import { Colors } from '@/constants/Colors';
+import { TouchableOpacity, View } from 'react-native';
 import NullComponent from '@/components/NullComponent';
+import { useEffect } from 'react';
 
 const Drawer = createDrawerNavigator();
 const RootStack = createNativeStackNavigator();
@@ -26,6 +28,8 @@ function TabsNavigator() {
 }
 
 function DrawerNavigator() {
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
   return (
     <Drawer.Navigator>
       <Drawer.Screen
@@ -39,10 +43,10 @@ function DrawerNavigator() {
       <Drawer.Group
         screenOptions={{
           headerShown: false,
-          drawerActiveTintColor: Colors.light.tint,
-          drawerInactiveTintColor: Colors.light.text,
+          drawerActiveTintColor: theme.colors.primary,
+          drawerInactiveTintColor: theme.colors.onSurfaceVariant,
           drawerStyle: {
-            backgroundColor: Colors.light.background,
+            backgroundColor: theme.colors.background,
           },
         }}
       >
@@ -70,23 +74,22 @@ function DrawerNavigator() {
   );
 }
 
-const theme = {
-  ...DefaultTheme,
-  colors: {
-    ...DefaultTheme.colors,
-    primary: Colors.light.tint,
-    background: Colors.light.background,
-    text: Colors.light.text,
-    placeholder: Colors.light.tabIconDefault,
-    icon: Colors.light.icon,
-  },
-};
-
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      const backgroundColor = theme.colors.primary;
+      const foregroundColor = colorScheme === 'dark' ? 'light' : 'dark';
+
+      NavigationBar.setStyle('light');
+    }
+  }, [colorScheme]);
+
 
   if (!loaded) {
     return null;
@@ -117,13 +120,13 @@ export default function RootLayout() {
                   marginRight: 15,
                 }}
               >
-                <IconSymbol name="close" size={24} color={Colors[colorScheme ?? 'light'].icon} />
+                <IconSymbol name="close" size={24} color={theme.colors.primary} />
               </TouchableOpacity>
             ),
           })}
         />
       </RootStack.Navigator>
-      <StatusBar style="auto" />
+      <StatusBar style={theme.dark ? 'light' : 'dark'} />
     </PaperProvider>
   );
 }