@oxy.so/services 1.0.0

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -0,0 +1,380 @@
+import type React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { View, StyleSheet, Platform, Animated } from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { Avatar } from '@oxy.so/bloom/avatar';
+import Ionicons from '../icons/Ionicons';
+import { toast } from '@oxy.so/bloom/toast';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Button } from '@oxy.so/bloom/button';
+import { H1, Text } from '@oxy.so/bloom/typography';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { useOxy } from '../context/OxyContext';
+import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
+import { getNormalizedUserHandle, type User } from '@oxy.so/core';
+
+const GAP = 12;
+const INNER_GAP = 8;
+
+/**
+ * Post-signup welcome & onboarding screen.
+ * - Greets the newly registered user
+ * - Lets them immediately set / change their avatar using existing FileManagement picker
+ * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
+ */
+const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
+    onAuthenticated,
+    theme,
+    newUser,
+}) => {
+    // Use useOxy() hook for OxyContext values. The greeting/avatar identity is
+    // the ACTIVE account (the personal user during onboarding, but read through
+    // `user` so this stays correct everywhere), with the freshly
+    // registered `newUser` as the pre-store-hydration fallback.
+    const { user, oxyServices, openAvatarPicker: openChangeAvatarSurface } = useOxy();
+    const { t, locale } = useI18n();
+    const updateProfileMutation = useUpdateProfile();
+    const currentUser = user || newUser; // fallback
+    const bloomTheme = useTheme();
+    const colors = {
+        primary: bloomTheme.colors.primary,
+        border: bloomTheme.colors.border,
+        text: bloomTheme.colors.text,
+    };
+    const styles = useMemo(() => createStyles(), []);
+
+    // Animation state
+    const fadeAnim = useRef(new Animated.Value(1)).current;
+    const slideAnim = useRef(new Animated.Value(0)).current;
+    const [currentStep, setCurrentStep] = useState(0);
+    // Name form state for the conditional "set your name" step. Lazy initializers
+    // seed from the current user once; no useEffect prop→state sync.
+    const [firstName, setFirstName] = useState(() => (currentUser?.name?.first ?? '').trim());
+    const [lastName, setLastName] = useState(() => (currentUser?.name?.last ?? '').trim());
+    const [savingName, setSavingName] = useState(false);
+
+    // Derived, not mirrored: `openAvatarPicker` writes through the shared avatar
+    // path, which updates the active account — including CLEARING it when the
+    // user removes their photo, which a "last non-empty value" mirror could not
+    // represent.
+    const avatarUri = currentUser?.avatar
+        ? oxyServices.getFileDownloadUrl(currentUser.avatar, 'thumb')
+        : undefined;
+
+    // API DTO contract: explicit displayName, else the normalized handle.
+    const welcomeName =
+        currentUser?.name?.displayName ?? getNormalizedUserHandle(currentUser) ?? '';
+    const welcomeTitle = currentUser && welcomeName
+        ? (t('welcomeNew.welcome.titleWithName', { username: welcomeName }) || `Welcome, ${welcomeName} 👋`)
+        : (t('welcomeNew.welcome.title') || 'Welcome 👋');
+    // Only ask the user for their name during onboarding when they don't have a
+    // first name yet. publicKey-only / minimal accounts surface this step.
+    const needsName = !!currentUser && !(currentUser.name?.first ?? '').trim();
+    const steps: Array<{ key: string; title: string; bullets?: string[]; body?: string; showAvatar?: boolean; showNameForm?: boolean; }> = [
+        { key: 'welcome', title: welcomeTitle, body: t('welcomeNew.welcome.body') || "You just created an account in a calm, ethical space. A few quick things — then you're in." },
+        {
+            key: 'account', title: t('welcomeNew.account.title') || 'One Account. Simple.', bullets: [
+                t('welcomeNew.account.bullets.0') || 'One identity across everything',
+                t('welcomeNew.account.bullets.1') || 'No re‑signing in all the time',
+                t('welcomeNew.account.bullets.2') || 'Your preferences stay with you',
+            ]
+        },
+        {
+            key: 'principles', title: t('welcomeNew.principles.title') || 'What We Stand For', bullets: [
+                t('welcomeNew.principles.bullets.0') || 'Privacy by default',
+                t('welcomeNew.principles.bullets.1') || 'No manipulative feeds',
+                t('welcomeNew.principles.bullets.2') || 'You decide what to share',
+                t('welcomeNew.principles.bullets.3') || 'No selling your data',
+            ]
+        },
+        { key: 'trust', title: t('welcomeNew.trust.title') || 'Oxy Trust = Trust & Growth', body: t('welcomeNew.trust.body') || 'Oxy Trust is a reputation system that reacts to what you do. Helpful, respectful, constructive actions earn reputation. Harmful or low‑effort stuff chips it away. More reputation raises your trust tier and can unlock benefits; low reputation can limit features. It keeps things fair and rewards real contribution.' },
+        { key: 'avatar', title: t('welcomeNew.avatar.title') || 'Make It Yours', body: t('welcomeNew.avatar.body') || 'Add an avatar so people recognize you. It will show anywhere you show up here. Skip if you want — you can add it later.', showAvatar: true },
+        { key: 'ready', title: t('welcomeNew.ready.title') || "You're Ready", body: t('welcomeNew.ready.body') || 'Explore. Contribute. Earn reputation. Stay in control.' }
+    ];
+    if (needsName) {
+        // Inject the required name step immediately BEFORE the avatar step:
+        // …trust, name, avatar, ready.
+        const insertAt = steps.findIndex(s => s.showAvatar);
+        const nameStep = {
+            key: 'name',
+            title: t('welcomeNew.name.title') || "What's your name?",
+            body: t('welcomeNew.name.body') || 'Add your name so people know who you are.',
+            showNameForm: true,
+        };
+        if (insertAt >= 0) {
+            steps.splice(insertAt, 0, nameStep);
+        } else {
+            steps.push(nameStep);
+        }
+    }
+    const totalSteps = steps.length;
+    const avatarStepIndex = steps.findIndex(s => s.showAvatar);
+    const nameStepIndex = steps.findIndex(s => s.showNameForm);
+
+    const animateToStepCallback = useCallback((next: number) => {
+        Animated.timing(fadeAnim, { toValue: 0, duration: 180, useNativeDriver: Platform.OS !== 'web' }).start(() => {
+            setCurrentStep(next);
+            slideAnim.setValue(-40);
+            Animated.parallel([
+                Animated.timing(fadeAnim, { toValue: 1, duration: 220, useNativeDriver: Platform.OS !== 'web' }),
+                Animated.spring(slideAnim, { toValue: 0, useNativeDriver: Platform.OS !== 'web', friction: 9 })
+            ]).start();
+        });
+    }, [fadeAnim, slideAnim]);
+
+    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStepCallback(currentStep + 1); }, [currentStep, totalSteps, animateToStepCallback]);
+    const prevStep = useCallback(() => { if (currentStep > 0) animateToStepCallback(currentStep - 1); }, [currentStep, animateToStepCallback]);
+    // Skip from the intro step lands on the FIRST personalization step that
+    // exists — the required name step when present, otherwise the avatar step —
+    // so the required name step can never be bypassed.
+    const skipToAvatar = useCallback(() => {
+        const personalizeIndex = nameStepIndex >= 0 ? nameStepIndex : avatarStepIndex;
+        if (personalizeIndex >= 0) animateToStepCallback(personalizeIndex);
+    }, [nameStepIndex, avatarStepIndex, animateToStepCallback]);
+    const finish = useCallback(() => { if (onAuthenticated && currentUser) onAuthenticated(currentUser); }, [onAuthenticated, currentUser]);
+    const submitName = useCallback(async () => {
+        const f = firstName.trim();
+        if (!f) return;
+        setSavingName(true);
+        try {
+            await updateProfileMutation.mutateAsync({ name: { first: f, last: lastName.trim() } });
+            animateToStepCallback(currentStep + 1);
+        } catch (e: unknown) {
+            toast.error((e instanceof Error ? e.message : null) || t('welcomeNew.name.saveFailed') || 'Could not save your name');
+        } finally {
+            setSavingName(false);
+        }
+    }, [firstName, lastName, updateProfileMutation, animateToStepCallback, currentStep, t]);
+    /**
+     * Onboarding uses the SAME avatar flow as everywhere else — the ChangeAvatar
+     * surface (source list → crop → upload). It used to run its own
+     * pick-a-file-and-set-it path, which bypassed the cropper entirely.
+     */
+    const openAvatarPicker = useCallback(() => {
+        // Ensure we're on the avatar step, so the wizard shows the new photo
+        // when the surface closes.
+        if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+            animateToStepCallback(avatarStepIndex);
+        }
+        openChangeAvatarSurface();
+    }, [openChangeAvatarSurface, currentStep, avatarStepIndex, animateToStepCallback]);
+
+    // Shared Dialog nav header: a stable "Welcome" title, the wizard `progress`
+    // bar (replacing the old in-content dots), and a back affordance that steps the
+    // wizard back once past the intro (the step CTAs keep their own
+    // Back/Skip/Next/Enter buttons as content; the header's close dismisses,
+    // matching the pre-existing backdrop-dismiss).
+    const progress = useMemo(
+        () => ({ step: currentStep + 1, total: totalSteps }),
+        [currentStep, totalSteps],
+    );
+    useSurfaceHeader({
+        title: t('welcomeNew.navTitle'),
+        largeTitle: false,
+        onBack: currentStep > 0 ? prevStep : undefined,
+        progress,
+    });
+
+    const step = steps[currentStep];
+    const renderActionButtons = useCallback(() => {
+        if (currentStep === totalSteps - 1) {
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small">
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={finish} size="small">
+                        {t('welcomeNew.actions.enter') || 'Enter'}
+                    </Button>
+                </View>
+            );
+        }
+        if (currentStep === 0) {
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    {avatarStepIndex > 0 && (
+                        <Button variant="secondary" onPress={skipToAvatar} size="small">
+                            {t('welcomeNew.actions.skip') || 'Skip'}
+                        </Button>
+                    )}
+                    <Button variant="primary" onPress={nextStep} size="small">
+                        {t('welcomeNew.actions.next') || 'Next'}
+                    </Button>
+                </View>
+            );
+        }
+        if (nameStepIndex >= 0 && currentStep === nameStepIndex) {
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small">
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
+                        {t('welcomeNew.actions.continue') || 'Continue'}
+                    </Button>
+                </View>
+            );
+        }
+        if (step.showAvatar) {
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small">
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={nextStep} size="small">
+                        {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
+                    </Button>
+                </View>
+            );
+        }
+        return (
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={prevStep} size="small">
+                    {t('welcomeNew.actions.back') || 'Back'}
+                </Button>
+                <Button variant="primary" onPress={nextStep} size="small">
+                    {t('welcomeNew.actions.next') || 'Next'}
+                </Button>
+            </View>
+        );
+    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, nameStepIndex, submitName, firstName, savingName, step.showAvatar, avatarUri, t]);
+
+    return (
+        <View style={styles.container}>
+            {/* Step progress now lives in the shared Dialog header (`progress`). */}
+            <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
+                <View style={[styles.scrollInner, styles.contentContainer]}>
+                    <View style={[styles.header, styles.sectionSpacing]}>
+                        <H1 style={styles.title} className="text-text">{step.title}</H1>
+                        {step.body && <Text style={styles.body} className="text-text-secondary">{step.body}</Text>}
+                    </View>
+                    {Array.isArray(step.bullets) && step.bullets.length > 0 && (
+                        <View style={[styles.bulletContainer, styles.sectionSpacing]}>
+                            {step.bullets.map(b => (
+                                <View key={b} style={styles.bulletRow}>
+                                    <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
+                                    <Text style={styles.bulletText} className="text-text-secondary">{b}</Text>
+                                </View>
+                            ))}
+                        </View>
+                    )}
+                    {step.showNameForm && (
+                        <View style={[styles.nameForm, styles.sectionSpacing]}>
+                            <View style={styles.nameField}>
+                                <TextField>
+                                    <TextFieldInput
+                                        floatingLabel
+                                        label={t('welcomeNew.name.firstLabel') || 'First name'}
+                                        value={firstName}
+                                        onChangeText={setFirstName}
+                                        autoFocus
+                                        autoCapitalize="words"
+                                    />
+                                </TextField>
+                            </View>
+                            <View style={styles.nameField}>
+                                <TextField>
+                                    <TextFieldInput
+                                        floatingLabel
+                                        label={t('welcomeNew.name.lastLabel') || 'Last name'}
+                                        value={lastName}
+                                        onChangeText={setLastName}
+                                        autoCapitalize="words"
+                                    />
+                                </TextField>
+                            </View>
+                        </View>
+                    )}
+                    {step.showAvatar && (
+                        <View style={[styles.avatarSection, styles.sectionSpacing]}>
+                            <Avatar
+                                size={120}
+                                name={welcomeName}
+                                source={avatarUri}
+                                placeholderColor={`${colors.primary}20`}
+                                style={styles.avatar}
+                            />
+                            <Button variant="primary" size="small" onPress={openAvatarPicker}>
+                                {avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}
+                            </Button>
+                        </View>
+                    )}
+                    <View style={styles.sectionSpacing}>
+                        {renderActionButtons()}
+                    </View>
+                </View>
+            </Animated.View>
+        </View>
+    );
+
+};
+
+const createStyles = () => {
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            paddingHorizontal: 20,
+        },
+        scrollInner: {
+            paddingTop: 0,
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: 420,
+            alignSelf: 'center',
+        },
+        sectionSpacing: {
+            marginBottom: GAP,
+        },
+        header: {
+            alignItems: 'flex-start',
+            width: '100%',
+            gap: INNER_GAP / 2,
+        },
+        title: {
+            fontSize: 42,
+            letterSpacing: -1,
+            textAlign: 'left',
+        },
+        body: {
+            fontSize: 16,
+            lineHeight: 22,
+            textAlign: 'left',
+            maxWidth: 320,
+            alignSelf: 'flex-start',
+        },
+        bulletContainer: {
+            gap: INNER_GAP,
+            width: '100%',
+        },
+        bulletRow: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 10,
+        },
+        bulletText: {
+            flex: 1,
+            fontSize: 15,
+            lineHeight: 20,
+        },
+        nameForm: {
+            width: '100%',
+            gap: GAP,
+        },
+        nameField: {
+            width: '100%',
+            gap: INNER_GAP / 2,
+        },
+        avatarSection: {
+            width: '100%',
+            alignItems: 'center',
+        },
+        avatar: {
+            marginBottom: INNER_GAP,
+        },
+    });
+};
+
+export default WelcomeNewUserScreen;

