@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -12,14 +12,17 @@ import {
     Animated,
     Dimensions,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { useOxy } from '../context/OxyContext';
 
 interface SubscriptionPlan {
     id: string;
@@ -68,6 +71,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     navigate,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
     const [loading, setLoading] = useState(true);
     const [subscription, setSubscription] = useState<UserSubscription | null>(null);
@@ -79,17 +83,16 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const [activeTab, setActiveTab] = useState<'plans' | 'features'>('plans');
     const [currentAppPackage, setCurrentAppPackage] = useState<string>('mention'); // Default to mention for demo
 
-    const isDarkTheme = theme === 'dark';
     const { t } = useI18n();
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#007AFF';
-    const successColor = '#30D158';
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // Extract commonly used colors for readability
+    const { textColor, backgroundColor, secondaryBackgroundColor, borderColor, primaryColor, successColor, dangerColor, isDarkTheme } = themeStyles;
     const warningColor = '#FF9500';
-    const dangerColor = '#FF3B30';
 
+    // TODO: Replace mock data with actual API integration
+    // Should fetch plans from oxyServices.getSubscriptionPlans() and individual features from oxyServices.getIndividualFeatures()
     // Oxy+ subscription plans
     const mockPlans: SubscriptionPlan[] = [
         {

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -1,19 +1,20 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
     View,
     Text,
     StyleSheet,
     ScrollView,
-    Switch,
     ActivityIndicator,
     TouchableOpacity,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, Avatar } from '../components';
+import { Header, Section, Avatar, SettingRow, LoadingState, EmptyState, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
 import type { BlockedUser, RestrictedUser } from '../../models/interfaces';
+import { useOxy } from '../context/OxyContext';
 
 interface PrivacySettings {
     isPrivateAccount: boolean;
@@ -43,6 +44,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     theme,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
     const [settings, setSettings] = useState<PrivacySettings>({
@@ -197,105 +199,84 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         return { userId, username, avatar };
     }, []);
 
-    // Reusable user list item component
-    const UserListItem: React.FC<{
-        item: BlockedUser | RestrictedUser;
-        idField: 'blockedId' | 'restrictedId';
-        onAction: (userId: string) => void;
-        actionLabel: string;
-        actionColor: string;
-        subtitle?: string;
-    }> = ({ item, idField, onAction, actionLabel, actionColor, subtitle }) => {
-        const { userId, username, avatar } = extractUserInfo(item, idField);
-        // Convert avatar file ID to URI if needed
-        const avatarUri = avatar && oxyServices 
-            ? oxyServices.getFileDownloadUrl(avatar, 'thumb') 
-            : undefined;
-        
-        return (
-            <View style={[styles.userRow, { borderBottomColor: themeStyles.borderColor }]}>
-                <View style={styles.userInfo}>
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme);
+
+    // Convert blocked users to GroupedSection items
+    const blockedUserItems = useMemo(() => {
+        return blockedUsers.map((blocked) => {
+            const { userId, username, avatar } = extractUserInfo(blocked, 'blockedId');
+            const avatarUri = avatar && oxyServices 
+                ? oxyServices.getFileDownloadUrl(avatar, 'thumb') 
+                : undefined;
+            
+            return {
+                id: userId,
+                title: username,
+                customIcon: (
                     <Avatar
                         uri={avatarUri}
                         name={username}
                         size={40}
-                        theme={theme}
                     />
-                    <View style={styles.userDetails}>
-                        <Text style={[styles.username, { color: themeStyles.textColor }]}>
-                            {username}
+                ),
+                customContent: (
+                    <TouchableOpacity
+                        onPress={() => handleUnblock(userId)}
+                        style={[styles.actionButton, { backgroundColor: themeStyles.secondaryBackgroundColor }]}
+                    >
+                        <Text style={[styles.actionButtonText, { color: themeStyles.dangerColor }]}>
+                            {t('privacySettings.unblock') || 'Unblock'}
                         </Text>
-                        {subtitle && (
-                            <Text style={[styles.userSubtext, { color: themeStyles.mutedTextColor }]}>
-                                {subtitle}
-                            </Text>
-                        )}
-                    </View>
-                </View>
-                <TouchableOpacity
-                    onPress={() => onAction(userId)}
-                    style={[styles.actionButton, { backgroundColor: themeStyles.secondaryBackgroundColor }]}
-                >
-                    <Text style={[styles.actionButtonText, { color: actionColor }]}>
-                        {actionLabel}
-                    </Text>
-                </TouchableOpacity>
-            </View>
-        );
-    };
+                    </TouchableOpacity>
+                ),
+            };
+        });
+    }, [blockedUsers, oxyServices, themeStyles, handleUnblock, t]);
 
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-            mutedTextColor: isDarkTheme ? '#8E8E93' : '#8E8E93',
-        };
-    }, [theme]);
-
-    const SettingRow: React.FC<{
-        title: string;
-        description?: string;
-        value: boolean;
-        onValueChange: (value: boolean) => void;
-        disabled?: boolean;
-    }> = ({ title, description, value, onValueChange, disabled }) => (
-        <View style={[styles.settingRow, { borderBottomColor: themeStyles.borderColor }]}>
-            <View style={styles.settingInfo}>
-                <Text style={[styles.settingTitle, { color: themeStyles.textColor }]}>
-                    {title}
-                </Text>
-                {description && (
-                    <Text style={[styles.settingDescription, { color: themeStyles.mutedTextColor }]}>
-                        {description}
-                    </Text>
-                )}
-            </View>
-            <Switch
-                value={value}
-                onValueChange={onValueChange}
-                disabled={disabled || isSaving}
-                trackColor={{ false: '#767577', true: '#d169e5' }}
-                thumbColor={value ? '#fff' : '#f4f3f4'}
-            />
-        </View>
-    );
+    // Convert restricted users to GroupedSection items
+    const restrictedUserItems = useMemo(() => {
+        return restrictedUsers.map((restricted) => {
+            const { userId, username, avatar } = extractUserInfo(restricted, 'restrictedId');
+            const avatarUri = avatar && oxyServices 
+                ? oxyServices.getFileDownloadUrl(avatar, 'thumb') 
+                : undefined;
+            
+            return {
+                id: userId,
+                title: username,
+                subtitle: t('privacySettings.restrictedDescription') || 'Limited interactions',
+                customIcon: (
+                    <Avatar
+                        uri={avatarUri}
+                        name={username}
+                        size={40}
+                    />
+                ),
+                customContent: (
+                    <TouchableOpacity
+                        onPress={() => handleUnrestrict(userId)}
+                        style={[styles.actionButton, { backgroundColor: themeStyles.secondaryBackgroundColor }]}
+                    >
+                        <Text style={[styles.actionButtonText, { color: themeStyles.primaryColor }]}>
+                            {t('privacySettings.unrestrict') || 'Unrestrict'}
+                        </Text>
+                    </TouchableOpacity>
+                ),
+            };
+        });
+    }, [restrictedUsers, oxyServices, themeStyles, handleUnrestrict, t]);
 
     if (isLoading) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Header
                     title={t('privacySettings.title') || 'Privacy Settings'}
-                    theme={theme}
                     onBack={goBack || onClose}
                     variant="minimal"
                     elevation="subtle"
                 />
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="large" color={themeStyles.textColor} />
-                </View>
+                <LoadingState color={themeStyles.textColor} />
             </View>
         );
     }
