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:52:16 -07:00
parent 8c1021e1c9
commit cbd50a811a
13 changed files with 280 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
android/app/src/main/res/values/styles.xml
View File

@ -2,7 +2,7 @@
<style name="AppTheme" parent="Theme.EdgeToEdge">
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="android:statusBarColor">#ffffff</item>
<item name="enforceNavigationBarContrast">false</item>
</style>
<style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/splashscreen_background</item>

13
app.config.js
View File

@ -20,7 +20,10 @@ module.exports = {
foregroundImage: "./assets/images/adaptive-icon.png",
backgroundColor: "#ffffff"
},
edgeToEdgeEnabled: true
edgeToEdgeEnabled: true,
"navigationBar": {
backgroundColor: "transparent",
}
},
web: {
bundler: "metro",
@ -29,6 +32,14 @@ module.exports = {
},
plugins: [
"expo-router",
[
"react-native-edge-to-edge",
{
"android": {
"enforceNavigationBarContrast": false
}
}
],
[
"expo-splash-screen",
{

134
app/(tabs)/_layout.tsx
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>
);
}

47
app/(tabs)/index.tsx
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,

2
app/SettingsScreen.tsx
View File

@ -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;

49
app/_layout.tsx
View File

@ -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>
);
}

24
components/ThemedText.tsx
View File

