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

Fix color schemes!

Browse Source
This commit is contained in:
ryan
2025-06-21 14:53:56 -07:00
parent 8c1021e1c9
commit cbd50a811a
13 changed files with 280 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/_layout.tsx
+84 -50
View File
@@ -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
+29 -18
View File
@@ -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,