141 lines
4.5 KiB
TypeScript
141 lines
4.5 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
View,
|
|
ScrollView,
|
|
Pressable,
|
|
Platform,
|
|
Dimensions,
|
|
StyleSheet,
|
|
} from "react-native";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { X, Zap, Camera as CameraIcon } from "@/lib/icons";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { CameraView, useCameraPermissions } from "expo-camera";
|
|
import { router, useNavigation } from "expo-router";
|
|
|
|
const { width } = Dimensions.get("window");
|
|
|
|
export default function ScanScreen() {
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
const [torch, setTorch] = useState(false);
|
|
const navigation = useNavigation();
|
|
const NAV_BG = "#ffffff";
|
|
|
|
// Hide tab bar when on this screen (since it's a dedicated camera view)
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
tabBarStyle: {
|
|
display: "none",
|
|
},
|
|
});
|
|
return () => {
|
|
navigation.setOptions({
|
|
tabBarStyle: {
|
|
display: "flex",
|
|
backgroundColor: NAV_BG,
|
|
borderTopWidth: 0,
|
|
elevation: 10,
|
|
height: 75,
|
|
paddingBottom: Platform.OS === "ios" ? 30 : 10,
|
|
paddingTop: 10,
|
|
marginHorizontal: 20,
|
|
position: "absolute",
|
|
bottom: 25,
|
|
left: 20,
|
|
right: 20,
|
|
borderRadius: 32,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 20,
|
|
},
|
|
});
|
|
};
|
|
}, [navigation]);
|
|
|
|
if (!permission) {
|
|
// Camera permissions are still loading.
|
|
return <View className="flex-1 bg-black" />;
|
|
}
|
|
|
|
if (!permission.granted) {
|
|
// Camera permissions are not granted yet.
|
|
return (
|
|
<ScreenWrapper className="bg-background items-center justify-center p-10">
|
|
<View className="bg-primary/10 p-6 rounded-[24px] mb-6">
|
|
<CameraIcon className="text-primary" size={48} strokeWidth={1.5} />
|
|
</View>
|
|
<Text variant="h2" className="text-center mb-2">
|
|
Camera Access
|
|
</Text>
|
|
<Text variant="muted" className="text-center mb-10 leading-6">
|
|
We need your permission to use the camera to scan invoices and
|
|
receipts automatically.
|
|
</Text>
|
|
<Button
|
|
className="w-full h-14 rounded-[12px] bg-primary"
|
|
onPress={requestPermission}
|
|
>
|
|
<Text className="text-white font-bold uppercase tracking-widest">
|
|
Enable Camera
|
|
</Text>
|
|
</Button>
|
|
<Pressable onPress={() => router.back()} className="mt-6">
|
|
<Text className="text-muted-foreground font-bold">Go Back</Text>
|
|
</Pressable>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View className="flex-1 bg-black">
|
|
<CameraView
|
|
style={StyleSheet.absoluteFill}
|
|
facing="back"
|
|
enableTorch={torch}
|
|
>
|
|
<View className="flex-1 justify-between p-10 pt-16">
|
|
<View className="flex-row justify-between items-center">
|
|
<Pressable
|
|
onPress={() => setTorch(!torch)}
|
|
className={`h-12 w-12 rounded-full items-center justify-center border border-white/20 ${torch ? "bg-primary" : "bg-black/40"}`}
|
|
>
|
|
<Zap
|
|
color="white"
|
|
size={20}
|
|
fill={torch ? "white" : "transparent"}
|
|
/>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
onPress={() => navigation.goBack()}
|
|
className="h-12 w-12 rounded-full bg-black/40 items-center justify-center border border-white/20"
|
|
>
|
|
<X color="white" size={24} />
|
|
</Pressable>
|
|
</View>
|
|
|
|
<View className="items-center">
|
|
{/* Scanning Frame */}
|
|
<View className="w-72 h-72 border-2 border-primary rounded-3xl border-dashed opacity-50 items-center justify-center">
|
|
<View className="w-64 h-64 border border-white/10 rounded-2xl" />
|
|
</View>
|
|
<Text className="text-white font-bold mt-8 uppercase tracking-[3px] text-xs">
|
|
Align Invoice
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="items-center pb-10">
|
|
<View className="bg-black/40 px-6 py-3 rounded-full border border-white/10">
|
|
<Text className="text-white/60 text-[10px] font-black uppercase tracking-widest">
|
|
AI Auto-detecting...
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CameraView>
|
|
</View>
|
|
);
|
|
}
|