I am attempting to open a digital camera as a part of my app. I’m utilizing Expo Go to open this app on my IOS gadget, coded utilizing React Native. Nonetheless, I get this error:
(NOBRIDGE) ERROR Warning: TypeError: _expoCamera.Digital camera.useCameraPermissions shouldn't be a operate (it's undefined)
That is CameraScreen.js.
import React, { useState, useEffect } from 'react';
import { StyleSheet, Textual content, View, Button } from 'react-native';
import { Digital camera } from 'expo-camera';
export default operate CameraScreen() {
const [permission, requestPermission] = Digital camera.useCameraPermissions();
const [cameraType, setCameraType] = useState(Digital camera.Constants.Kind.again);
useEffect(() => {
if (!permission) {
requestPermission(); // Request permissions on mount if not granted
}
}, [permission]);
if (!permission) {
// Permissions are nonetheless loading
return Loading... ;
}
if (!permission.granted) {
// Permission shouldn't be granted but
return (
We'd like your permission to entry the digital camera.
);
}
return (
);
}
const kinds = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'middle',
alignItems: 'middle',
padding: 16,
},
digital camera: {
flex: 1,
width: '100%',
},
});
I’ve these permissions in package deal.json.
},
"ios": {
"supportsTablet": true,
"newArchEnabled": true,
"infoPlist": {
"NSCameraUsageDescription": "We'd like entry to your digital camera to take pictures."
}
},
"android": {
"newArchEnabled": true,
"adaptiveIcon": {
"foregroundImage": "./belongings/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"permissions": ["CAMERA"]
},
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
"recordAudioAndroid": true
}
]
From my understanding, the babel.config.js should even be modified appropriately so I’ve included it beneath in case.
module.exports = operate (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["module:react-native-dotenv"], // Use "module:react-native-dotenv"
};
};
If related, these are the related elements of the code for my HomePage.js and App.js:
+
Admire your clarifications.
Edited so as to add dependencies if the difficulty is there, which I personally suspect is the case. Maybe I’m utilizing the flawed variations or variations that aren’t appropriate with one another?
"dependencies": {
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "*",
"@react-navigation/stack": "*",
"@supabase/supabase-js": "^2.46.1",
"axios": "^1.7.9",
"babel-plugin-module-resolver": "^5.0.2",
"expo": "^52.0.17",
"expo-camera": "~16.0.9",
"expo-keep-awake": "^14.0.1",
"expo-status-bar": "~2.0.0",
"glob": "^11.0.0",
"metro-config": "^0.81.0",
"postcss": "^8.4.49",
"react": "18.3.1",
"react-native": "^0.76.3",
"react-native-dotenv": "^3.4.11",
"react-native-gesture-handler": "~2.20.2",
"react-native-paper": "4.9.2",
"react-native-reanimated": "^3.16.3",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-svg": "15.8.0",
"rimraf": "^6.0.1",
"tailwind-rn": "^4.2.0",
"tailwindcss": "^3.4.16"