@oxyhq/services 11.0.0 → 11.1.0

package/src/types/expo-haptics.d.ts

@@ -0,0 +1,42 @@
+declare module 'expo-haptics' {
+  export enum ImpactFeedbackStyle {
+    Light = 'light',
+    Medium = 'medium',
+    Heavy = 'heavy',
+    Rigid = 'rigid',
+    Soft = 'soft',
+  }
+
+  export enum NotificationFeedbackType {
+    Success = 'success',
+    Warning = 'warning',
+    Error = 'error',
+  }
+
+  export enum AndroidHaptics {
+    Confirm = 'confirm',
+    Reject = 'reject',
+    Toggle_On = 'toggle_on',
+    Toggle_Off = 'toggle_off',
+    Selection = 'selection',
+    Context_Click = 'context_click',
+    Keyboard_Tap = 'keyboard_tap',
+    Keyboard_Press = 'keyboard_press',
+    Keyboard_Release = 'keyboard_release',
+    Virtual_Key = 'virtual_key',
+    Virtual_Key_Release = 'virtual_key_release',
+    Long_Press = 'long_press',
+    Gesture_Start = 'gesture_start',
+    Gesture_End = 'gesture_end',
+    Clock_Tick = 'clock_tick',
+    Segment_Tick = 'segment_tick',
+    Segment_Frequent_Tick = 'segment_frequent_tick',
+    Text_Handle_Move = 'text_handle_move',
+    Drag_Start = 'drag_start',
+  }
+
+  export function impactAsync(style?: ImpactFeedbackStyle): Promise<void>;
+  export function notificationAsync(type?: NotificationFeedbackType): Promise<void>;
+  export function selectionAsync(): Promise<void>;
+  export function performAndroidHapticsAsync(type: AndroidHaptics): Promise<void>;
+}

package/src/ui/components/AccountMenu.tsx

@@ -19,7 +19,7 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
-import { logger as loggerUtil } from '@oxyhq/core';
+import { isDev, logger as loggerUtil } from '@oxyhq/core';
 import { buildAccountRows, type AccountRow } from './accountMenuRows';
 import { useDeviceAccounts } from '../hooks/useDeviceAccounts';
 
@@ -53,6 +53,8 @@ export interface AccountMenuProps {
     onAddAccount: () => void;
     /** Optional anchor (web only). Native ignores this and uses bottom-sheet style. */
     anchor?: AccountMenuAnchor | null;
+    /** Called before the active identity changes so apps can clear tenant-scoped state. */
+    onBeforeSessionChange?: () => void | Promise<void>;
 }
 
 const isWeb = Platform.OS === 'web';
@@ -76,6 +78,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     onNavigateManage,
     onAddAccount,
     anchor,
+    onBeforeSessionChange,
 }) => {
     const {
         activeSessionId,
@@ -131,18 +134,19 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         }
         setBusySessionId(sessionId);
         try {
+            await onBeforeSessionChange?.();
             await switchSession(sessionId);
             toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
             onClose();
         } catch (error) {
-            if (!__DEV__) {
+            if (!isDev()) {
                 loggerUtil.warn('Switch account failed', { component: 'AccountMenu' }, error as unknown);
             }
             toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
         } finally {
             setBusySessionId(null);
         }
-    }, [activeSessionId, busySessionId, switchSession, t, onClose]);
+    }, [activeSessionId, busySessionId, switchSession, t, onClose, onBeforeSessionChange]);
 
     // Sign out a SPECIFIC inactive account from its per-row icon. `removeSession`
     // is the SDK's canonical per-session sign-out: it targets the given session
@@ -171,6 +175,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         }
         setSigningOut(true);
         try {
+            await onBeforeSessionChange?.();
             await logout();
             toast.success(t('common.actions.signedOut') || 'Signed out');
             onClose();
@@ -180,7 +185,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         } finally {
             setSigningOut(false);
         }
