@oxyhq/services 5.11.9 → 5.11.11

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import { View, Text, type LayoutChangeEvent } from 'react-native';
+import type { FileMetadata } from '../../../models/interfaces';
+// Using plain React Native styles (nativewind not installed in this repo)
+
+export interface JustifiedPhotoGridProps {
+    photos: FileMetadata[];
+    photoDimensions: { [key: string]: { width: number; height: number } };
+    loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
+    createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
+    renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
+    renderSimplePhotoItem: (photo: FileMetadata, index: number) => React.ReactElement;
+    textColor: string;
+    /**
+     * Full available width from parent. If omitted, component will measure itself and adapt responsively.
+     */
+    containerWidth?: number; // optional; will auto-measure if not provided
+    gap?: number;
+    minRowHeight?: number;
+    maxRowHeight?: number;
+    dateFormatLocale?: string;
+}
+
+/**
+ * Responsive justified photo grid that stretches to the provided containerWidth.
+ * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
+ */
+const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
+    photos,
+    photoDimensions,
+    loadPhotoDimensions,
+    createJustifiedRows,
+    renderJustifiedPhotoItem,
+    textColor,
+    containerWidth: explicitWidth,
+    gap = 4,
+    minRowHeight = 100,
+    maxRowHeight = 300,
+    dateFormatLocale = 'en-US',
+}) => {
+    // Responsive width measurement if not explicitly provided
+    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+    const effectiveWidth = explicitWidth ?? measuredWidth ?? 0; // 0 until measured
+
+    const onLayoutContainer = useCallback((e: LayoutChangeEvent) => {
+        if (explicitWidth) return; // ignore if controlled
+        const w = e.nativeEvent.layout.width;
+        setMeasuredWidth(prev => (prev === w ? prev : w));
+    }, [explicitWidth]);
+    // Ensure dimensions are loaded for displayed photos
+    useEffect(() => {
+        loadPhotoDimensions(photos);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [photos.map(p => p.id).join(',')]);
+
+    // Group photos by date first
+    const photosByDate = useMemo(() => {
+        return photos.reduce((groups: { [key: string]: FileMetadata[] }, photo) => {
+            const date = new Date(photo.uploadDate).toDateString();
+            if (!groups[date]) groups[date] = [];
+            groups[date].push(photo);
+            return groups;
+        }, {} as { [key: string]: FileMetadata[] });
+    }, [photos]);
+
+    const sortedDates = useMemo(() => Object.keys(photosByDate).sort((a, b) => new Date(b).getTime() - new Date(a).getTime()), [photosByDate]);
+
+    // Track measured width of each date section (may differ if parent applies horizontal padding/margins)
+    const [dateWidths, setDateWidths] = useState<Record<string, number>>({});
+    const onLayoutDate = useCallback((date: string, width: number) => {
+        setDateWidths(prev => (prev[date] === width ? prev : { ...prev, [date]: width }));
+    }, []);
+
+    return (
+        <View style={{ width: '100%' }} onLayout={onLayoutContainer}>
+            {/* If width not yet known (uncontrolled), avoid rendering to prevent layout jump */}
+            {effectiveWidth === 0 && !explicitWidth ? null : (
+                <>
+                    {sortedDates.map((date: string) => {
+                        const dayPhotos = photosByDate[date];
+                        // createJustifiedRows should build rows such that the "ideal" height (availableWidth / totalAspect) stays within min/max.
+                        // We pass the effective container width.
+                        const dateWidth = dateWidths[date] ?? effectiveWidth; // fallback to overall width until measured
+                        const rows = dateWidth > 0 ? createJustifiedRows(dayPhotos, dateWidth) : [];
+                        return (
+                            <View
+                                key={date}
+                                style={{ marginBottom: 24, width: '100%' }}
+                                onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
+                            >
+                                <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
+                                    {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                                </Text>
+                                <View style={{ width: '100%' }}>
+                                    {rows.map((row, rowIndex) => {
+                                        // Compute total aspect ratios using loaded dimensions (fallback 4/3)
+                                        const aspects = row.map(p => {
+                                            const dims = photoDimensions[p.id];
+                                            return dims ? dims.width / dims.height : 4 / 3;
+                                        });
+                                        const totalAspect = aspects.reduce((a, b) => a + b, 0);
+                                        const gapsTotal = gap * (row.length - 1);
+                                        const availableWidth = dateWidth - gapsTotal;
+                                        // Ideal height that perfectly fills width when preserving aspect ratios
+                                        const idealHeight = availableWidth / totalAspect;
+                                        // We rely on row construction keeping idealHeight within min/max bounds; if not, clamp but then distribute leftover/overflow.
+                                        let rowHeight = idealHeight;
+                                        let widthAdjustment = 0; // difference to distribute if clamped
+                                        if (idealHeight < minRowHeight) {
+                                            rowHeight = minRowHeight;
+                                            widthAdjustment = availableWidth - rowHeight * totalAspect; // negative means overflow
+                                        } else if (idealHeight > maxRowHeight) {
+                                            rowHeight = maxRowHeight;
+                                            widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                        }
+
+                                        // Pre-compute widths maintaining aspect ratios
+                                        let widths = aspects.map(ar => ar * rowHeight);
+                                        // If we have widthAdjustment (due to clamping) distribute proportionally so row still fills exactly
+                                        if (widthAdjustment !== 0) {
+                                            const widthSum = widths.reduce((a, b) => a + b, 0);
+                                            widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
+                                        }
+
+                                        // To combat rounding issues, adjust last item width to fill precisely
+                                        const widthSumRounded = widths.reduce((a, b) => a + b, 0);
+                                        const roundingDiff = availableWidth - widthSumRounded;
+                                        if (Math.abs(roundingDiff) > 0.5) {
+                                            widths[widths.length - 1] += roundingDiff; // minimal correction
+                                        }
+
+                                        return (
+                                            <View key={rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
+                                                {row.map((p, i) => {
+                                                    const photoWidth = widths[i];
+                                                    return (
+                                                        <View
+                                                            key={p.id}
+                                                            style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
+                                                        >
+                                                            {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
+                                                        </View>
+                                                    );
+                                                })}
+                                            </View>
+                                        );
+                                    })}
+                                </View>
+                            </View>
+                        );
+                    })}
+                </>
+            )}
+        </View>
+    );
+};
+
+export default React.memo(JustifiedPhotoGrid);

package/src/ui/context/OxyContext.tsx

@@ -1,4 +1,6 @@
-import React, { createContext, useContext, useEffect, useCallback, type ReactNode, useMemo, useRef, useState } from 'react';
+import type React from 'react';
+import { createContext, useContext, useEffect, useCallback, useMemo, useRef, useState, type ReactNode } from 'react';
+import type { UseFollowHook } from '../hooks/useFollow.types';
 import { View, Text } from 'react-native';
 import { OxyServices } from '../../core';
 import type { User, ApiError } from '../../models/interfaces';
@@ -9,8 +11,8 @@ import { toast } from '../../lib/sonner';
 import { useAuthStore } from '../stores/authStore';
 
 // Define the context shape
-
-import { useFollow as baseUseFollow } from '../hooks/useFollow';
+// NOTE: We intentionally avoid importing useFollow here to prevent a require cycle.
+// If consumers relied on `const { useFollow } = useOxy()`, we provide a lazy proxy below.
 
 export interface OxyContextState {
   // Authentication state
@@ -22,6 +24,9 @@ export interface OxyContextState {
   isLoading: boolean;
   error: string | null;
 
+  // Language state
+  currentLanguage: string;
+
   // Auth methods
   login: (username: string, password: string, deviceName?: string) => Promise<User>;
   logout: (targetSessionId?: string) => Promise<void>;
@@ -33,6 +38,9 @@ export interface OxyContextState {
   removeSession: (sessionId: string) => Promise<void>;
   refreshSessions: () => Promise<void>;
 
+  // Language methods
+  setLanguage: (languageId: string) => Promise<void>;
+
   // Device management methods
   getDeviceSessions: () => Promise<any[]>;
   logoutAllDeviceSessions: () => Promise<void>;
@@ -47,9 +55,10 @@ export interface OxyContextState {
   hideBottomSheet?: () => void;
 
   /**
-   * useFollow hook, exposed for convenience so you can do const { useFollow } = useOxy();
+   * (Deprecated) useFollow hook access via context. Prefer: import { useFollow } from '@oxyhq/services';
+   * Kept for backward compatibility; implemented as a lazy dynamic require to avoid circular dependency.
    */
-  useFollow: any;
+  useFollow: UseFollowHook; // Back-compat; prefer direct import
 }
 
 // Create the context with default values
@@ -122,6 +131,7 @@ const getStorage = async (): Promise<StorageInterface> => {
 // Storage keys for sessions
 const getStorageKeys = (prefix = 'oxy_session') => ({
   activeSessionId: `${prefix}_active_session_id`, // Only store the active session ID
+  language: `${prefix}_language`, // Store the selected language
 });
 
 export const OxyProvider: React.FC<OxyContextProviderProps> = ({
@@ -158,12 +168,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const logoutStore = useAuthStore((state) => state.logout);
 
   // Local state for non-auth fields
-  const [minimalUser, setMinimalUser] = React.useState<MinimalUserData | null>(null);
-  const [sessions, setSessions] = React.useState<ClientSession[]>([]);
-  const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
-  const [storage, setStorage] = React.useState<StorageInterface | null>(null);
+  const [minimalUser, setMinimalUser] = useState<MinimalUserData | null>(null);
+  const [sessions, setSessions] = useState<ClientSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [storage, setStorage] = useState<StorageInterface | null>(null);
+  const [currentLanguage, setCurrentLanguage] = useState<string>('en');
   // Add a new state to track token restoration
-  const [tokenReady, setTokenReady] = React.useState(false);
+  const [tokenReady, setTokenReady] = useState(false);
 
   // Storage keys (memoized to prevent infinite loops)
   const keys = useMemo(() => getStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
@@ -185,88 +196,66 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         const platformStorage = await getStorage();
         setStorage(platformStorage);
       } catch (error) {
-        console.error('Failed to initialize storage:', error);
+        console.error('Init storage failed', error);
         useAuthStore.setState({ error: 'Failed to initialize storage' });
       }
     };
-
     initStorage();
   }, []);
 
-  // Effect to initialize authentication state - only store session ID
+  // Initialize authentication state
   useEffect(() => {
     const initAuth = async () => {
       if (!storage) return;
-
       useAuthStore.setState({ isLoading: true });
       try {
-        // Only load the active session ID from storage
-        const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
+        setTokenReady(false);
 
-        console.log('Auth - activeSessionId:', storedActiveSessionId);
-        console.log('Auth - storage available:', !!storage);
-        console.log('Auth - oxyServices available:', !!oxyServices);
+        // Load saved language preference
+        const savedLanguage = await storage.getItem(keys.language);
+        if (savedLanguage) {
+          setCurrentLanguage(savedLanguage);
+        }
 
+        // Try to restore active session from storage
+        const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
         if (storedActiveSessionId) {
-          // Validate the stored session with the backend
           try {
-            const validation = await oxyServices.validateSession(storedActiveSessionId, {
-              useHeaderValidation: true
-            });
-
+            const validation = await oxyServices.validateSession(storedActiveSessionId, { useHeaderValidation: true });
             if (validation.valid) {
-              console.log('Auth - session validated successfully');
               setActiveSessionId(storedActiveSessionId);
-
-              // Get access token for API calls
               await oxyServices.getTokenBySession(storedActiveSessionId);
-
-              // Load full user data from backend
               const fullUser = await oxyServices.getUserBySession(storedActiveSessionId);
               loginSuccess(fullUser);
-              setMinimalUser({
-                id: fullUser.id,
-                username: fullUser.username,
-                avatar: fullUser.avatar
-              });
-
-              // Load sessions from backend
+              setMinimalUser({ id: fullUser.id, username: fullUser.username, avatar: fullUser.avatar });
               const serverSessions = await oxyServices.getSessionsBySessionId(storedActiveSessionId);
-              const clientSessions: ClientSession[] = serverSessions.map(serverSession => ({
-                sessionId: serverSession.sessionId,
-                deviceId: serverSession.deviceId,
-                expiresAt: serverSession.expiresAt || new Date().toISOString(),
-                lastActive: serverSession.lastActive || new Date().toISOString(),
-                userId: serverSession.userId || fullUser.id
+              const clientSessions: ClientSession[] = serverSessions.map(s => ({
+                sessionId: s.sessionId,
+                deviceId: s.deviceId,
+                expiresAt: s.expiresAt || new Date().toISOString(),
+                lastActive: s.lastActive || new Date().toISOString(),
+                userId: s.userId || fullUser.id
               }));
               setSessions(clientSessions);
-
-              if (onAuthStateChange) {
-                onAuthStateChange(fullUser);
-              }
+              onAuthStateChange?.(fullUser);
             } else {
-              console.log('Auth - session invalid, clearing storage');
               await clearAllStorage();
             }
-          } catch (error) {
-            console.error('Auth - session validation error:', error);
+          } catch (e) {
+            console.error('Session validation error', e);
             await clearAllStorage();
           }
-        } else {
-          console.log('Auth - no stored session found, user needs to login');
         }
-      } catch (err) {
-        console.error('Auth initialization error:', err);
+        setTokenReady(true);
+      } catch (e) {
+        console.error('Auth init error', e);
         await clearAllStorage();
       } finally {
         useAuthStore.setState({ isLoading: false });
       }
     };
-
-    if (storage) {
-      initAuth();
-    }
-  }, [storage, oxyServices, keys, onAuthStateChange, loginSuccess, setMinimalUser, clearAllStorage]);
+    initAuth();
+  }, [storage, oxyServices, keys, onAuthStateChange, loginSuccess, clearAllStorage]);
 
 
 
@@ -630,6 +619,26 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [activeSessionId, oxyServices]);
 
+  // Language management method
+  const setLanguage = useCallback(async (languageId: string): Promise<void> => {
+    if (!storage) throw new Error('Storage not initialized');
+
+    try {
+      // Save language preference
+      await storage.setItem(keys.language, languageId);
+      setCurrentLanguage(languageId);
+
+      console.log(`Language changed to ${languageId}`);
+
+      // TODO: Here you can add any additional logic needed for app-wide language updates
+      // such as updating i18n configuration, refreshing translations, etc.
+
+    } catch (error) {
+      console.error('Error saving language preference:', error);
+      throw error;
+    }
+  }, [storage, keys.language]);
+
   // Bottom sheet control methods
   const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
     console.log('showBottomSheet called with:', screenOrConfig);
@@ -691,6 +700,24 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   });
 
   // Context value - optimized to prevent unnecessary re-renders
+  // Lazy proxy to load the hook only when accessed, breaking the static import cycle.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  const useFollowProxy: UseFollowHook = (userId?: string | string[]) => {
+    try {
+      // Dynamically require to avoid top-level cycle
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const mod = require('../hooks/useFollow');
+      if (mod && typeof mod.useFollow === 'function') {
+        return mod.useFollow(userId);
+      }
+      console.warn('useFollow module did not export a function as expected');
+      return { isFollowing: false, isLoading: false, error: null, toggleFollow: async () => { }, setFollowStatus: () => { }, fetchStatus: async () => { }, clearError: () => { }, followerCount: null, followingCount: null, isLoadingCounts: false, fetchUserCounts: async () => { }, setFollowerCount: () => { }, setFollowingCount: () => { } } as any;
+    } catch (e) {
+      console.warn('Failed to dynamically load useFollow hook:', e);
+      return { isFollowing: false, isLoading: false, error: null, toggleFollow: async () => { }, setFollowStatus: () => { }, fetchStatus: async () => { }, clearError: () => { }, followerCount: null, followingCount: null, isLoadingCounts: false, fetchUserCounts: async () => { }, setFollowerCount: () => { }, setFollowingCount: () => { } } as any;
+    }
+  };
+
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     minimalUser,
@@ -699,6 +726,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     error,
+    currentLanguage,
     login,
     logout,
     logoutAll,
@@ -706,6 +734,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     switchSession,
     removeSession,
     refreshSessions,
+    setLanguage,
     getDeviceSessions,
     logoutAllDeviceSessions,
     updateDeviceName,
@@ -713,7 +742,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     bottomSheetRef,
     showBottomSheet,
     hideBottomSheet,
-    useFollow: baseUseFollow,
+    useFollow: useFollowProxy,
   }), [
     user?.id, // Only depend on user ID, not the entire user object
     minimalUser?.id,
@@ -722,6 +751,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     error,
+    currentLanguage,
     login,
     logout,
     logoutAll,
@@ -729,6 +759,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     switchSession,
     removeSession,
     refreshSessions,
+    setLanguage,
     getDeviceSessions,
     logoutAllDeviceSessions,
     updateDeviceName,

package/src/ui/hooks/useFollow.types.ts

@@ -0,0 +1,33 @@
+// Type-only definition for the useFollow hook to allow context exposure without runtime import cycles.
+// Expand this as needed to better reflect the real return type.
+
+export type SingleFollowResult = {
+  isFollowing: boolean;
+  isLoading: boolean;
+  error: string | null;
+  toggleFollow: () => Promise<void>;
+  setFollowStatus: (following: boolean) => void;
+  fetchStatus: () => Promise<void>;
+  clearError: () => void;
+  followerCount: number | null;
+  followingCount: number | null;
+  isLoadingCounts: boolean;
+  fetchUserCounts: () => Promise<void>;
+  setFollowerCount: (count: number) => void;
+  setFollowingCount: (count: number) => void;
+};
+
+export type MultiFollowResult = {
+  followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }>;
+  toggleFollowForUser: (userId: string) => Promise<void>;
+  setFollowStatusForUser: (userId: string, following: boolean) => void;
+  fetchStatusForUser: (userId: string) => Promise<void>;
+  fetchAllStatuses: () => Promise<void>;
+  clearErrorForUser: (userId: string) => void;
+  isAnyLoading: boolean;
+  hasAnyError: boolean;
+  allFollowing: boolean;
+  allNotFollowing: boolean;
+};
+
+export type UseFollowHook = (userId?: string | string[]) => SingleFollowResult | MultiFollowResult;

package/src/ui/navigation/OxyRouter.tsx

@@ -25,6 +25,8 @@ import UserLinksScreen from '../screens/UserLinksScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
 import RecoverAccountScreen from '../screens/RecoverAccountScreen';
 import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
+import WelcomeNewUserScreen from '../screens/WelcomeNewUserScreen';
+import LanguageSelectorScreen from '../screens/LanguageSelectorScreen';
 
 // Import types
 import type { OxyRouterProps, RouteConfig } from './types';
@@ -115,6 +117,14 @@ const routes: Record<string, RouteConfig> = {
         component: PaymentGatewayScreen,
         snapPoints: ['60%', '90%'],
     },
+    WelcomeNewUser: {
+        component: WelcomeNewUserScreen,
+        snapPoints: ['65%', '90%'],
+    },
+    LanguageSelector: {
+        component: LanguageSelectorScreen,
+        snapPoints: ['70%', '100%'],
+    },
 };
 
 const OxyRouter: React.FC<OxyRouterProps> = ({

package/src/ui/navigation/types.ts

@@ -1,6 +1,7 @@
 import type { OxyServices } from '../../core';
 import type { User } from '../../models/interfaces';
 import type { ComponentType, ReactNode } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
 
 /**
  * Base props for all screens in the Oxy UI system
@@ -138,4 +139,9 @@ export interface OxyProviderProps {
    * @default true
    */
   showInternalToaster?: boolean;
+
+  /**
+   * Optional QueryClient instance for React Query. If not provided, a sensible default is created.
+   */
+  queryClient?: QueryClient;
 }

package/src/ui/screens/AccountCenterScreen.tsx

@@ -16,13 +16,11 @@ import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
-import {
-    ProfileCard,
-    Section,
-    QuickActions,
-    GroupedSection,
-    GroupedItem
-} from '../components';
+import ProfileCard from '../components/ProfileCard';
+import Section from '../components/Section';
+import QuickActions from '../components/QuickActions';
+import GroupedSection from '../components/GroupedSection';
+import GroupedItem from '../components/GroupedItem';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -218,6 +216,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 subtitle: 'Manage notification settings',
                                 onPress: () => toast.info('Notifications feature coming soon!'),
                             }] : []),
+                            {
+                                id: 'language',
+                                icon: 'language',
+                                iconColor: '#32D74B',
+                                title: 'Language',
+                                subtitle: 'Choose your preferred language',
+                                onPress: () => navigate('LanguageSelector'),
+                            },
                             {
                                 id: 'help',
                                 icon: 'help-circle',

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -192,7 +192,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     <>
                                         <View style={styles.userIcon}>
                                             <Avatar
-                                                uri={user?.avatar?.url}
+                                                uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                                                 name={user?.name?.full}
                                                 size={40}
                                                 theme={theme}
@@ -301,8 +301,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     customContent: (
                                         <>
                                             <View style={styles.userIcon}>
-                                                {account.avatar?.url ? (
-                                                    <Image source={{ uri: account.avatar.url }} style={styles.accountAvatarImage} />
+                                                {account.avatar ? (
+                                                    <Image source={{ uri: oxyServices.getFileStreamUrl(account.avatar as string) }} style={styles.accountAvatarImage} />
                                                 ) : (
                                                     <View style={styles.accountAvatarFallback}>
                                                         <Text style={styles.accountAvatarText}>