I'm working on a React Native project using Expo SDK 50 and expo-camera, but I'm encountering the following error:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
The error occurs when rendering the component in my QRScanner.js file. Here’s my implementation:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Camera } from 'expo-camera';
const QRScanner = () => {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};
if (hasPermission === null) {
return <View style={styles.centered}><Text>Requesting for camera permission...</Text></View>;
}
if (hasPermission === false) {
return <View style={styles.centered}><Text>No access to camera</Text></View>;
}
return (
<View style={styles.container}>
<Camera
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
>
{scanned && (
<View style={styles.buttonContainer}>
<Button title="Tap to Scan Again" onPress={() => setScanned(false)} />
</View>
)}
</Camera>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
buttonContainer: { flex: 1, justifyContent: 'flex-end', marginBottom: 50 }
});
export default QRScanner;
my app.json config:
{
"expo": {
"name": "MyApp",
"slug": "my-app",
"plugins": [
"expo-router",
[
"expo-camera",
{
"cameraPermission": "Allow MyApp to access your camera",
"microphonePermission": "Allow MyApp to access your microphone",
"recordAudioAndroid": true
}
]
]
}
}