@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/components/OxyProvider.tsx

@@ -1,48 +1,41 @@
-import { useCallback, useRef, useState, useEffect, useMemo, forwardRef, useImperativeHandle, type FC } from 'react';
-import { View, Text, StyleSheet, Platform, Animated, StatusBar, Keyboard, KeyboardEvent, AppState } from 'react-native';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useEffect, useRef, type FC } from 'react';
+import { AppState } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import type { OxyProviderProps, BottomSheetController } from '../navigation/types';
-import { OxyContextProvider, useOxy } from '../context/OxyContext';
-import OxyRouter from '../navigation/OxyRouter';
-import { FontLoader, setupFonts } from './FontLoader';
-import { Toaster } from '../../lib/sonner';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import type { OxyProviderProps } from '../types/navigation';
+import { OxyContextProvider } from '../context/OxyContext';
 import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
-
-// Import bottom sheet components directly - no longer a peer dependency
-import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import type { BottomSheetModalMethods as BottomSheetModalRef } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { useWindowDimensions } from 'react-native';
+import { setupFonts } from './FontLoader';
+import BottomSheetRouter from './BottomSheetRouter';
+import { Toaster } from '../../lib/sonner';
 
 // Initialize fonts automatically
 setupFonts();
 
 /**
- * Enhanced OxyProvider component
- * 
- * This component serves two purposes:
- * 1. As a context provider for authentication and session management across the app
- * 2. As a UI component for authentication and account management using a bottom sheet
+ * OxyProvider component
+ *
+ * Provides the authentication/session context used across the app.
+ * UI composition (e.g. OxyRouter inside a bottom sheet) can be added externally.
  */