package/src/ui/screens/__tests__/linkFormat.test.ts

@@ -0,0 +1,73 @@
+import {
+    getLinkTitle,
+    getLinkDescription,
+    linksToListItems,
+} from '../linkFormat';
+
+describe('linkFormat', () => {
+    describe('getLinkTitle', () => {
+        it.each([
+            ['https://example.com', 'example.com'],
+            ['http://example.com/', 'example.com'],
+            ['https://example.com/path/', 'example.com/path'],
+            ['example.com', 'example.com'],
+        ])('strips protocol and trailing slash: %p → %p', (input, expected) => {
+            expect(getLinkTitle(input)).toBe(expected);
+        });
+    });
+
+    describe('getLinkDescription', () => {
+        it('prefixes the url with "Link to "', () => {
+            expect(getLinkDescription('https://example.com')).toBe('Link to https://example.com');
+        });
+    });
+
+    describe('linksToListItems', () => {
+        it('maps a normal string array, preserving valid-link rendering', () => {
+            const result = linksToListItems(['https://example.com/', 'http://oxy.so']);
+            expect(result).toEqual([
+                {
+                    id: 'link-0',
+                    url: 'https://example.com/',
+                    title: 'example.com',
+                    description: 'Link to https://example.com/',
+                },
+                {
+                    id: 'link-1',
+                    url: 'http://oxy.so',
+                    title: 'oxy.so',
+                    description: 'Link to http://oxy.so',
+                },
+            ]);
+        });
+
+        it.each([
+            [null, 'null'],
+            [undefined, 'undefined'],
+            [42, 'a number'],
+            [{ href: 'x' }, 'an object'],
+            [['nested'], 'an array'],
+        ])('does not throw on a non-string element (%s)', (bad) => {
+            // Regression: `links.map(getLinkTitle)` called `.replace` on a
+            // non-string element and crashed the editor. The coercion guard must
+            // yield a string url/title/description instead.
+            const run = () => linksToListItems([bad]);
+            expect(run).not.toThrow();
+            const [item] = run();
+            expect(typeof item.url).toBe('string');
+            expect(typeof item.title).toBe('string');
+            expect(typeof item.description).toBe('string');
+        });
+
+        it('coerces null / undefined to an empty-string url', () => {
+            const result = linksToListItems([null, undefined]);
+            expect(result[0].url).toBe('');
+            expect(result[0].title).toBe('');
+            expect(result[1].url).toBe('');
+        });
+
+        it('returns an empty array for an empty input', () => {
+            expect(linksToListItems([])).toEqual([]);
+        });
+    });
+});

