Is there anyone who has a tutorial or code how to read a qr code in React Native cli that actually works in the current React Native version? I tried so many tutorials and docs and nothing works. It would be nice if it works in tsx.
Use the react-native-qrcode-scanner package in React Native to scan QR codes. Here is an illustration of how you may employ it:
import QRCodeScanner from 'react-native-qrcode-scanner';
const MyQRCodeScanner = () => {
const onSuccess = (e) => {
console.log(e.data);
// e.data contains the QR code data
};
return (
<QRCodeScanner onRead={onSuccess} />
);
};
The best solution is to use https://github.com/mrousavy/react-native-vision-camera because it uses JSI and frame processor for this camera based on ML Kit https://github.com/rodgomesc/vision-camera-code-scanner
import * as React from 'react';
import { StyleSheet, Text } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';
export default function App() {
const [hasPermission, setHasPermission] = React.useState(false);
const devices = useCameraDevices();
const device = devices.back;
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
checkInverted: true,
});
// Alternatively you can use the underlying function:
//
// const frameProcessor = useFrameProcessor((frame) => {
// 'worklet';
// const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true });
// runOnJS(setBarcodes)(detectedBarcodes);
// }, []);
React.useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);
return (
device != null &&
hasPermission && (
<>
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
frameProcessorFps={5}
/>
{barcodes.map((barcode, idx) => (
<Text key={idx} style={styles.barcodeTextURL}>
{barcode.displayValue}
</Text>
))}
</>
)
);
}
const styles = StyleSheet.create({
barcodeTextURL: {
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
});
you can use two libraries for QR Code scanner then add all the permissions
react-native-qrcode-scanner
react-native-camera
Code:
const [barcode, setBarcode] = useState(null);
<View style={styles.screen}>
<View style={styles.caption}>
<Text style={styles.captionTitleText}>QR Code</Text>
</View>
{barcode ? (
<View style={{alignContent: 'center', alignItems: 'center'}}>
<TouchableOpacity
style={{
backgroundColor: 'navy',
borderRadius: 10,
paddingHorizontal: 15,
}}
onPress={() =>
navigation.navigate('Your next screen')
}>
<Text style={styles.rmCameraResultText2}>
Scan Successfully. Tap to fill the Audit.
</Text>
</TouchableOpacity>
</View>
) : (
<RNCamera style={styles.rnCamera} onBarCodeRead={setBarcode} />
)}
<View style={styles.cameraControl}>
<TouchableOpacity style={styles.btn} onPress={() => setBarcode(null)}>
<Text style={styles.btnText}>New QR Scan</Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: '#F2F2FC',
},
saveArea: {
backgroundColor: '#62d1bc',
},
topBar: {
height: 50,
backgroundColor: '#62d1bc',
alignItems: 'center',
justifyContent: 'center',
},
topBarTitleText: {
color: '#ffffff',
fontSize: 20,
},
caption: {
height: 120,
justifyContent: 'center',
alignItems: 'center',
},
captionTitleText: {
color: '#121B0D',
fontSize: 16,
fontWeight: '600',
},
btn: {
width: 240,
borderRadius: 4,
backgroundColor: '#326A81',
paddingHorizontal: 20,
paddingVertical: 10,
marginVertical: 8,
},
btnText: {
fontSize: 18,
color: '#ffffff',
textAlign: 'center',
},
rnCamera: {
flex: 1,
width: '94%',
alignSelf: 'center',
},
rmCameraResult: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eeeeee',
},
rmCameraResultText: {
fontSize: 15,
color: '#326A81',
},
rmCameraResultText2: {
fontSize: 20,
color: 'white',
},
cameraControl: {
height: 180,
justifyContent: 'center',
alignItems: 'center',
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.