5.8 C
New York
Monday, December 9, 2024

javascript – Why does my Expo-Digital camera operate not open for my app in Expo Go?


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.
        
        
  );
}

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"

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles