Layout changes, beginning of new entry page

android/app/src/main/res/values/styles.xml

@@ -1,8 +1,7 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.EdgeToEdge.Light">
+  <style name="AppTheme" parent="Theme.EdgeToEdge">
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="enforceNavigationBarContrast">false</item>
   </style>
   <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashscreen_background</item>

app.config.js

@@ -36,8 +36,8 @@ module.exports = {
                 "react-native-edge-to-edge",
                 {
                     "android": {
-                        "parentTheme": "Light",
+                        // "parentTheme": "Light",
-                        "enforceNavigationBarContrast": false
+                        // "enforceNavigationBarContrast": false
                     }
                 }
             ],

app/(tabs)/_layout.tsx

@@ -19,110 +19,83 @@ export default function TabLayout() {
   const navigation = useNavigation();
 
   return (
-    <View style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
-      <View
+      <ThemedView style={{ flex: 1 }}>
-        // Top status bar background
+        <View style={{
-        style={{
+          backgroundColor: theme.colors.onPrimary,
           position: 'absolute',
-          top: 0,
+          display: 'flex',
-          left: 0,
+          flexDirection: 'row',
-          right: 0,
+          alignItems: 'center',
-          height: insets.top,
+          justifyContent: 'space-between',
-          backgroundColor: theme.colors.primary, // Or any custom color
+          top: 20,
+          left: 20,
+          right: 20,
+          borderRadius: 12,
           zIndex: 1000,
-        }}
+        }}>
-      />
+          <IconButton icon="menu" size={24} onPress={() => {
-      <View
+            navigation.dispatch({ type: 'OPEN_DRAWER' });
-        // Bottom navigation bar background
+          }} />
-        style={{
+          <ThemedText
-          position: 'absolute',
+            style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
-          bottom: 0,
+          >JOURNEY</ThemedText>
-          left: 0,
+          <IconButton icon="magnify" size={24} onPress={() => {
-          right: 0,
+            console.log('Search pressed');
-          height: insets.bottom,
+          }} />
-          backgroundColor: theme.colors.primary, // Or any custom color
+        </View>
-          zIndex: 1,
+        <Tabs
-        }}
+          screenOptions={{
-      />
+            tabBarActiveTintColor: theme.colors.primary,
-
+            headerShown: false,
-      <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
+            tabBarLabelPosition: 'below-icon',
-        <ThemedView style={{ flex: 1 }}>
+            tabBarButton: HapticTab,
-          <View style={{
+            tabBarStyle: Platform.select({
-            backgroundColor: theme.colors.onPrimary,
+              ios: {
-            position: 'absolute',
+                // Use a transparent background on iOS to show the blur effect
-            display: 'flex',
+                position: 'absolute',
-            flexDirection: 'row',
+              },
-            alignItems: 'center',
+              default: {
-            justifyContent: 'space-between',
+              },
-            top: 20,
+            }),
-            left: 20,
-            right: 20,
-            borderRadius: 12,
-            zIndex: 1000,
           }}>
-            <IconButton icon="menu" size={24} onPress={() => {
+          <Tabs.Screen
-              navigation.dispatch({ type: 'OPEN_DRAWER' });
+            name="index"
-            }} />
+            options={{
-            <ThemedText
+              title: 'Journey',
-              style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
-            >JOURNEY</ThemedText>
+            }}
-            <IconButton icon="magnify" size={24} onPress={() => {
+          />
-              console.log('Search pressed');
+          <Tabs.Screen
-            }} />
+            name="calendar"
-          </View>
+            options={{
-          <Tabs
+              title: 'Calendar',
-            screenOptions={{
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
-              tabBarActiveTintColor: theme.colors.primary,
+            }}
-              headerShown: false,
+          />
-              tabBarLabelPosition: 'below-icon',
+          <Tabs.Screen
-              tabBarButton: HapticTab,
+            name="media"
-              tabBarStyle: Platform.select({
+            options={{
-                ios: {
+              title: 'Media',
-                  // Use a transparent background on iOS to show the blur effect
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
-                  position: 'absolute',
+            }}
-                },
+          />
-                default: {
+          <Tabs.Screen
-                },
+            name="atlas"
-              }),
+            options={{
-            }}>
+              title: 'Atlas',
-            <Tabs.Screen
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
-              name="index"
+            }}
-              options={{
+          />
-                title: 'Journey',
+          <Tabs.Screen
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
+            name="today"
-              }}
+            options={{
-            />
+              title: 'Today',
-            <Tabs.Screen
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
-              name="calendar"
+            }}
-              options={{
+          />
-                title: 'Calendar',
+        </Tabs>
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
+      </ThemedView>
-              }}
+    </SafeAreaView>
-            />
-            <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/HomeScreen.tsx

@@ -9,10 +9,11 @@ import { FAB, IconButton, 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';
+import { useNavigation } from 'expo-router';
 
 export default function HomeScreen() {
   const [dataDirectoryUri, setDirectoryUri] = useState<string | null>(null);
-
+  const navigation = useNavigation();
   useEffect(() => {
     const loadDirectoryUri = async () => {
       try {
@@ -66,7 +67,8 @@ export default function HomeScreen() {
       }} />
       <ThemedText>Directory: {dataDirectoryUri} </ThemedText>
       <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
-        console.log('Add new journey');
+        console.log('New entry pressed');
+        navigation.navigate('NewEntry' as never);
       }} />
     </ThemedView>
   );

app/NewEntry.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { StyleSheet, ScrollView, View } from 'react-native';
+import { Button, Text, TextInput, useTheme, Appbar, IconButton } from 'react-native-paper';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { useRouter } from 'expo-router';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StatusBar } from 'expo-status-bar';
+import Wrapper from '@/components/ui/Wrapper';
+
+export default function NewEntryScreen() {
+    const navigation = useRouter();
+    return (
+        <Wrapper>
+            <Appbar.Header>
+                <Appbar.BackAction onPress={() => {
+                    navigation.back();
+                }} />
+                <Appbar.Content title="Title" />
+                <Appbar.Action icon="calendar" onPress={() => { }} />
+                <Appbar.Action icon="magnify" onPress={() => { }} />
+            </Appbar.Header>
+        </Wrapper>
+    );
+}

app/_layout.tsx

@@ -1,10 +1,10 @@
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
-import { PaperProvider } from 'react-native-paper';
+import { IconButton, PaperProvider } from 'react-native-paper';
 import * as NavigationBar from 'expo-navigation-bar';
 
 import { Platform, useColorScheme } from 'react-native';
@@ -14,22 +14,126 @@ import { IconSymbol } from '@/components/ui/IconSymbol';
 import { TouchableOpacity, View } from 'react-native';
 import NullComponent from '@/components/NullComponent';
 import { useEffect } from 'react';
+import NewEntryScreen from './NewEntry';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// Import your tab screens directly
+import HomeScreen from './HomeScreen';
+import CalendarScreen from './(tabs)/calendar';
+import MediaScreen from './(tabs)/media';
+import AtlasScreen from './(tabs)/atlas';
+import TodayScreen from './(tabs)/today';
+import { ThemedView } from '@/components/ThemedView';
+import { useNavigation } from 'expo-router';
+import { ThemedText } from '@/components/ThemedText';
+import Wrapper from '@/components/ui/Wrapper';
 
 const Drawer = createDrawerNavigator();
 const RootStack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
 
 function TabsNavigator() {
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+
   return (
-    <Stack>
+    <Wrapper>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <SafeAreaView
-      <Stack.Screen name="+not-found" />
+        edges={['top', 'left', 'right']}
-    </Stack>
+        style={{
+          flex: 1,
+        }}>
+        <View style={{
+          backgroundColor: theme.colors.onPrimary,
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          top: insets.top + 20,
+          left: 20,
+          right: 20,
+          borderRadius: 12,
+          zIndex: 1000,
+        }}>
+          <IconButton icon="menu" size={24} onPress={() => {
+            navigation.dispatch({ type: 'OPEN_DRAWER' });
+          }} />
+          <ThemedText
+            style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
+          >JOURNEY</ThemedText>
+          <IconButton icon="magnify" size={24} onPress={() => {
+            console.log('Search pressed');
+          }} />
+        </View><Tab.Navigator
+          screenOptions={{
+            tabBarActiveTintColor: theme.colors.primary,
+            headerShown: false,
+            tabBarStyle: Platform.select({
+              ios: {
+                position: 'absolute',
+              },
+              default: {},
+            }),
+          }}
+        >
+          <Tab.Screen
+            name="Journey"
+            component={HomeScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="book" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Calendar"
+            component={CalendarScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="calendar" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Media"
+            component={MediaScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="photo" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Atlas"
+            component={AtlasScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="map" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Today"
+            component={TodayScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="today" size={size} color={color} />
+              ),
+            }}
+          />
+        </Tab.Navigator>
+      </SafeAreaView>
+    </Wrapper>
   );
 }
 
 function DrawerNavigator() {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+
   return (
     <Drawer.Navigator>
       <Drawer.Screen
@@ -53,23 +157,23 @@ function DrawerNavigator() {
         <Drawer.Screen
           name="SettingsDrawerItem"
           component={NullComponent}
-          options={({ navigation }) => ({
+          options={{
             title: 'Settings',
             headerShown: false,
             drawerLabel: 'Settings',
             drawerIcon: ({ color }) => (
               <IconSymbol name="settings" size={24} color={color} />
             ),
-          })}
+          }}
           listeners={({ navigation }) => ({
             drawerItemPress: (e) => {
               e.preventDefault();
-              // Navigate to the Settings screen in the root stack
               navigation.getParent()?.navigate('Settings');
               navigation.dispatch({ type: 'CLOSE_DRAWER' });
             },
           })}
-        /></Drawer.Group>
+        />
+      </Drawer.Group>
     </Drawer.Navigator>
   );
 }
@@ -87,19 +191,18 @@ export default function RootLayout() {
     }
   }, [colorScheme]);
 
-
   if (!loaded) {
     return null;
   }
 
   return (
     <PaperProvider theme={theme}>
+
       <RootStack.Navigator>
         <RootStack.Screen
           name="Main"
           component={DrawerNavigator}
           options={{ headerShown: false }}
-
         />
         <RootStack.Screen
           name="Settings"
@@ -122,6 +225,13 @@ export default function RootLayout() {
             ),
           })}
         />
+        <RootStack.Screen
+          name="NewEntry"
+          component={NewEntryScreen}
+          options={{
+            headerShown: false,
+          }}
+        />
       </RootStack.Navigator>
       <StatusBar style={theme.dark ? 'light' : 'dark'} />
     </PaperProvider>

components/ui/Wrapper.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+import { ThemedView } from "../ThemedView";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "react-native-paper";
+
+export default function Wrapper({ children }: { children: React.ReactNode }) {
+    const insets = useSafeAreaInsets();
+    const theme = useTheme();
+    return (
+        <ThemedView style={{ flex: 1 }}>
+            <View style={{
+                backgroundColor: theme.colors.primary,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                height: insets.top,
+                zIndex: 1000,
+            }} />
+
+            {children}
+        </ThemedView>
+    );
+}