diff --git a/apps/mobile/src/components/QRCode.tsx b/apps/mobile/src/components/QRCode.tsx new file mode 100644 index 0000000..098ded5 --- /dev/null +++ b/apps/mobile/src/components/QRCode.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import QRCode from 'react-native-qrcode-svg'; + +interface QRCodeProps { + value: string; + size?: number; + logo?: string; +} + +export const QRCodeGenerator: React.FC = ({ + value, + size = 250 +}) => { + return ( + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 16, + }, + qrWrapper: { + padding: 16, + backgroundColor: 'white', + borderRadius: 12, + elevation: 5, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + }, +}); diff --git a/apps/mobile/src/components/QRScanner.tsx b/apps/mobile/src/components/QRScanner.tsx new file mode 100644 index 0000000..d9fa9f0 --- /dev/null +++ b/apps/mobile/src/components/QRScanner.tsx @@ -0,0 +1,92 @@ +import React, { useState, useEffect } from 'react'; +import { View, Text, StyleSheet, Button, Alert } from 'react-native'; +import { BarCodeScanner } from 'expo-barcode-scanner'; + +interface QRScannerProps { + onScan: (data: string) => void; + onClose?: () => void; +} + +export const QRScanner: React.FC = ({ onScan, onClose }) => { + const [hasPermission, setHasPermission] = useState(null); + const [scanned, setScanned] = useState(false); + + useEffect(() => { + const getBarCodeScannerPermissions = async () => { + const { status } = await BarCodeScanner.requestPermissionsAsync(); + setHasPermission(status === 'granted'); + }; + + getBarCodeScannerPermissions(); + }, []); + + const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => { + setScanned(true); + onScan(data); + Alert.alert('QR Code', `Scanned: ${data}`, [ + { text: 'OK', onPress: () => setScanned(false) }, + ]); + }; + + if (hasPermission === null) { + return ( + + Requesting for camera permission... + + ); + } + + if (hasPermission === false) { + return ( + + No access to camera + {onClose &&