Add bar on top of pages

app/(tabs)/_layout.tsx

@@ -8,11 +8,15 @@ import TabBarBackground from '@/components/ui/TabBarBackground';
 import { lightTheme, darkTheme } from '@/constants/Colors';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ThemedView } from '@/components/ThemedView';
+import { IconButton } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { ThemedText } from '@/components/ThemedText';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
   const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1 }}>
@@ -37,25 +41,48 @@ export default function TabLayout() {
           right: 0,
           height: insets.bottom,
           backgroundColor: theme.colors.primary, // Or any custom color
-          zIndex: 1000,
+          zIndex: 1,
         }}
       />
 
       <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
         <ThemedView style={{ flex: 1 }}>
+          <View style={{
+            backgroundColor: theme.colors.onPrimary,
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            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>
           <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: {},
+                default: {
+                },
               }),
             }}>
             <Tabs.Screen

app/(tabs)/index.tsx

@@ -5,7 +5,7 @@ import { HelloWave } from '@/components/HelloWave';
 import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
-import { List, Text, useTheme } from 'react-native-paper';
+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';
@@ -30,17 +30,15 @@ export default function HomeScreen() {
 
   const theme = useTheme();
 
-  return (
-    <ThemedView style={{ flex: 1, padding: 16 }}>
-      <ThemedText type="title">
-        My Journey
-      </ThemedText>
-      <ThemedText>{theme.colors.primary}</ThemedText>
-    </ThemedView>
-  );
-}
 
   const styles = StyleSheet.create({
+    fab: {
+      position: 'absolute',
+      margin: 16,
+      right: 0,
+      bottom: 0,
+      backgroundColor: theme.colors.primary, // Use your theme's primary color
+    },
     stepContainer: {
       gap: 8,
       marginBottom: 8,
@@ -53,3 +51,24 @@ const styles = StyleSheet.create({
       position: 'absolute',
     },
   });
+
+
+  return (
+    <ThemedView style={{ flex: 1, padding: 16 }}>
+      <View style={{
+        backgroundColor: theme.colors.primary,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 100,
+        zIndex: 1000,
+      }} />
+      <ThemedText>Directory: {dataDirectoryUri} </ThemedText>
+      <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
+        console.log('Add new journey');
+      }} />
+    </ThemedView>
+  );
+}
+