QR code scanning with Expo v.51 is not working

Question

While trying to use expo-camera with the latest Expo version 51 in a react native project and Android , it seems that there is no ability to scan any kind of code. While turning my camera to a QR code, literally nothing happens. I use the code below:

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';

import Screen from './Screen';
import TextHyperlink from '../components/TextHyperlink';

function ScannerScreen() {
    const [scanned, setScanned] = useState(false);
    const [result, setResult] = useState(null);
    const [permission, requestPermission] = useCameraPermissions();

    if (!permission) {
        return <View />;
    }

    if (!permission.granted) {
        return (
            <View style={styles.container}>
                <Text style={{ textAlign: 'center' }}>
                    We need your permission to show the camera
                </Text>
                <Button onPress={requestPermission} title='grant permission' />
            </View>
        );
    }

    const handleBarCodeScanned = ({ data }) => {
        if (data) {
            setScanned(true);
            setResult(data);
        }
    };

    const handleResult = () => {
        if (!result) return null;

        if (result.startsWith('http')) {
            return (
                <TextHyperlink
                    style={styles.resultlink}
                    text={result}
                    url={result}
                />
            );
        } else {
            return <Text style={styles.resulttext}>{result}</Text>;
        }
    };

    return (
        <Screen>
            <View style={styles.camerabox}>
                <CameraView
                    barcodeScannerSettings={{
                        barcodeTypes: [
                            'aztec',
                            'ean13',
                            'ean8',
                            'qr',
                            'pdf417',
                            'upc_e',
                            'datamatrix',
                            'code39',
                            'code93',
                            'itf14',
                            'codabar',
                            'code128',
                            'upc_a',
                        ],
                    }}
                    onBarCodeScanned={
                        scanned ? undefined : handleBarCodeScanned
                    }
                    style={StyleSheet.absoluteFillObject}
                />
                {scanned && (
                    <Button
                        title={'Tap to Scan Again'}
                        onPress={() => setScanned(false)}
                    />
                )}
            </View>
            <View style={styles.textbox}>{handleResult()}</View>
        </Screen>
    );
}

const styles = StyleSheet.create({
    camerabox: {
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
    resultlink: {
        color: 'blue',
        flexWrap: 'wrap',
        fontFamily: 'monospace',
        padding: 20,
        textDecorationLine: 'underline',
    },
    resulttext: {
        color: 'white',
        flexWrap: 'wrap',
        fontFamily: 'monospace',
        padding: 20,
    },
    textbox: {
        borderTopColor: 'blue',
        borderTopWidth: 3,
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
        width: '100%',
    },
});

export default ScannerScreen;

Dependencies used:

"expo": "~51.0.21"
"expo-camera": "^15.0.14"
"react-native": "0.74.3"

Expo 51 uses expo-camera with and useCameraPermissions(), instead of and requestCameraPermissionsAsync().

The fact is that my code worked perfectly with Expo 50.

Answer 1

In Expo 51, unlike previous versions, the onBarCodeScanned has been converted to onBarcodeScanned.