diff --git a/apps/mobile-app/app/(tabs)/settings/index.tsx b/apps/mobile-app/app/(tabs)/settings/index.tsx index e1cb8cd80..e9ba94ce0 100644 --- a/apps/mobile-app/app/(tabs)/settings/index.tsx +++ b/apps/mobile-app/app/(tabs)/settings/index.tsx @@ -17,6 +17,7 @@ import { InlineSkeletonLoader } from '@/components/ui/InlineSkeletonLoader'; import { TitleContainer } from '@/components/ui/TitleContainer'; import { UsernameDisplay } from '@/components/ui/UsernameDisplay'; import { useApp } from '@/context/AppContext'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; /** * Settings screen. @@ -24,6 +25,7 @@ import { useApp } from '@/context/AppContext'; export default function SettingsScreen() : React.ReactNode { const colors = useColors(); const { t } = useTranslation(); + const insets = useSafeAreaInsets(); const { getAuthMethodDisplayKey, shouldShowAutofillReminder, logout } = useApp(); const { getAutoLockTimeout, getClipboardClearTimeout } = useApp(); const { loadApiUrl, getDisplayUrl } = useApiUrl(); @@ -227,6 +229,22 @@ export default function SettingsScreen() : React.ReactNode { }; const styles = StyleSheet.create({ + fab: { + alignItems: 'center', + backgroundColor: colors.primary, + borderRadius: 28, + bottom: Platform.OS === 'ios' ? insets.bottom + 60 : 16, + elevation: 4, + height: 56, + justifyContent: 'center', + position: 'absolute', + right: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.25, + shadowRadius: 4, + width: 56, + }, scrollContent: { paddingBottom: 80, paddingTop: Platform.OS === 'ios' ? 42 : 16, @@ -479,19 +497,6 @@ export default function SettingsScreen() : React.ReactNode { - router.push('/(tabs)/settings/qr-scanner')} - > - - - - - {t('settings.qrScanner.title')} - - - - router.push('/(tabs)/settings/security')} @@ -524,6 +529,15 @@ export default function SettingsScreen() : React.ReactNode { {t('settings.appVersion', { version: AppInfo.VERSION, url: getDisplayUrl() })} + + {/* Floating Action Button for QR Scanner - shown for testing both options */} + router.push('/(tabs)/settings/qr-scanner')} + activeOpacity={0.8} + > + + ); } \ No newline at end of file diff --git a/apps/mobile-app/app/(tabs)/settings/qr-scanner.tsx b/apps/mobile-app/app/(tabs)/settings/qr-scanner.tsx index ce46a69d3..953e88533 100644 --- a/apps/mobile-app/app/(tabs)/settings/qr-scanner.tsx +++ b/apps/mobile-app/app/(tabs)/settings/qr-scanner.tsx @@ -166,6 +166,10 @@ export default function QRScannerScreen() : React.ReactNode { }, [url, handleBarcodeScanned]); const styles = StyleSheet.create({ + container: { + flex: 1, + paddingHorizontal: 0, + }, camera: { flex: 1, }, @@ -227,7 +231,7 @@ export default function QRScannerScreen() : React.ReactNode { } return ( - +