I’m trying to open a camera as part of my app. I am using Expo Go to open this app on my IOS device, coded using React Native. However, I get this error:

(NOBRIDGE) ERROR  Warning: TypeError: _expoCamera.Camera.useCameraPermissions is not a function (it is undefined)

This is CameraScreen.js.

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

export default function CameraScreen() {
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    if (!permission) {
      requestPermission(); // Request permissions on mount if not granted
    }
  }, [permission]);

  if (!permission) {
    // Permissions are still loading
    return <View style={styles.container}><Text>Loading...</Text></View>;
  }

  if (!permission.granted) {
    // Permission is not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>
          We need your permission to access the camera.
        </Text>
        <Button onPress={requestPermission} title="Grant Permission" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={cameraType} />
      <Button
        title="Switch Camera"
        onPress={() =>
          setCameraType((prev) =>
            prev === Camera.Constants.Type.back
              ? Camera.Constants.Type.front
              : Camera.Constants.Type.back
          )
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  camera: {
    flex: 1,
    width: '100%',
  },
});

I have these permissions in package.json.

    },
    "ios": {
      "supportsTablet": true,
      "newArchEnabled": true,
      "infoPlist": {
        "NSCameraUsageDescription": "We need access to your camera to take photos."
      }
    },
    "android": {
      "newArchEnabled": true,
      "adaptiveIcon": {
        "foregroundImage": "./assets/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 must also be modified correctly so I have included it below in case.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["module:react-native-dotenv"],  // Use "module:react-native-dotenv"
  };
};

If relevant, these are the relevant parts of the code for my HomePage.js and App.js:

    <TouchableOpacity style={styles.cameraButton} onPress={openCamera}>
        <Text style={styles.cameraButtonText}>+</Text>
      </TouchableOpacity>
      <TouchableOpacity

  <Stack.Screen name="Camera" component={CameraScreen} options={{ title: 'Camera' }} />

Appreciate your clarifications.

Edited to add dependencies if the issue is there, which I personally suspect is the case. Perhaps I am using the wrong versions or versions that are not compatible with each other?

  "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"