@ -1,6 +1,5 @@
import { StyleSheet, Text, type TextProps } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
import { useTheme } from 'react-native-paper';
export type ThemedTextProps = TextProps & {
lightColor?: string;
@ -15,17 +14,24 @@ export function ThemedText({
type = 'default',
...rest
}: ThemedTextProps) {
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
const theme = useTheme();
// Only use override colors if provided
let color = theme.colors.onSurface; // default
if (lightColor || darkColor) {
color = theme.dark ? (darkColor || lightColor || color) : (lightColor || darkColor || color);
}
// Special case for link type
if (type === 'link') {
color = lightColor || darkColor || theme.colors.primary;
}
return (
<Text
style={[
{ color },
type === 'default' ? styles.default : undefined,
type === 'title' ? styles.title : undefined,
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
type === 'subtitle' ? styles.subtitle : undefined,
type === 'link' ? styles.link : undefined,
styles[type],
style,
]}
{...rest}
@ -46,7 +52,7 @@ const styles = StyleSheet.create({
title: {
fontSize: 32,
fontWeight: 'bold',
lineHeight: 32,
lineHeight: 40,
},
subtitle: {
fontSize: 20,

5
components/ThemedView.tsx
View File

@ -1,6 +1,6 @@
import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor';
import { useTheme } from 'react-native-paper';
export type ThemedViewProps = ViewProps & {
lightColor?: string;
@ -8,7 +8,8 @@ export type ThemedViewProps = ViewProps & {
};
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
const theme = useTheme();
const backgroundColor = theme.colors.background;
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}

92
constants/Colors.ts
View File

@ -1,26 +1,74 @@
/**
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';
// Your brand colors
const brandColors = {
primary: '#35C4E5',
primaryVariant: '#0051D5',
secondary: '#34C759',
secondaryVariant: '#248A3D',
background: '#F2F2F7',
surface: '#FFFFFF',
error: '#FF3B30',
onPrimary: '#FFFFFF',
onSecondary: '#FFFFFF',
onBackground: '#000000',
onSurface: '#000000',
onError: '#FFFFFF',
};
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
tabIconSelected: tintColorDark,
export const lightTheme = {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
...brandColors,
// Additional custom colors
accent: '#5856D6',
warning: '#FF9500',
success: '#34C759',
info: '#007AFF',
textSecondary: '#666666',
border: '#E5E5EA',
disabled: '#C7C7CC',
},
};
export const darkTheme = {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#0A84FF',
primaryVariant: '#0051D5',
secondary: '#30D158',
secondaryVariant: '#248A3D',
background: '#000000',
surface: '#1C1C1E',
error: '#FF453A',
onPrimary: '#FFFFFF',
onSecondary: '#000000',
onBackground: '#FFFFFF',
onSurface: '#FFFFFF',
onError: '#000000',
// Additional custom colors
accent: '#5E5CE6',
warning: '#FF9F0A',
success: '#30D158',
info: '#0A84FF',
textSecondary: '#AEAEB2',
border: '#38383A',
disabled: '#48484A',
},
};
declare global {
namespace ReactNativePaper {
interface ThemeColors {
accent: string;
warning: string;
success: string;
info: string;
textSecondary: string;
border: string;
disabled: string;
}
}
}

1
constants/Settings.ts
View File

@ -0,0 +1 @@
export const DATA_DIRECTORY_URI_KEY = 'dataDirectoryUri';

22
hooks/useThemeColor.ts
View File

@ -1,21 +1,19 @@
/**
* Learn more about light and dark modes:
* https://docs.expo.dev/guides/color-schemes/
*/
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useTheme } from 'react-native-paper';
import { lightTheme, darkTheme } from '@/constants/Colors';
export function useThemeColor(
props: { light?: string; dark?: string },
colorName: keyof typeof Colors.light & keyof typeof Colors.dark
colorName?: keyof typeof lightTheme & keyof typeof darkTheme
) {
const theme = useColorScheme() ?? 'light';
const colorFromProps = props[theme];
const theme = useTheme();
const colorScheme = theme.dark ? 'dark' : 'light';
const colorFromProps = props[colorScheme];
if (colorFromProps) {
return colorFromProps;
} else if (colorName) {
return theme[colorName];
} else {
return Colors[theme][colorName];
return theme.colors.onSurface; // fallback
}
}
}

25
package-lock.json generated
View File

@ -27,6 +27,7 @@
"expo-haptics": "~14.1.4",
"expo-image": "~2.3.0",
"expo-linking": "~7.1.5",
"expo-navigation-bar": "~4.2.6",
"expo-router": "~5.1.0",
"expo-splash-screen": "~0.30.9",
"expo-status-bar": "~2.2.3",
@ -36,6 +37,7 @@
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.3",
"react-native-edge-to-edge": "1.6.0",
"react-native-gesture-handler": "~2.24.0",
"react-native-paper": "^5.14.5",
"react-native-reanimated": "~3.17.4",
@ -9141,6 +9143,29 @@
"invariant": "^2.2.4"
}
},
"node_modules/expo-navigation-bar": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-4.2.6.tgz",
"integrity": "sha512-6phN9WXAAoEBWNhSLEnKuY+upQ9gV5CSCm8W66GOA47moglU5Ab3UDZ89hYZcfuIfsZR88/jx2KaF4VFCWGijg==",
"license": "MIT",
"dependencies": {
"@react-native/normalize-colors": "0.79.4",
"debug": "^4.3.2",
"react-native-edge-to-edge": "1.6.0",
"react-native-is-edge-to-edge": "^1.1.6"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo-navigation-bar/node_modules/@react-native/normalize-colors": {
"version": "0.79.4",
"resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.79.4.tgz",
"integrity": "sha512-247/8pHghbYY2wKjJpUsY6ZNbWcdUa5j5517LZMn6pXrbSSgWuj3JA4OYibNnocCHBaVrt+3R8XC3VEJqLlHFg==",
"license": "MIT"
},
"node_modules/expo-router": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/expo-router/-/expo-router-5.1.0.tgz",

4
package.json
View File

@ -46,7 +46,9 @@
"react-native-web": "~0.20.0",
"react-native-webview": "13.13.5",
"expo-file-system": "~18.1.10",
"@react-native-async-storage/async-storage": "2.1.2"
"@react-native-async-storage/async-storage": "2.1.2",
"expo-navigation-bar": "~4.2.6",
"react-native-edge-to-edge": "1.6.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",