-const OxyProvider: FC<OxyProviderProps> = (props) => {
-    const {
-        oxyServices,
-        children,
-        contextOnly = false,
-        onAuthStateChange,
-        storageKeyPrefix,
-        showInternalToaster = true,
-        baseURL, // Add support for baseURL
-        ...bottomSheetProps
-    } = props;
-
-    // Create typed internal bottom sheet controller ref
-    const internalBottomSheetRef = useRef<BottomSheetController>(null);
+const OxyProvider: FC<OxyProviderProps> = ({
+    oxyServices,
+    children,
+    contextOnly = false,
+    onAuthStateChange,
+    storageKeyPrefix,
+    baseURL,
+    queryClient,
+}) => {
+    // contextOnly is retained for backwards compatibility while the UI-only
+    // bottom sheet experience is removed. At the moment both modes behave the same.
+    void contextOnly;
 
     // Initialize React Query Client (use provided client or create a default one once)
     const queryClientRef = useRef<QueryClient | null>(null);
     if (!queryClientRef.current) {
-        queryClientRef.current = props.queryClient ?? new QueryClient({
+        const defaultClient = new QueryClient({
             defaultOptions: {
                 queries: {
                     staleTime: 30_000,
@@ -56,6 +49,7 @@ const OxyProvider: FC<OxyProviderProps> = (props) => {
                 },
             },
         });
+        queryClientRef.current = queryClient ?? defaultClient;
     }
 
     // Hook React Query focus manager into React Native AppState
@@ -68,358 +62,32 @@ const OxyProvider: FC<OxyProviderProps> = (props) => {
         };
     }, []);
 
-    // Mirror internal controller to external ref if provided (back-compat)
-    useEffect(() => {
-        if (props.bottomSheetRef) {
-            props.bottomSheetRef.current = internalBottomSheetRef.current;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.bottomSheetRef]);
-
-    // If contextOnly is true, we just provide the context without the bottom sheet UI
-    if (contextOnly) {
-        return (
-            <QueryClientProvider client={queryClientRef.current}>
-                <OxyContextProvider
-                    oxyServices={oxyServices}
-                    baseURL={baseURL}
-                    storageKeyPrefix={storageKeyPrefix}
-                    onAuthStateChange={onAuthStateChange}
-                >
-                    {children}
-                </OxyContextProvider>
-            </QueryClientProvider>
-        );
+    // Ensure we have a valid QueryClient
+    const client = queryClientRef.current;
+    if (!client) {
+        throw new Error('QueryClient initialization failed');
     }
 
-    // Otherwise, provide both the context and the bottom sheet UI
     return (
-        <QueryClientProvider client={queryClientRef.current}>
-            <OxyContextProvider
-                oxyServices={oxyServices}
-                baseURL={baseURL}
-                storageKeyPrefix={storageKeyPrefix}
-                onAuthStateChange={onAuthStateChange}
-                bottomSheetRef={internalBottomSheetRef}
-            >
-                <FontLoader>
-                    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-                        <BottomSheetModalProvider>
-                            <StatusBar translucent backgroundColor="transparent" />
-                            <SafeAreaProvider>
-                                <OxyBottomSheet {...bottomSheetProps} ref={internalBottomSheetRef} oxyServices={oxyServices} />
-                                {children}
-                            </SafeAreaProvider>
-                        </BottomSheetModalProvider>
-                        {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
-                        {!showInternalToaster && (
-                            <View style={styles.toasterContainer}>
-                                <Toaster position="bottom-center" swipeToDismissDirection="left" offset={15} />
-                            </View>
-                        )}
-                    </GestureHandlerRootView>
-                </FontLoader>
-            </OxyContextProvider>
-        </QueryClientProvider>
+        <SafeAreaProvider>
+            <GestureHandlerRootView style={{ flex: 1 }}>
+                <KeyboardProvider>
+                    <QueryClientProvider client={client}>
+                        <OxyContextProvider
+                            oxyServices={oxyServices as any}
+                            baseURL={baseURL}
+                            storageKeyPrefix={storageKeyPrefix}
+                            onAuthStateChange={onAuthStateChange as any}
+                        >
+                            {children}
+                            <BottomSheetRouter />
+                            <Toaster />
+                        </OxyContextProvider>
+                    </QueryClientProvider>
+                </KeyboardProvider>
+            </GestureHandlerRootView>
+        </SafeAreaProvider>
     );
 };
 
-/**
- * OxyBottomSheet component - A bottom sheet-based authentication and account management UI
- * 
- * This is the original OxyProvider UI functionality, now extracted into its own component
- * and reimplemented using BottomSheetModal for better Android compatibility
- */
-type OxyBottomSheetProps = Omit<OxyProviderProps, 'children' | 'contextOnly' | 'queryClient' | 'bottomSheetRef'>;
-
-const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
-    oxyServices: providedOxyServices,
-    initialScreen = 'SignIn',
-    onClose,
-    onAuthenticated,
-    theme = 'light',
-    customStyles = {},
-    autoPresent = false,
-    showInternalToaster = true,
-    appInsets,
-}, ref) => {
-    // Helper function to determine if native driver should be used
-    const shouldUseNativeDriver = () => {
-        return Platform.OS === 'ios';
-    };
-    // Get window dimensions for max height calculation
-    const { height: windowHeight } = useWindowDimensions();
-    // Get oxyServices from context if not provided as prop
-    const contextOxy = useOxy();
-    const oxyServices = providedOxyServices || contextOxy?.oxyServices;
-    // Use the internal ref (which is passed as a prop from OxyProvider)
-    const modalRef = useRef<BottomSheetModalRef>(null);
-    const isOpenRef = useRef(false);
-    const navigationRef = useRef<((screen: any, props?: Record<string, unknown>) => void) | null>(null);
-
-    // Remove contentHeight, containerWidth, and snap point state/logic
-    // Animation values - keep for content fade/slide
-    const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
-    const slideAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 0 : 50)).current;
-    // Expose a clean, typed imperative API
-    useImperativeHandle(ref, () => ({
-        present: () => {
-            if (!isOpenRef.current) modalRef.current?.present?.();
-        },
-        dismiss: () => modalRef.current?.dismiss?.(),
-        expand: () => {
-            // Ensure presented, then animate content in
-            if (!isOpenRef.current) modalRef.current?.present?.();
-            Animated.parallel([
-                Animated.timing(fadeAnim, {
-                    toValue: 1,
-                    duration: 300,
-                    useNativeDriver: shouldUseNativeDriver(),
-                }),
-                Animated.spring(slideAnim, {
-                    toValue: 0,
-                    friction: 8,
-                    tension: 40,
-                    useNativeDriver: shouldUseNativeDriver(),
-                }),
-            ]).start();
-        },
-        collapse: () => modalRef.current?.collapse?.(),
-        snapToIndex: (index: number) => modalRef.current?.snapToIndex?.(index),
-        snapToPosition: (position: number | string) => modalRef.current?.snapToPosition?.(position as any),
-        navigate: (screen: any, props?: Record<string, any>) => {
-            if (navigationRef.current) {
-                navigationRef.current(screen, props);
-                return;
-            }
-            if (typeof document !== 'undefined') {
-                const event = new CustomEvent('oxy:navigate', { detail: { screen, props } });
-                document.dispatchEvent(event);
-            } else {
-                (globalThis as any).oxyNavigateEvent = { screen, props };
-            }
-        }
-    }), [fadeAnim, slideAnim]);
-    const insets = useSafeAreaInsets();
-
-    // Calculate max height for dynamic sizing (screen height minus insets and margin)
-    // Note: With keyboardBehavior="extend", the library automatically handles keyboard positioning
-    // so we set maxHeight to available space without keyboard - the library will extend above keyboard
-    const maxHeight = useMemo(() => {
-        const topInset = (insets?.top ?? 0) + (appInsets?.top ?? 0);
-        const bottomInset = (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0);
-        return windowHeight - topInset - bottomInset - 20; // 20px margin
-    }, [windowHeight, insets?.top, insets?.bottom, appInsets?.top, appInsets?.bottom]);
-    // Present the modal when component mounts, but only if autoPresent is true
-    useEffect(() => {
-        if (autoPresent && modalRef.current) {
-            const timer = setTimeout(() => {
-                modalRef.current?.present();
-                Animated.parallel([
-                    Animated.timing(fadeAnim, {
-                        toValue: 1,
-                        duration: 300,
-                        useNativeDriver: shouldUseNativeDriver(),
-                    }),
-                    Animated.spring(slideAnim, {
-                        toValue: 0,
-                        friction: 8,
-                        tension: 40,
-                        useNativeDriver: shouldUseNativeDriver(),
-                    }),
-                ]).start();
-            }, 100);
-            return () => clearTimeout(timer);
-        }
-    }, [modalRef, autoPresent]);
-    // Close the bottom sheet with animation (unchanged)
-    const handleClose = useCallback(() => {
-        Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: Platform.OS === 'android' ? 100 : 200,
-            useNativeDriver: shouldUseNativeDriver(),
-        }).start(() => {
-            modalRef.current?.dismiss();
-            if (onClose) {
-                setTimeout(() => {
-                    onClose();
-                }, Platform.OS === 'android' ? 150 : 100);
-            }
-        });
-    }, [onClose]);
-    // Handle authentication success (unchanged)
-    const handleAuthenticated = useCallback((user: any) => {
-        fadeAnim.stopAnimation();
-        slideAnim.stopAnimation();
-        if (onAuthenticated) {
-            onAuthenticated(user);
-        }
-        modalRef.current?.dismiss();
-        if (onClose) {
-            setTimeout(() => {
-                onClose();
-            }, 100);
-        }
-    }, [onAuthenticated, onClose]);
-    // Backdrop rendering (unchanged)
-    const renderBackdrop = useCallback(
-        (props: BottomSheetBackdropProps) => (
-            <BottomSheetBackdrop
-                {...props}
-                disappearsOnIndex={-1}
-                appearsOnIndex={0}
-                opacity={0.5}
-            />
-        ),
-        []
-    );
-
-    // Modernized BottomSheetModal usage
-    return (
-        <BottomSheetModal
-            ref={modalRef}
-            index={0}
-            enableDynamicSizing={true}
-            maxDynamicContentSize={maxHeight}
-            enablePanDownToClose
-            backdropComponent={renderBackdrop}
-            backgroundStyle={[
-                {
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    borderTopLeftRadius: 35,
-                    borderTopRightRadius: 35,
-                }
-            ]}
-            handleIndicatorStyle={{
-                backgroundColor: customStyles.handleColor || (theme === 'light' ? '#CCCCCC' : '#444444'),
-                width: 40,
-                height: 4,
-            }}
-            handleStyle={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-            }}
-            style={styles.bottomSheetContainer}
-            keyboardBehavior="interactive"
-            keyboardBlurBehavior="restore"
-            android_keyboardInputMode="adjustResize"
-            enableOverDrag={false}
-            enableContentPanningGesture={true}
-            enableHandlePanningGesture={true}
-            overDragResistanceFactor={2.5}
-            enableBlurKeyboardOnGesture={true}
-            detached
-            topInset={(insets?.top ?? 0) + (appInsets?.top ?? 0)}
-            bottomInset={(insets?.bottom ?? 0) + (appInsets?.bottom ?? 0)}
-            onChange={(index) => { isOpenRef.current = index !== -1; }}
-            onDismiss={() => { isOpenRef.current = false; }}
-        >
-            <BottomSheetScrollView
-                style={[styles.contentContainer]}
-                contentContainerStyle={styles.scrollContentContainer}
-                showsVerticalScrollIndicator={true}
-                bounces={false}
-                nestedScrollEnabled={true}
-            >
-                <Animated.View
-                    style={[
-                        styles.animatedContent,
-                        Platform.OS === 'android'
-                            ? { opacity: 1 }
-                            : { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
-                    ]}
-                >
-                    <View
-                        style={[
-                            styles.centeredContentWrapper,
-                            { paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }
-                        ]}
-                    >
-                        {oxyServices ? (
-                            <OxyRouter
-                                oxyServices={oxyServices}
-                                initialScreen={initialScreen}
-                                onClose={handleClose}
-                                onAuthenticated={handleAuthenticated}
-                                theme={theme}
-                                navigationRef={navigationRef}
-                                containerWidth={800} // static, since dynamic sizing is used
-                            />
-                        ) : (
-                            <View style={styles.errorContainer}>
-                                <Text>OxyServices not available</Text>
-                            </View>
-                        )}
-                    </View>
-                </Animated.View>
-            </BottomSheetScrollView>
-            {showInternalToaster && (
-                <View style={styles.toasterContainer}>
-                    <Toaster position="bottom-center" swipeToDismissDirection="left" />
-                </View>
-            )}
-        </BottomSheetModal>
-    );
-});
-
-const styles = StyleSheet.create({
-    bottomSheetContainer: {
-        maxWidth: 800,
-        width: '100%',
-        alignSelf: 'center',
-        marginHorizontal: 'auto',
-    },
-    contentContainer: {
-        width: '100%',
-        borderTopLeftRadius: 35,
-        borderTopRightRadius: 35,
-    },
-    scrollContentContainer: {
-        // Content will size naturally, ScrollView handles overflow
-    },
-    centeredContentWrapper: {
-        width: '100%',
-        alignSelf: 'center',
-    },
-    animatedContent: {
-        width: '100%',
-    },
-    indicator: {
-        width: 40,
-        height: 4,
-        marginTop: 8,
-        marginBottom: 8,
-        borderRadius: 35,
-    },
-    errorContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    gestureHandlerRoot: {
-        flex: 1,
-        position: 'relative',
-        backgroundColor: 'transparent',
-        ...Platform.select({
-            android: {
-                height: '100%',
-                width: '100%',
-            }
-        })
-    },
-    toasterContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 9999,
-        elevation: 9999, // For Android
-        pointerEvents: 'box-none', // Allow touches to pass through to underlying components
-    },
-});
-
 export default OxyProvider;