@@ -304,7 +285,6 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('privacySettings.title') || 'Privacy Settings'}
-                theme={theme}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
@@ -312,173 +292,206 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {/* Account Privacy */}
-                <Section title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'} theme={theme} isFirst={true}>
+                <Section title={t('privacySettings.sections.account') || 'ACCOUNT PRIVACY'}  isFirst={true}>
                     <SettingRow
                         title={t('privacySettings.isPrivateAccount') || 'Private Account'}
                         description={t('privacySettings.isPrivateAccountDesc') || 'Only approved followers can see your posts'}
                         value={settings.isPrivateAccount}
                         onValueChange={(value) => updateSetting('isPrivateAccount', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
                         description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
                         value={settings.profileVisibility}
                         onValueChange={(value) => updateSetting('profileVisibility', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
                         description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
                         value={settings.hideOnlineStatus}
                         onValueChange={(value) => updateSetting('hideOnlineStatus', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
                         description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
                         value={settings.hideLastSeen}
                         onValueChange={(value) => updateSetting('hideLastSeen', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                 </Section>
 
                 {/* Interactions */}
-                <Section title={t('privacySettings.sections.interactions') || 'INTERACTIONS'} theme={theme}>
+                <Section title={t('privacySettings.sections.interactions') || 'INTERACTIONS'} >
                     <SettingRow
                         title={t('privacySettings.allowTagging') || 'Allow Tagging'}
                         description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
                         value={settings.allowTagging}
                         onValueChange={(value) => updateSetting('allowTagging', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.allowMentions') || 'Allow Mentions'}
                         description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
                         value={settings.allowMentions}
                         onValueChange={(value) => updateSetting('allowMentions', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
                         description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
                         value={settings.allowDirectMessages}
                         onValueChange={(value) => updateSetting('allowDirectMessages', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
                         description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
                         value={settings.hideReadReceipts}
                         onValueChange={(value) => updateSetting('hideReadReceipts', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                 </Section>
 
                 {/* Activity & Data */}
-                <Section title={t('privacySettings.sections.activity') || 'ACTIVITY & DATA'} theme={theme}>
+                <Section title={t('privacySettings.sections.activity') || 'ACTIVITY & DATA'} >
                     <SettingRow
                         title={t('privacySettings.showActivity') || 'Show Activity Status'}
                         description={t('privacySettings.showActivityDesc') || 'Display your activity on your profile'}
                         value={settings.showActivity}
                         onValueChange={(value) => updateSetting('showActivity', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.dataSharing') || 'Data Sharing'}
                         description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
                         value={settings.dataSharing}
                         onValueChange={(value) => updateSetting('dataSharing', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.locationSharing') || 'Location Sharing'}
                         description={t('privacySettings.locationSharingDesc') || 'Share your location'}
                         value={settings.locationSharing}
                         onValueChange={(value) => updateSetting('locationSharing', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
                         description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
                         value={settings.analyticsSharing}
                         onValueChange={(value) => updateSetting('analyticsSharing', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                 </Section>
 
                 {/* Content & Safety */}
-                <Section title={t('privacySettings.sections.content') || 'CONTENT & SAFETY'} theme={theme}>
+                <Section title={t('privacySettings.sections.content') || 'CONTENT & SAFETY'} >
                     <SettingRow
                         title={t('privacySettings.sensitiveContent') || 'Show Sensitive Content'}
                         description={t('privacySettings.sensitiveContentDesc') || 'Allow sensitive or explicit content'}
                         value={settings.sensitiveContent}
                         onValueChange={(value) => updateSetting('sensitiveContent', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.autoFilter') || 'Auto Filter'}
                         description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
                         value={settings.autoFilter}
                         onValueChange={(value) => updateSetting('autoFilter', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
                         description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
                         value={settings.muteKeywords}
                         onValueChange={(value) => updateSetting('muteKeywords', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                     <SettingRow
                         title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
                         description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
                         value={settings.blockScreenshots}
                         onValueChange={(value) => updateSetting('blockScreenshots', value)}
+                        disabled={isSaving}
+                        textColor={themeStyles.textColor}
+                        mutedTextColor={themeStyles.mutedTextColor}
+                        borderColor={themeStyles.borderColor}
                     />
                 </Section>
 
                 {/* Blocked Users */}
-                <Section title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'} theme={theme}>
+                <Section title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
                     {isLoadingUsers ? (
-                        <View style={styles.loadingUsersContainer}>
-                            <ActivityIndicator size="small" color={themeStyles.textColor} />
-                        </View>
+                        <LoadingState color={themeStyles.textColor} size="small" />
                     ) : blockedUsers.length === 0 ? (
-                        <View style={styles.emptyContainer}>
-                            <Text style={[styles.emptyText, { color: themeStyles.mutedTextColor }]}>
-                                {t('privacySettings.noBlockedUsers') || 'No blocked users'}
-                            </Text>
-                        </View>
+                        <EmptyState
+                            message={t('privacySettings.noBlockedUsers') || 'No blocked users'}
+                            textColor={themeStyles.mutedTextColor}
+                        />
                     ) : (
-                        blockedUsers.map((blocked) => {
-                            const { userId } = extractUserInfo(blocked, 'blockedId');
-                            return (
-                                <UserListItem
-                                    key={userId}
-                                    item={blocked}
-                                    idField="blockedId"
-                                    onAction={handleUnblock}
-                                    actionLabel={t('privacySettings.unblock') || 'Unblock'}
-                                    actionColor="#FF3B30"
-                                />
-                            );
-                        })
+                        <GroupedSection items={blockedUserItems} />
                     )}
                 </Section>
 
                 {/* Restricted Users */}
-                <Section title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'} theme={theme}>
+                <Section title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
                     {isLoadingUsers ? (
-                        <View style={styles.loadingUsersContainer}>
-                            <ActivityIndicator size="small" color={themeStyles.textColor} />
-                        </View>
+                        <LoadingState color={themeStyles.textColor} size="small" />
                     ) : restrictedUsers.length === 0 ? (
-                        <View style={styles.emptyContainer}>
-                            <Text style={[styles.emptyText, { color: themeStyles.mutedTextColor }]}>
-                                {t('privacySettings.noRestrictedUsers') || 'No restricted users'}
-                            </Text>
-                        </View>
+                        <EmptyState
+                            message={t('privacySettings.noRestrictedUsers') || 'No restricted users'}
+                            textColor={themeStyles.mutedTextColor}
+                        />
                     ) : (
-                        restrictedUsers.map((restricted) => {
-                            const { userId } = extractUserInfo(restricted, 'restrictedId');
-                            return (
-                                <UserListItem
-                                    key={userId}
-                                    item={restricted}
-                                    idField="restrictedId"
-                                    onAction={handleUnrestrict}
-                                    actionLabel={t('privacySettings.unrestrict') || 'Unrestrict'}
-                                    actionColor="#007AFF"
-                                    subtitle={t('privacySettings.restrictedDescription') || 'Limited interactions'}
-                                />
-                            );
-                        })
+                        <GroupedSection items={restrictedUserItems} />
                     )}
                 </Section>
             </ScrollView>
@@ -494,67 +507,6 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    loadingContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    settingRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 16,
-        borderBottomWidth: 1,
-    },
-    settingInfo: {
-        flex: 1,
-        marginRight: 16,
-    },
-    settingTitle: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 4,
-    },
-    settingDescription: {
-        fontSize: 14,
-        opacity: 0.7,
-    },
-    loadingUsersContainer: {
-        paddingVertical: 20,
-        alignItems: 'center',
-    },
-    emptyContainer: {
-        paddingVertical: 20,
-        alignItems: 'center',
-    },
-    emptyText: {
-        fontSize: 14,
-    },
-    userRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-    },
-    userInfo: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 1,
-        marginRight: 12,
-    },
-    userDetails: {
-        marginLeft: 12,
-        flex: 1,
-    },
-    username: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 2,
-    },
-    userSubtext: {
-        fontSize: 13,
-    },
     actionButton: {
         paddingHorizontal: 16,
         paddingVertical: 8,

package/src/ui/screens/ProfileScreen.tsx

@@ -1,14 +1,14 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity, Image } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import Avatar from '../components/Avatar';
 import { FollowButton } from '../components';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
 
 interface ProfileScreenProps extends BaseScreenProps {
     userId: string;
@@ -16,6 +16,7 @@ interface ProfileScreenProps extends BaseScreenProps {
 }
 
 const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack, navigate }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices, user: currentUser } = useOxy();
     const [profile, setProfile] = useState<any>(null);
     const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
@@ -38,7 +39,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
         isLoadingCounts,
     } = useFollow(userId);
 
-    const colors = useThemeColors(theme);
+    const colors = useThemeColors((theme as 'light' | 'dark') ?? 'light');
     const styles = createStyles(colors);
     const { t } = useI18n();
 
@@ -165,7 +166,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     return (
         <View style={[styles.container, { backgroundColor: colors.background }]}>
-            <ScrollView contentContainerStyle={styles.scrollContainer}>
+            <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContainer}>
                 {/* Banner Image */}
                 <View style={styles.bannerContainer}>
                     <View style={styles.bannerImage} />
@@ -177,7 +178,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             uri={profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar as string, 'thumb') : undefined}
                             name={profile?.username || username}
                             size={96}
-                            theme={theme}
+
                         />
                     </View>
                     {/* Conditional Action Button */}
@@ -192,7 +193,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         ) : (
                             <FollowButton
                                 userId={userId}
-                                theme={theme}
+
                                 onFollowChange={(isFollowing) => {
                                     // The follow button will automatically update counts via Zustand
                                     console.log(`Follow status changed: ${isFollowing}`);