-    }, [signingOut, logout, t, onClose]);
+    }, [signingOut, logout, t, onClose, onBeforeSessionChange]);
 
     const performSignOutAll = useCallback(async () => {
         if (signingOutAll) {
@@ -188,6 +193,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         }
         setSigningOutAll(true);
         try {
+            await onBeforeSessionChange?.();
             await logoutAll();
             toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'Signed out of all accounts');
             onClose();
@@ -197,7 +203,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         } finally {
             setSigningOutAll(false);
         }
-    }, [signingOutAll, logoutAll, t, onClose]);
+    }, [signingOutAll, logoutAll, t, onClose, onBeforeSessionChange]);
 
     // Escape-to-close + focus management (web only).
     useEffect(() => {

package/src/ui/components/AnotherDeviceQR.tsx

@@ -8,64 +8,96 @@
  * inside a tap-to-expand disclosure so it never competes with the primary CTA.
  *
  * The QR plate stays white intentionally — high contrast is required for
- * reliable scanning regardless of the app theme.
+ * reliable scanning regardless of the app theme. That single plate (and its
+ * fixed dimensions) is the only StyleSheet/hardcoded-color in this component;
+ * everything else is composed from Bloom typography + centralized token classes.
  */
 
 import type React from 'react';
 import { useState, useCallback } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { Text } from '@oxyhq/bloom/typography';
+import * as Icons from '@oxyhq/bloom/icons';
 
 export interface AnotherDeviceQRProps {
-  /** The QR payload (`oxyauth://<token>`). Empty string renders nothing. */
+  /** The legacy QR payload (`oxyauth://<token>`). Empty string renders nothing. */
   qrData: string;
+  /**
+   * The secure "Sign in with Oxy" handoff payload (`oxycommons://approve?...`).
+   * Preferred over `qrData` when present — it carries the PUBLIC authorize code
+   * (never the secret session token), so the Oxy identity app on another device
+   * can scan it to approve. Falls back to `qrData` when the handoff backend has
+   * not returned a payload.
+   */
+  qrPayload?: string | null;
 }
 
 /** Size, in px, of the rendered QR symbol. */
 const QR_SIZE = 200;
 
+/** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+
 /**
  * Collapsed disclosure that reveals a high-contrast QR for signing in on a
  * second device with the Oxy Accounts app.
  */
-const AnotherDeviceQR: React.FC<AnotherDeviceQRProps> = ({ qrData }) => {
-  const { colors } = useTheme();
+const AnotherDeviceQR: React.FC<AnotherDeviceQRProps> = ({ qrData, qrPayload }) => {
+  const bloomTheme = useTheme();
   const [expanded, setExpanded] = useState(false);
 
   const toggle = useCallback(() => {
     setExpanded((prev) => !prev);
   }, []);
 
-  if (!qrData) {
+  // Prefer the secure handoff payload (public authorize code) over the legacy
+  // token QR; fall back to `qrData` until the handoff backend is available.
+  const value = qrPayload || qrData;
+
+  if (!value) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
+    <View className="w-full items-center">
       <TouchableOpacity
-        style={styles.toggle}
+        className="flex-row items-center justify-center gap-space-8 py-space-12 px-space-8"
         onPress={toggle}
         accessibilityRole="button"
         accessibilityState={{ expanded }}
         accessibilityHint="Reveals a QR code to sign in using the Oxy Accounts app on another device"
       >
-        <Text style={styles.toggleText} className="text-muted-foreground">
+        <Icons.QrCode_Stroke2_Corner0_Rounded
+          size="sm"
+          style={{ color: bloomTheme.colors.textSecondary }}
+        />
+        <Text className="font-sansSemibold text-body text-text-secondary">
           Sign in on another device
         </Text>
-        <Text style={styles.chevron} className="text-muted-foreground">
-          {expanded ? '✕' : '›'}
-        </Text>
+        {expanded ? (
+          <Icons.ChevronTop_Stroke2_Corner0_Rounded
+            size="sm"
+            style={{ color: bloomTheme.colors.textSecondary }}
+          />
+        ) : (
+          <Icons.ChevronRight_Stroke2_Corner0_Rounded
+            size="sm"
+            style={{ color: bloomTheme.colors.textSecondary }}
+          />
+        )}
       </TouchableOpacity>
 
       {expanded && (
-        <View style={styles.body}>
+        <View className="items-center mt-space-8 gap-space-12">
           {/* The QR plate is intentionally white for scan reliability. */}
-          <View style={[styles.qrPlate, { backgroundColor: '#FFFFFF' }]}>
-            <QRCode value={qrData} size={QR_SIZE} backgroundColor="#FFFFFF" color="#000000" />
+          <View style={styles.qrPlate}>
+            <QRCode value={value} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
           </View>
-          <Text style={[styles.hint, { color: colors.textSecondary }]}>
-            Scan with the Oxy Accounts app
+          <Text className="font-sans text-caption text-text-tertiary text-center">
+            Scan with the Oxy app
           </Text>
         </View>
       )}
@@ -73,38 +105,14 @@ const AnotherDeviceQR: React.FC<AnotherDeviceQRProps> = ({ qrData }) => {
   );
 };
 
+// Measured/positioned layout only (no theming): the high-contrast QR plate keeps
+// a fixed white background + padding so the symbol scans reliably regardless of
+// the app theme. This is the single intentional non-token surface in the file.
 const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    alignItems: 'center',
-  },
-  toggle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-  },
-  toggleText: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  chevron: {
-    fontSize: 16,
-    marginLeft: 8,
-  },
-  body: {
-    alignItems: 'center',
-    marginTop: 8,
-  },
   qrPlate: {
     padding: 16,
     borderRadius: 16,
-  },
-  hint: {
-    marginTop: 12,
-    fontSize: 12,
-    textAlign: 'center',
+    backgroundColor: QR_PLATE_BG,
   },
 });
 

