how to focus the camera to QR code on scan in react native?

Question

I try to scan QR code using react-native-qrcode-scanner or vision-camera-dynamsoft-barcode-reader. its perfectly work on android device but its fails to scan or focus the QR code of size (1cm * 1cm) in iOS device. is any way to improve QR code scanner to scan small QR's (1cm * 1cm) in react native? here is my code ...

import React, { useEffect } from 'react';
import { View, Text, StyleSheet, Alert, TouchableOpacity } from 'react-native';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { DBRConfig, decode, TextResult } from 'vision-camera-dynamsoft-barcode-reader';
import * as REA from 'react-native-reanimated';
import { StatusBar } from '../components/StatusBar'
import { useFocusEffect } from '@react-navigation/native';
import { RootStackParamList } from '../routes/types';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { styles } from '../styles';
import { Body } from '../components/common/Body';

type Props = NativeStackScreenProps<RootStackParamList, 'QRScanner'>
const QRScanner = ({ navigation }: Props) => {
    const [hasPermission, setHasPermission] = React.useState(false);
    const [barcodeResults, setBarcodeResults] = React.useState([] as TextResult[]);
    const [data, setData] = React.useState('');
    const [isActive, setIsActive] = React.useState(true)
    const devices = useCameraDevices();
    const device = devices.back;

    const frameProcessor = useFrameProcessor((frame) => {
        'worklet'
        const config:DBRConfig = {};
        config.template="{\"ImageParameter\":{\"BarcodeFormatIds\":[\"BF_QR_CODE\"],\"Description\":\"\",\"Name\":\"Settings\"},\"Version\":\"3.0\"}"; //scan qrcode only
        const results = decode(frame,config)
        REA.runOnJS(setBarcodeResults)(results);
    }, [])

    useEffect(()=>{
        if(barcodeResults.length > 0){
            if(barcodeResults[0].barcodeFormat === 'QR_CODE'){
                setData(barcodeResults[0].barcodeText);
                Alert.alert('Alert',barcodeResults[0].barcodeText,[
                {
                    text: 'OK',
                    onPress: ()=> setIsActive(true)
                }
                ])
            }
        }
    },[barcodeResults.length > 0])

    useFocusEffect(
        React.useCallback(() => {
            (async () => {
                const status = await Camera.requestCameraPermission();
                setHasPermission(status === 'authorized');
            })();
        }, [])
    )

    return <>
    <StatusBar translucent={true} backgroundColor='#fff' barStyle='dark-content'/>
        <Body >
            <View style={styles.cardContainer}>
                <View style={{ flexDirection:'row', justifyContent:'space-between', width:'100%', paddingVertical:8, alignItems:'flex-end', marginBottom:8 }}>
                    <Text style={styles.pageHeading}>Scan QR Code</Text>
                </View>
                <View style={{ flexGrow:1, width:'100%', justifyContent:'center', alignItems:'center' }}>
                    { device != null &&
                        hasPermission && (
                            <>
                                <Camera
                                    style={{ flexGrow:1 , width:'100%' }}
                                    device={device}
                                    isActive={isActive}
                                    frameProcessor={frameProcessor}
                                    frameProcessorFps={4}
                                />
                            </>
                        )
                    }
                </View>
            </View>
        </Body>
    </>
}


export default QRScanner

how to focus the camera to QR code on scan in react native?

0 Answers0