I'm developing a webapp with react native and expo in which I need to be able to scan EAN13 barcodes. I've been using expo's documentation to do this, but I've hit a wall.
As much as I try to get the barcode from a photo, everytime I try to use scanFromURLAsync it throws the following error:
_ExpoCameraManager.default.scanFromURLAsync is not a function At first I thought it might be a deprecated method but in expo's documentation it says that it is in ver52 (which is the one I'm using)
Does anyone know why is this happening and how I might solve it, I leave my code below as well as some clarifications.
- I have already tried importing just scanFromURLAsync directly instead of Camera, it gave the same problem.
- Please ignore all the mistakes I've surely made that have nothing to do with the question, this code is a draft just to see if I can make it work.
- Thank you in advance :)
import { CameraView, useCameraPermissions, BarcodeScanningResult, Camera} from 'expo-camera';
import { useRef, useState } from 'react';
import { Button, Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Image } from "expo-image";
export default function Scaner() {
//const [facing, setFacing] = useState<CameraType>('back');
const ref = useRef<CameraView>(null);
const [permission, requestPermission] = useCameraPermissions();
const [uri, setUri] = useState<string | null>(null);
const [code, setCode] = useState<string>("");
if (!permission) {
// Camera permissions are still loading.
return <View />;
}
if (!permission.granted) {
// Camera permissions are not granted yet.
return (
<View style={styles.container}>
<Text style={styles.message}>We need your permission to show the camera</Text>
<Button onPress={requestPermission} title="grant permission" />
</View>
);
}
const takePicture = async () => {
const photo = await ref.current?.takePictureAsync();
setUri(photo?.uri);
};
const scanBarcode = async () => {
const barcode = await Camera.scanFromURLAsync(uri, ["ean13"]);
if (barcode.length > 0){ setCode(barcode[0]?.data);}
else{
setCode("no");
}
}
const renderPicture = () => {
scanBarcode();
return (
<View>
<Text>The code is: {code}</Text>
<Image
source={{uri}}
contentFit="contain"
style={{width: 300, aspectRatio: 1}}
/>
</View>
);
};
const renderCamera = () => {
return (
<CameraView
style= {styles.camera}
ref={ref}
responsiveOrientationWhenOrientationLocked
barcodeScannerSettings={{
barcodeTypes: ["ean13"]
}}
>
<View style={styles.shutterContainer}>
<Pressable onPress={takePicture}>
{({ pressed }) => (
<View
style={[
styles.shutterBtn,
{
opacity: pressed ? 0.5 : 1,
},
]}
>
<View
style={[
styles.shutterBtnInner,
{
backgroundColor : "white",
},
]}
/>
</View>
)}
</Pressable>
</View>
</CameraView>
);
};
return (
<View style={styles.container}>
{uri ? renderPicture() : renderCamera()}
</View>
);
}
const styles = StyleSheet.create({
message: {
textAlign: 'center',
paddingBottom: 10,
},container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
camera: {
flex: 1,
width: "100%",
},
shutterContainer: {
position: "absolute",
bottom: 44,
left: 0,
width: "100%",
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
paddingHorizontal: 30,
},
shutterBtn: {
backgroundColor: "transparent",
borderWidth: 5,
borderColor: "white",
width: 85,
height: 85,
borderRadius: 45,
alignItems: "center",
justifyContent: "center",
},
shutterBtnInner: {
width: 70,
height: 70,
borderRadius: 50,
},
});```