ryan/myjourney
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout changes, beginning of new entry page

Browse Source
This commit is contained in:
ryan
2025-06-21 17:11:36 -07:00
parent 25a7b4da7b
commit 6a117db0ae
7 changed files with 253 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/_layout.tsx
+75 -102
View File
@@ -19,110 +19,83 @@ export default function TabLayout() {
const navigation = useNavigation();
return (
<View style={{ flex: 1 }}>
<View
// Top status bar background
style={{
<SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
<ThemedView style={{ flex: 1 }}>
<View style={{
backgroundColor: theme.colors.onPrimary,
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: insets.top,
backgroundColor: theme.colors.primary, // Or any custom color
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
top: 20,
left: 20,
right: 20,
borderRadius: 12,
zIndex: 1000,
}}
/>
<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: 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,
tabBarStyle: Platform.select({
ios: {
// Use a transparent background on iOS to show the blur effect
position: 'absolute',
},
default: {
},
}),
}}>
<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,
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>
<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>
);
}
app/(tabs)/index.tsx
-74
View File
@@ -1,74 +0,0 @@
import { Image } from 'expo-image';
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 { 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';
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();
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,
},
headerImage: {
width: 200,
height: 200,
bottom: 0,
left: 20,
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>
);
}