Open
Description
`
const ScannerModal = (props: ScannerModalProps) => {
const {width, height} = useWindowDimensions();
const [isTorchOn, setIsTorchOn] = useState(false);
const [initialCamera, setInitialCamera] = useMMKVString("camera") as unknown as string;
const [cameraPosition, setCameraPosition] = useState<string>(initialCamera ? initialCamera : 'front');
const device = useCameraDevice(cameraPosition as CameraPosition);
const time = useRef();
useEffect(() => {
if(props.isOpen){
time.current = setTimeout(()=>{
props.onClose();
}, 1000*60*2);
} else {
if(time.current){
clearTimeout(time.current)
}
}
}, [props.isOpen]);
const handlePress = async () => {
Torch.setEnabledState(true);
console.log("state", await Torch.getEnabledState())
setIsTorchOn(!isTorchOn);
};
const codeScanner = useCodeScanner({
codeTypes: ['qr', 'ean-13'],
onCodeScanned: (codes) => {
props.onClose();
Vibration.vibrate(50);
props.onScan(codes[0].value);
console.log(`Scanned ${codes.length} codes!`);
}
})
return (
<Modal
onRequestClose={()=> props.onClose()}
animationType={"slide"} statusBarTranslucent={true} visible={props.isOpen}>
<SafeArea className={"flex flex-1"}>
<View className={"flex flex-1 items-center justify-center"}>
{
device === null &&
<Text className={"mb-2 text-xl font-bold"}>A câmera não está disponível</Text>
}
{
device !== null &&
<Fragment>
<Camera
style={{
width: width,
height: height,
}}
codeScanner={codeScanner}
device={device}
audio={false}
isActive={props.isOpen}
/>
<View className={"absolute"}>
<View className={"border-4 border-primary w-full h-[200px]"} />
<Text className={"text-white mt-3 mb-2 text-xl font-bold"}>Aponta a câmera para o código QR</Text>
<View className={"flex flex-row gap-2 items-center justify-between mt-5"}>
<Button
icon={<Iconify size={30} icon={"material-symbols:close"} color={"#fff"} />}
color={"danger"} className={"mt-2"}
onPress={()=> props.onClose()} />
<Iconify
onPress={()=> setCameraPosition(cameraPosition === "front" ? "back" : "front")}
icon={"material-symbols-light:flip-camera-android"} size={37} color={"#fff"} />
{
isTorchOn ?
<Iconify onPress={handlePress} icon={"mdi:flash"} size={37} color={"#fff"} />
:
<Iconify onPress={handlePress} icon={"mdi:flash-outline"} size={37} color={"#fff"} />
}
</View>
</View>
</Fragment>
}
</View>
</SafeArea>
</Modal>
);
};
`
Metadata
Metadata
Assignees
Labels
No labels