package/src/ui/screens/__tests__/photoGridLayout.test.ts

@@ -0,0 +1,57 @@
+import {
+    computePhotoGridLayout,
+    PHOTO_GRID_GUTTER,
+    PHOTO_GRID_WIDE_BREAKPOINT,
+} from '../fileManagement/photoGridLayout';
+
+describe('computePhotoGridLayout', () => {
+    it('uses 3 columns below the wide breakpoint', () => {
+        expect(computePhotoGridLayout(390).columns).toBe(3);
+        expect(computePhotoGridLayout(500).columns).toBe(3);
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT - 1).columns).toBe(3);
+    });
+
+    it('uses 4 columns at/above the wide breakpoint', () => {
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT).columns).toBe(4);
+        expect(computePhotoGridLayout(700).columns).toBe(4);
+        expect(computePhotoGridLayout(1024).columns).toBe(4);
+    });
+
+    it('floors the tile size so a full row never exceeds the container', () => {
+        // The whole point of the bug fix: geometry derives from the passed
+        // container width, and a full row of tiles + gutters must fit inside it.
+        for (const width of [320, 375, 390, 428, 500, 599, 600, 768, 834, 1024]) {
+            const { columns, cellSize, gutter } = computePhotoGridLayout(width);
+            const rowWidth = columns * cellSize + (columns - 1) * gutter;
+            expect(rowWidth).toBeLessThanOrEqual(width);
+            // ...and the floor is tight (adding one px per tile would overflow).
+            expect((columns * (cellSize + 1)) + (columns - 1) * gutter).toBeGreaterThan(width);
+        }
+    });
+
+    it('derives smaller tiles from a narrow sheet than from a wide screen', () => {
+        // Regression guard for the original bug: a centered dialog (narrow
+        // container) must NOT size tiles from a wider screen width.
+        const narrowSheet = computePhotoGridLayout(500); // 3 cols
+        const wideScreen = computePhotoGridLayout(1200); // 4 cols
+        expect(narrowSheet.cellSize).toBeLessThan(wideScreen.cellSize);
+        // Cross-check the exact arithmetic against the gutter constant.
+        expect(narrowSheet.cellSize).toBe(
+            Math.floor((500 - PHOTO_GRID_GUTTER * 2) / 3),
+        );
+        expect(wideScreen.cellSize).toBe(
+            Math.floor((1200 - PHOTO_GRID_GUTTER * 3) / 4),
+        );
+    });
+
+    it('returns cellSize 0 for a not-yet-measured (<= 0) width', () => {
+        expect(computePhotoGridLayout(0).cellSize).toBe(0);
+        expect(computePhotoGridLayout(-10).cellSize).toBe(0);
+        // Columns still resolve to the narrow default so callers can render.
+        expect(computePhotoGridLayout(0).columns).toBe(3);
+    });
+
+    it('exposes the gutter it used to derive the tile size', () => {
+        expect(computePhotoGridLayout(500).gutter).toBe(PHOTO_GRID_GUTTER);
+    });
+});