package/src/ui/components/BottomSheetRouter.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useCallback, useMemo, type ErrorInfo } from 'react';
-import { BackHandler, View, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { BackHandler, Platform, View, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
 import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, getSheetConfig, isValidRoute } from '../navigation/routes';
@@ -115,6 +115,7 @@ const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, o
     // Android back button
     useEffect(() => {
         if (!isOpen) return;
+        if (Platform.OS !== 'android') return;
         const handler = BackHandler.addEventListener('hardwareBackPress', () => {
             handleGoBack();
             return true;

package/src/ui/components/FollowButton.tsx

@@ -11,8 +11,10 @@ import {
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxyhq/bloom';
 import { useFollow, useFollowForButton } from '../hooks/useFollow';
+import { useFollowStore } from '../stores/followStore';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { OxyServices, BulkFollowResult, BulkUnfollowResult } from '@oxyhq/core';
+import { useShallow } from 'zustand/react/shallow';
 
 const DEFAULT_FOLLOW_ALL_LABEL = 'Follow all';
 const DEFAULT_FOLLOWED_ALL_LABEL = 'Following';
@@ -122,7 +124,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
       {showLoadingState && isLoading ? (
         <ActivityIndicator
           size="small"
-          color={isFollowing ? colors.text : colors.negativeForeground}
+          color={isFollowing ? colors.text : colors.primaryForeground}
         />
       ) : (
         <Text
@@ -138,6 +140,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
 
 const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   userIds,
+  initiallyAllFollowing = false,
   size = 'medium',
   followAllLabel = DEFAULT_FOLLOW_ALL_LABEL,
   followedAllLabel = DEFAULT_FOLLOWED_ALL_LABEL,
@@ -156,11 +159,27 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   const unfollowAllUsers = 'unfollowAllUsers' in follow ? follow.unfollowAllUsers : undefined;
   const isAnyLoading = 'isAnyLoading' in follow ? follow.isAnyLoading : false;
 
+  const initialFollowStatuses = useFollowStore(
+    useShallow((state) => {
+      const statuses: Record<string, boolean | null> = {};
+      for (const uid of userIds) {
+        statuses[uid] = Object.prototype.hasOwnProperty.call(state.followingUsers, uid)
+          ? state.followingUsers[uid]
+          : null;
+      }
+      return statuses;
+    })
+  );
+
+  const hasKnownNotFollowing = userIds.some((uid) => initialFollowStatuses[uid] === false);
+
   // `allFollowing` is store-derived (LIVE aggregate of each target's follow
   // status) — it reacts in real time as individual members are followed or
-  // unfollowed elsewhere. Only `isSubmitting` is transient local state for the
-  // in-flight bulk call.
-  const allFollowing = 'allFollowing' in follow ? follow.allFollowing : false;
+  // unfollowed elsewhere. `initiallyAllFollowing` preserves the public initial
+  // state contract until the store learns that any member is not followed. Only
+  // `isSubmitting` is transient local state for the in-flight bulk call.
+  const storeAllFollowing = 'allFollowing' in follow ? follow.allFollowing : false;
+  const allFollowing = storeAllFollowing || (initiallyAllFollowing && !hasKnownNotFollowing);
   const fetchAllStatuses = 'fetchAllStatuses' in follow ? follow.fetchAllStatuses : undefined;
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -244,7 +263,7 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
       {showLoadingState && isLoading ? (
         <ActivityIndicator
           size="small"
-          color={allFollowing ? colors.text : colors.negativeForeground}
+          color={allFollowing ? colors.text : colors.primaryForeground}
         />
       ) : (
         <Text

package/src/ui/components/OxyProvider.tsx

@@ -1,5 +1,7 @@
 import { lazy, Suspense, useEffect, useRef, useState, type ComponentType, type FC, type ReactNode } from 'react';
 import { AppState, Platform, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider, type OxyContextProviderProps } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
@@ -27,6 +29,9 @@ import { createPlatformStorage, type StorageInterface } from '../utils/storageHe
 const BOOT_BG_COLOR = '#ffffff';
 
 const bootStyles = StyleSheet.create({
+    providerRoot: {
+        flex: 1,
+    },
     bootShell: {
         flex: 1,
         backgroundColor: BOOT_BG_COLOR,
@@ -69,8 +74,9 @@ const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
  * OxyProvider - Universal provider for Expo apps (native + web)
  *
  * Provides authentication, session management, query client, and UI overlays.
- * Does NOT wrap in SafeAreaProvider or GestureHandlerRootView — those are the
- * consuming app's responsibility.
+ * Wraps its own overlay stack in SafeAreaProvider and GestureHandlerRootView so
+ * BottomSheetRouter and SignInModal can safely render even when a consuming app
+ * has not mounted those providers yet.
  *
  * Usage:
  * ```tsx
@@ -276,9 +282,13 @@ const OxyProvider: FC<OxyProviderProps> = ({
     // until children can mount under a real <QueryClientProvider>.
     if (!queryClient) {
         return (
-            <KeyboardWrapper>
-                <View style={bootStyles.bootShell} />
-            </KeyboardWrapper>
+            <GestureHandlerRootView style={bootStyles.providerRoot}>
+                <SafeAreaProvider>
+                    <KeyboardWrapper>
+                        <View style={bootStyles.bootShell} />
+                    </KeyboardWrapper>
+                </SafeAreaProvider>
+            </GestureHandlerRootView>
         );
     }
 
@@ -314,9 +324,13 @@ const OxyProvider: FC<OxyProviderProps> = ({
     );
 
     return (
-        <KeyboardWrapper>
-            {coreContent}
-        </KeyboardWrapper>
+        <GestureHandlerRootView style={bootStyles.providerRoot}>
+            <SafeAreaProvider>
+                <KeyboardWrapper>
+                    {coreContent}
+                </KeyboardWrapper>
+            </SafeAreaProvider>
+        </GestureHandlerRootView>
     );
 };
 

package/src/ui/components/SignInModal.tsx

@@ -103,7 +103,7 @@ const SignInModalContent: React.FC<SignInModalContentProps> = ({
     switchSession,
     clientId,
 }) => {
-    const { qrData, isLoading, error, isWaiting, openAuthApproval, retry } = useOxyAuthSession(
+    const { qrData, qrPayload, isLoading, error, isWaiting, openAuthApproval, openSameDeviceApproval, retry } = useOxyAuthSession(
         oxyServices,
         clientId,
         switchSession,
@@ -192,6 +192,20 @@ const SignInModalContent: React.FC<SignInModalContentProps> = ({
                                 Continue with Oxy
                             </Button>
 
+                            {/* Same-device "Sign in with Oxy" handoff — deep-links into the
+                                native Oxy app to approve. Shown only when the handoff backend
+                                returned a payload. */}
+                            {qrPayload && (
+                                <Button
+                                    variant="secondary"
+                                    onPress={openSameDeviceApproval}
+                                    icon={<OxyLogo variant="icon" size={20} fillColor={theme.colors.text} style={styles.buttonIcon} />}
+                                    style={styles.secondaryButton}
+                                >
+                                    Sign in with the Oxy app
+                                </Button>
+                            )}
+
                             {/* Waiting status */}
                             {isWaiting && (
                                 <View style={styles.statusContainer}>
@@ -204,7 +218,7 @@ const SignInModalContent: React.FC<SignInModalContentProps> = ({
 
                             {/* Collapsed "sign in on another device" QR disclosure */}
                             <View style={styles.qrSection}>
-                                <AnotherDeviceQR qrData={qrData} />
+                                <AnotherDeviceQR qrData={qrData} qrPayload={qrPayload} />
                             </View>
                         </>
                     )}
@@ -274,6 +288,11 @@ const styles = StyleSheet.create({
         width: '100%',
         borderRadius: 12,
     },
+    secondaryButton: {
+        width: '100%',
+        borderRadius: 12,
+        marginTop: 12,
+    },
     buttonIcon: {
         marginRight: 10,
     },

package/src/ui/components/TouchableRipple/TouchableRipple.native.tsx

@@ -28,7 +28,7 @@ export type Props = PressableProps & {
   background?: PressableAndroidRippleConfig;
   centered?: boolean;
   disabled?: boolean;
-  onPress?: (e: GestureResponderEvent) => undefined | null;
+  onPress?: (e: GestureResponderEvent) => void | null;
   onLongPress?: (e: GestureResponderEvent) => void;
   onPressIn?: (e: GestureResponderEvent) => void;
   onPressOut?: (e: GestureResponderEvent) => void;

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -266,8 +266,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
-                            <Text style={fileManagementStyles.downloadButtonText}>Download PDF</Text>
+                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
+                            <Text style={[fileManagementStyles.downloadButtonText, { color: colors.primaryForeground }]}>Download PDF</Text>
                         </TouchableOpacity>
                     </View>
                 ) : isVideo && fileContent ? (
@@ -289,8 +289,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
-                            <Text style={fileManagementStyles.downloadButtonText}>Download Video</Text>
+                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
+                            <Text style={[fileManagementStyles.downloadButtonText, { color: colors.primaryForeground }]}>Download Video</Text>
                         </TouchableOpacity>
                     </View>
                 ) : isAudio && fileContent ? (
@@ -312,8 +312,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
-                            <Text style={fileManagementStyles.downloadButtonText}>Download Audio</Text>
+                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
+                            <Text style={[fileManagementStyles.downloadButtonText, { color: colors.primaryForeground }]}>Download Audio</Text>
                         </TouchableOpacity>
                     </View>
                 ) : (
@@ -335,8 +335,8 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
-                            <Text style={fileManagementStyles.downloadButtonText}>Download File</Text>
+                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
+                            <Text style={[fileManagementStyles.downloadButtonText, { color: colors.primaryForeground }]}>Download File</Text>
                         </TouchableOpacity>
                     </View>
                 )}
@@ -387,7 +387,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                                     }}
                                 >
                                     <MaterialCommunityIcons name="delete" size={16} color={colors.negativeForeground} />
-                                    <Text style={fileManagementStyles.fileDetailsActionText}>Delete</Text>
+                                    <Text style={[fileManagementStyles.fileDetailsActionText, { color: colors.negativeForeground }]}>Delete</Text>
                                 </TouchableOpacity>
                             </View>
                         )}

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -123,8 +123,8 @@ const UploadPreviewContent: React.FC<{
                             style={fileManagementStyles.uploadPreviewConfirmButton}
                             onPress={onConfirm}
                         >
-                            <Ionicons name="cloud-upload" size={20} color={colors.negativeForeground} />
-                            <Text style={fileManagementStyles.uploadPreviewConfirmText}>Upload</Text>
+                            <Ionicons name="cloud-upload" size={20} color={colors.primaryForeground} />
+                            <Text style={[fileManagementStyles.uploadPreviewConfirmText, { color: colors.primaryForeground }]}>Upload</Text>
                         </TouchableOpacity>
                     </View>
                 )}