Hi flocks i use create expo react native project about accessing mobile camera below i will provide my code. it will work fine till last week and i do change in my project like after login in my app camerascreen only apper on screen. but last few days after that change it throw only error i will provide my error IMG below.

Note: the errors are showing in about Camera and Flash in this two things only often to shows.

Help me to occur this error guy

enter image description here

HERE MY FULL CODE ABOUT CAMERASCREEN

/*Camera*/
import React, { useState, useEffect, useRef } from 'react';
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
  Modal,
} from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import { Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';

export default function TakePhoto() {
  //const [hasPermission, setHasPermission] = useState(null);
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [photos, setPhotos] = useState([]);
  const [selectedPhoto, setSelectedPhoto] = useState(null);
  const [deleteConfirmationVisible, setDeleteConfirmationVisible] = useState(false);
  const [galleryOpen, setGalleryOpen] = useState(false);
  const totalPhotosCount = 5;
  const [remainingPhotos, setRemainingPhotos] = useState(totalPhotosCount);
  //const [flashMode, setFlashMode] = useState(Camera.Constants.FlashMode.off);
  const [flash, setFlash] = useState(Camera.Constants.FlashMode.off);
`your text`
  const panRef = useRef(null);
  const cameraRef = useRef(null);

  useEffect(() => {
    if (!permission) {
      // Camera permissions are still loading
      return;
    }
    if (!permission.granted) {
      // Camera permissions are not granted yet
      requestPermission();
    }
  }, [permission, requestPermission]);

  useEffect(() => {
    setRemainingPhotos(totalPhotosCount - photos.filter(photo => !photo.deleted).length);
  }, [photos]);

  const takePicture = async () => {
    if (!cameraRef.current || !permission.granted || remainingPhotos === 0) {
      // Camera not ready or permission not granted
      return;
    }

    try {
      const photo = await cameraRef.current.takePictureAsync();
      setPhotos(prevPhotos => [...prevPhotos, { uri: photo.uri, deleted: false }]);
      setRemainingPhotos(prevCount => prevCount - 1); // Decrease remaining photos count
    } catch (error) {
      console.error('Failed to take picture:', error);
    }
  };

  const toggleFlashMode = () => {
    setFlash(
      flash === Camera.Constants.FlashMode.off
        ? Camera.Constants.FlashMode.on
        : Camera.Constants.FlashMode.off
    );
  };

  const toggleGallery = () => {
    setGalleryOpen(!galleryOpen);
    setSelectedPhoto(null); // Clear selected photo when opening/closing gallery
  };

  const deletePhoto = () => {
    if (!selectedPhoto) {
      return;
    }

    const updatedPhotos = photos.map(photo => {
      if (photo.uri === selectedPhoto.uri) {
        return { ...photo, deleted: true };
      }
      return photo;
    });

    setPhotos(updatedPhotos);
    setDeleteConfirmationVisible(false);
    setSelectedPhoto(null); // Clear selected photo after deletion

    if (updatedPhotos.every(photo => photo.deleted)) {
      setGalleryOpen(false); // Close the gallery menu if all photos are deleted
    }

    setRemainingPhotos(prevCount => Math.min(prevCount + 1, totalPhotosCount));
  };

  const onSwipeGestureEvent = (event) => {
    const { translationX } = event.nativeEvent;
    if (Math.abs(translationX) > 50) {
      const currentIndex = photos.findIndex(photo => photo === selectedPhoto);
      if (translationX > 0 && currentIndex > 0) {
        setSelectedPhoto(photos[currentIndex - 1]); // Swipe right
      } else if (translationX < 0 && currentIndex < photos.length - 1) {
        setSelectedPhoto(photos[currentIndex + 1]); // Swipe left
      }
      panRef.current.setOffset({ x: 0, y: 0 });
    }
  };

  const onSwipeHandlerStateChange = (event) => {
    if (event.nativeEvent.state === State.END) {
      panRef.current.setOffset({ x: 0, y: 0 });
    }
  };

  // const renderCamera = () => {
  //   if (!Permission === null) {
  //     // Camera permissions are still loading
  //     return <View style={styles.container}><Text>Loading...</Text></View>;
  //   }
  //   if (!hasPermission) {
  //     // Camera permissions are not granted
  //     return (
  //       <View style={styles.container}>
  //         <Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
  //         <Button onPress={requestPermission} title="Grant Permission" />
  //       </View>
  //     );
  //   }

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

    const hasPhotos = photos.filter(photo => !photo.deleted).length > 0;

    return (
      <View style={styles.container}>
        <Camera 
          style={styles.camera}
          type={Camera.Constants.Type.back}
          flashMode={flash}
          ref={cameraRef}
        >
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.captureButton} onPress={takePicture}>
              <Text style={styles.captureText}> </Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.galleryButton} onPress={toggleGallery}>
              {hasPhotos && (
                <Image source={{ uri: photos[photos.length - 1].uri }} style={styles.galleryThumbnail} />
              )}
            </TouchableOpacity>
            <TouchableOpacity style={styles.flashButton} onPress={toggleFlashMode}>
              <Ionicons
                name={flash === Camera.Constants.FlashMode.off ? 'flash-off' : 'flash'}
                size={24}
                color="white"
              />
            </TouchableOpacity>
          </View>
        </Camera>
        <View style={styles.remainingPhotosText}>
          <Text style={styles.remainingPhotosText}>
            {totalPhotosCount - remainingPhotos}/{totalPhotosCount} Remaining Photos</Text>
        </View>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      {renderCamera()}
      {photos.length > 0 && (
        <Modal visible={galleryOpen} transparent={true} animationType="fade">
          <View style={styles.galleryContainer}>
            {photos.map((photo, index) => (
              !photo.deleted && (
                <TouchableOpacity
                  key={index}
                  onPress={() => setSelectedPhoto(photo)}
                  style={styles.galleryPhotoContainer}
                >
                  <Image source={{ uri: photo.uri }} style={styles.galleryPhoto} />
                </TouchableOpacity>
              )
            ))}
            <TouchableOpacity style={styles.closeGalleryButton} onPress={() => setGalleryOpen(false)}>
              <Text style={styles.closeGalleryText}>Close Gallery</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      )}
      <Modal visible={!!selectedPhoto} transparent={true} animationType="fade">
        <PanGestureHandler
          onGestureEvent={onSwipeGestureEvent}
          onHandlerStateChange={onSwipeHandlerStateChange}
          ref={panRef}
        >
          <View style={styles.modalContainer}>
            <Image source={{ uri: selectedPhoto?.uri }} style={styles.fullscreenImage} />
            <View style={styles.menuContainer}>
              <TouchableOpacity onPress={() => setSelectedPhoto(null)} style={styles.menuButton}>
                <Ionicons name="arrow-back-outline" size={24} color="white" style={styles.backIcon} />
                <Text style={styles.menuText}>Back</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.menuContainer1}>
              <TouchableOpacity onPress={() => setDeleteConfirmationVisible(true)} style={styles.menuButton1}>
                <Ionicons name="trash-outline" size={24} color="red" style={styles.trashIcon} />
                <Text style={styles.menuText1}>Delete</Text>
              </TouchableOpacity>
            </View>
          </View>
        </PanGestureHandler>
      </Modal>
      <Modal visible={deleteConfirmationVisible} transparent={true} animationType="fade">
        <View style={styles.deleteConfirmationContainer}>
          <View style={styles.deleteConfirmationBox}>
            <Text style={styles.deleteConfirmationText}>Delete 1 item?</Text>
            <View style={styles.deleteConfirmationButtons}>
              <TouchableOpacity
                style={styles.CancelButton}
                title="Cancel"
                onPress={() => setDeleteConfirmationVisible(false)}
              >
                <Text style={styles.TextCancel}>Cancel</Text>
              </TouchableOpacity>
              <View style={{ width: 20 }} />
              <TouchableOpacity
                style={styles.deleteButton}
                title="No"
                onPress={deletePhoto}
              >
                <Text style={styles.TextDelete}>Delete</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
 ....
});