package/src/ui/screens/fileManagement/FileLibraryError.tsx

@@ -0,0 +1,56 @@
+import type React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Ionicons from '../../icons/Ionicons';
+
+export interface FileLibraryErrorProps {
+    title: string;
+    description: string;
+    retryLabel: string;
+    onRetry: () => void;
+    /** Failure icon tint. */
+    iconColor: string;
+    titleColor: string;
+    descriptionColor: string;
+    /** Retry button background (button label/icon are always white). */
+    buttonColor: string;
+}
+
+/**
+ * Terminal load-failure surface for the file library — rendered (INSTEAD of the
+ * "no files yet" empty state) when the list query errors with nothing cached, so
+ * a failed load never masquerades as an empty library. Pure presentational; the
+ * Retry action is wired to the query's `refetch()` by the caller. Themed via
+ * color props so it fits both the browse chrome and the dark picker backdrop.
+ */
+const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
+    title,
+    description,
+    retryLabel,
+    onRetry,
+    iconColor,
+    titleColor,
+    descriptionColor,
+    buttonColor,
+}) => (
+    <View className="items-center py-[40px] px-[24px]">
+        <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
+        <Text className="text-[24px] font-bold mt-[16px] mb-[8px] text-center" style={{ color: titleColor }}>
+            {title}
+        </Text>
+        <Text className="text-[16px] text-center leading-[24px] mb-[32px]" style={{ color: descriptionColor }}>
+            {description}
+        </Text>
+        <TouchableOpacity
+            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
+            style={{ backgroundColor: buttonColor }}
+            onPress={onRetry}
+            accessibilityRole="button"
+            accessibilityLabel={retryLabel}
+        >
+            <Ionicons name="refresh" size={20} color="#FFFFFF" />
+            <Text className="text-white text-[16px] font-semibold">{retryLabel}</Text>
+        </TouchableOpacity>
+    </View>
+);
+
+export default FileLibraryError;