import { SafeAreaView } from "react-native-safe-area-context"; import { Button, Colors, Dialog, LoaderScreen, Text, View, } from "react-native-ui-lib"; import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "expo-router"; import QRIcon from "@/assets/svgs/QRIcon"; import { Camera, CameraView } from "expo-camera"; import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode"; import { useAuthContext } from "@/contexts/AuthContext"; import debounce from "debounce"; import * as Device from "expo-device"; import { DeviceType } from "expo-device"; import { Dimensions } from "react-native"; export default function Screen() { const router = useRouter(); const { setRedirectOverride } = useAuthContext(); const [hasPermission, setHasPermission] = useState(null); const [showCameraDialog, setShowCameraDialog] = useState(false); const isTablet: boolean = Device.deviceType === DeviceType.TABLET; const [isPortrait, setIsPortrait] = useState(() => { const dim = Dimensions.get('screen'); return dim.height >= dim.width; }); useEffect(() => { const subscription = Dimensions.addEventListener('change', ({ screen }) => { setIsPortrait(screen.height >= screen.width); }); return () => subscription.remove(); }, []); const getTopPadding = () => { if (Device.deviceType === DeviceType.TABLET) { return isPortrait ? "50%" : "15%"; } return "20%"; // non-tablet case, regardless of orientation }; const { mutateAsync: signInWithQrCode, isLoading } = useLoginWithQrCode(); const debouncedRouterReplace = useCallback( debounce(() => { router.push("/(unauth)/birthday_page"); }, 300), [] ); const handleQrCodeScanned = async ({ data }: { data: string }) => { setShowCameraDialog(false); setRedirectOverride(true); try { await signInWithQrCode({ userId: data }); debouncedRouterReplace(); } catch (err) { console.log(err); } }; const getCameraPermissions = async (callback: () => void) => { const { status } = await Camera.requestCameraPermissionsAsync(); setHasPermission(status === "granted"); if (status === "granted") { callback(); } }; const handleOpenQrCodeDialog = () => { getCameraPermissions(() => setShowCameraDialog(true)); }; return ( Get started with Cally