package/src/ui/components/OxySignInButton.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
-import { fontFamilies } from '../styles/fonts';
 
 export interface OxySignInButtonProps {
     /**
@@ -44,19 +43,13 @@ export interface OxySignInButtonProps {
      * @default false
      */
     showWhenAuthenticated?: boolean;
-
-    /**
-     * Which screen to open in the bottom sheet
-     * @default 'SignIn'
-     */
-    screen?: string;
 }
 
 /**
- * A pre-styled button component for signing in with Oxy services
+ * A pre-styled button component for signing in with Oxy identity
  * 
- * This component automatically integrates with the OxyProvider context
- * and will control the authentication bottom sheet when pressed.
+ * This component opens the Oxy Auth flow which allows users to authenticate
+ * using their Oxy Accounts identity (via QR code or deep link).
  * 
  * @example
  * ```tsx
@@ -85,7 +78,6 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     text = 'Sign in with Oxy',
     disabled = false,
     showWhenAuthenticated = false,
-    screen = 'SignIn',
 }) => {
     // Get all needed values from context in a single call
     const { isAuthenticated, showBottomSheet } = useOxy();
@@ -100,11 +92,15 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             return;
         }
 
-        // Allow passing any screen name, including 'SignUp', 'AccountCenter', etc.
+        // Use the new bottom sheet system to show the OxyAuth screen
         if (showBottomSheet) {
-            showBottomSheet(screen);
+            showBottomSheet('OxyAuth');
         } else {
-            console.warn('OxySignInButton: showBottomSheet is not available. Either provide an onPress prop or ensure this component is used within an OxyProvider.');
+            if (__DEV__) {
+                console.warn(
+                    `OxySignInButton: showBottomSheet is not available. Make sure OxyProvider is set up correctly.`
+                );
+            }
         }
     };
 
@@ -132,9 +128,6 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
         }
     };
 
-    // This function was previously used for logo container styling
-    // Now removed as we're not using the container anymore
-
     return (
         <TouchableOpacity
             style={[styles.button, getButtonStyle(), disabled && styles.buttonDisabled]}
@@ -199,7 +192,7 @@ const styles = StyleSheet.create({
     },
     text: {
         fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-SemiBold',
-        fontWeight: Platform.OS === 'web' ? '600' : undefined, // Only apply fontWeight on web
+        fontWeight: Platform.OS === 'web' ? '600' : undefined,
         fontSize: 16,
         marginLeft: 10,
     },

package/src/ui/components/ProfileCard.tsx

@@ -6,6 +6,8 @@ import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
 import { fontFamilies } from '../styles/fonts';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
 
 interface ProfileCardProps {
     user: {
@@ -27,11 +29,12 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
     onClosePress,
     showCloseButton = false,
 }) => {
-    const isDarkTheme = theme === 'dark';
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme, colorScheme);
     const { oxyServices } = useOxy();
     const { t } = useI18n();
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+    const textColor = themeStyles.textColor;
+    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
     const primaryColor = '#0066CC';
 
     const avatarUrl = useFileDownloadUrl(user?.avatar, { variant: 'thumb' }).url || undefined;
@@ -54,7 +57,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                     <View style={styles.userInfo}>
                         <Text style={[styles.userName, { color: textColor }]}>{user.username}</Text>
                         {user.email && (
-                            <Text style={[styles.userEmail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Text style={[styles.userEmail, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                                 {user.email}
                             </Text>
                         )}

package/src/ui/components/QuickActions.tsx

@@ -1,6 +1,8 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
 
 interface QuickAction {
     id: string;
@@ -16,9 +18,10 @@ interface QuickActionsProps {
 }
 
 const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme, colorScheme);
+    const textColor = themeStyles.textColor;
+    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
 
     return (
         <View style={[
@@ -33,7 +36,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
                         <TouchableOpacity
                             style={[
                                 styles.quickActionCircle,
-                                { backgroundColor: isDarkTheme ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                                { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
                             ]}
                             onPress={action.onPress}
                         >

package/src/ui/components/Section.tsx

@@ -1,10 +1,12 @@
 import type React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import SectionTitle from './SectionTitle';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeColorScheme } from '../utils/themeUtils';
 
 interface SectionProps {
     title?: string;
-    theme: 'light' | 'dark';
+    theme?: 'light' | 'dark';
     children: React.ReactNode;
     isFirst?: boolean;
     style?: StyleProp<ViewStyle>;
@@ -17,9 +19,11 @@ const Section: React.FC<SectionProps> = ({
     isFirst = false,
     style
 }) => {
+    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
+    
     return (
         <View style={[styles.section, isFirst && styles.firstSection, style]}>
-            {title && <SectionTitle title={title} theme={theme} />}
+            {title && <SectionTitle title={title} theme={colorScheme} />}
             {children}
         </View>
     );

package/src/ui/components/SectionTitle.tsx

@@ -1,19 +1,22 @@
 import type React from 'react';
 import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeColorScheme } from '../utils/themeUtils';
+import { useThemeStyles } from '../hooks/useThemeStyles';
 
 interface SectionTitleProps {
     title: string;
-    theme: 'light' | 'dark';
+    theme?: 'light' | 'dark';
     style?: StyleProp<TextStyle>;
 }
 
 const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
+    const themeStyles = useThemeStyles(theme || colorScheme, colorScheme);
 
     return (
-        <Text style={[styles.sectionTitle, { color: textColor }, style]}>
+        <Text style={[styles.sectionTitle, { color: themeStyles.textColor }, style]}>
             {title}
         </Text>
     );