React Native QR Code Scanner

Create QR Scanner with react native

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning

This medium will be useful for developers to create QR code scanner with react native

follow in Medium and use the npm:

yarn add react-native-reanimated

//plugin: 
yarn add vision-camera-code-scanner

yarn add react-native-vision-camera

import { StyleSheet, Text, View } from 'react-native'
import { StyleSheet, Text, View } from 'react-native'
import React, { useCallback, useEffect, useRef } from 'react'

import { useSelector } from 'react-redux'
import { RootState } from '../../../redux/store'
import { withTiming } from 'react-native-reanimated'
import { PAGE_HEIGHT, PAGE_WIDTH } from '../../Style/stylesheet'
import { Camera, useCameraDevices } from 'react-native-vision-camera'
import { useIsFocused, useNavigation } from '@react-navigation/native'
import { BarcodeFormat, useScanBarcodes } from 'vision-camera-code-scanner'
import Animated, { useAnimatedStyle, useSharedValue, withRepeat } from 'react-native-reanimated'
const QrScanner = () => {
    /**
     * Camera permission check
     */
    const [hasPermission, setHasPermission] = React.useState(false);
    const [dataSet, setdataSet] = React.useState({});
    const devices = useCameraDevices()
    const device = devices.back
    const isFocus =useIsFocused()
    const transalteY = useSharedValue(500);
    const Theme = useSelector((state: RootState) => state.theme.theme);
    /**
     * VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning
     */
    const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.ALL_FORMATS], {
        checkInverted: true,
    });

    useEffect(() => {
        (async () => {
            const status = await Camera.requestCameraPermission();
            setHasPermission(status === 'authorized');
        })();
    }, []);
    /**
     * Animation
     */
    const AnimatedScaning = useAnimatedStyle(() => ({
        transform: [{ translateY: transalteY.value }]
    }))

    useEffect(() => {
        /**
         * @param
         * withRepeat();
         * animation: T,
            numberOfReps?: number,
            reverse?: boolean,
         */
        transalteY.value = withRepeat(withTiming(-transalteY.value, { duration: 2000 }), 5, true)
       
    }, []);
   
    return (
        device != null &&
        hasPermission && (
            <View style={{ justifyContent: 'center', flex: 1 }}>
                <Camera
                    style={StyleSheet.absoluteFillObject}
                    collapsable
                    device={device}
                    isActive={true}
                    frameProcessor={frameProcessor}
                    frameProcessorFps={5}
                    focusable={true}
                    photo={true}
                />
                <View style={{ borderWidth: StyleSheet.hairlineWidth, borderColor: 'white', width: 250, height: 250, alignSelf: 'center', backgroundColor: Theme.whiteOpacity, overflow: 'hidden' }} >
                    <Animated.View style={[{ borderWidth: StyleSheet.hairlineWidth, borderColor: 'white' }, AnimatedScaning]} />
                </View>
                {barcodes.map((barcode, idx) => (
                    <View style={styles.barCodeTextView}>
                        <Text key={idx} style={styles.barcodeTextURL}>
                            {barcode.displayValue}
                        </Text>
                    </View>
                ))}
            </View>
        )
    )
}

export default QrScanner

const styles = StyleSheet.create({
    barcodeTextURL: {
        fontSize: 10,
        color: 'white',
        fontWeight: 'bold',

    },
barCodeTextView:{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row', padding: 15, backgroundColor: 'red', top: PAGE_HEIGHT / 2, borderWidth: StyleSheet.hairlineWidth, position: 'absolute', top: 50 }
})

happy coding… ;)