NishantRajputRN
98 lines
2.1 KiB
JavaScript
98 lines
2.1 KiB
JavaScript
// components/QRCodeScannerKit.js
|
|
import React, { useEffect } from 'react';
|
|
import {
|
|
View,
|
|
TouchableOpacity,
|
|
Text,
|
|
StyleSheet,
|
|
BackHandler,
|
|
Modal,
|
|
} from 'react-native';
|
|
import { Camera } from 'react-native-camera-kit';
|
|
import { Ionicons } from './icons'; // tumhara icon wrapper
|
|
|
|
function QRCodeScannerKit({ visible, onClose, onQRScanned }) {
|
|
// 🔙 Android hardware back button handle
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
|
|
const backHandler = BackHandler.addEventListener(
|
|
'hardwareBackPress',
|
|
() => {
|
|
onClose && onClose();
|
|
return true;
|
|
}
|
|
);
|
|
|
|
return () => backHandler.remove();
|
|
}, [visible, onClose]);
|
|
|
|
if (!visible) return null;
|
|
|
|
const handleReadCode = (event) => {
|
|
const value = event?.nativeEvent?.codeStringValue ?? '';
|
|
console.log('QR Value:', value);
|
|
if (!value) return;
|
|
|
|
onQRScanned && onQRScanned(value);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
animationType="slide"
|
|
transparent={false}
|
|
onRequestClose={onClose}
|
|
>
|
|
<View style={styles.container}>
|
|
<Camera
|
|
style={styles.camera}
|
|
scanBarcode={true}
|
|
onReadCode={handleReadCode}
|
|
showFrame={true}
|
|
laserColor="red"
|
|
frameColor="white"
|
|
/>
|
|
|
|
{/* Top overlay bar with close button */}
|
|
<View style={styles.topBar}>
|
|
<TouchableOpacity onPress={onClose} style={styles.closeBtn}>
|
|
<Ionicons name="close" size={26} color="#fff" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.title}>Scan QR Code</Text>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#000',
|
|
},
|
|
camera: {
|
|
flex: 1,
|
|
},
|
|
topBar: {
|
|
position: 'absolute',
|
|
top: 40,
|
|
left: 0,
|
|
right: 0,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
},
|
|
closeBtn: {
|
|
padding: 8,
|
|
marginRight: 12,
|
|
},
|
|
title: {
|
|
color: '#fff',
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default QRCodeScannerKit;
|