React Native Expo-Camera Gallery Save

Question

Im testing camera for another app. This is boilerplate for camera app which I am debugging. Its my latest version, I have tested diffeerend approaches but with no success.

// Importing necessary modules from React, React Native, and Expo
import React, { useState, useEffect, useRef } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { Camera } from "expo-camera";
import * as MediaLibrary from "expo-media-library";

// Defining the main component of the app
export default function App() {
  // State hooks for managing permissions and recording status
  const [hasPermission, setHasPermission] = useState(null); // Camera permission status
  const [rollPermission, setRollPermission] = useState(null); // Media library (and microphone) permission status
  const [isRecording, setIsRecording] = useState(false); // Video recording status

  // Ref for accessing the camera API
  const cameraRef = useRef(null);

  // Effect hook for requesting necessary permissions on component mount
  useEffect(() => {
    (async () => {
      // Request camera access permission
      const cameraStatus = await Camera.requestCameraPermissionsAsync();
      setHasPermission(cameraStatus.status === "granted");

      // Request media library access permission
      const mediaLibraryStatus = await MediaLibrary.requestPermissionsAsync();
      
      // Request microphone access permission for recording audio with video
      const audioStatus = await Camera.requestMicrophonePermissionsAsync();

      // Update rollPermission based on both media library and audio permissions
      setRollPermission(
        mediaLibraryStatus.status === "granted" &&
          audioStatus.status === "granted"
      );
    })();
  }, []);

  // Function to handle starting and stopping video recording
  const handleVideoRecording = async () => {
    if (cameraRef.current) { // Check if the camera is accessible
      if (isRecording) { // If currently recording, stop recording
        cameraRef.current.stopRecording();
      } else { // If not recording, start recording
        setIsRecording(true);
        const video = await cameraRef.current.recordAsync(); // Start recording and await the video file
        setIsRecording(false); // Update recording status

        // Save the recorded video to the media library
        const asset = await MediaLibrary.createAssetAsync(video.uri);

        // Check if a custom album exists or create it, and add the video asset to it
        const albumName = "MyCustomAlbum"; // Define the custom album name
        let album = await MediaLibrary.getAlbumAsync(albumName); // Check for existing album
        if (!album) {
          // If album doesn't exist, create it and add the video
          album = await MediaLibrary.createAlbumAsync(albumName, asset, false);
        } else {
          // If album exists, add the video to it
          await MediaLibrary.addAssetsToAlbumAsync([asset], album.id, false);
        }

        console.log("Video saved to:", asset.uri, "in album:", albumName); // Log the save location
      }
    }
  };

  // Render views based on permission status
  if (hasPermission === null || rollPermission === null) {
    return <View />; // Render empty view while checking permissions
  }
  if (hasPermission === false || rollPermission === false) {
    // Render text if any permission is denied
    return <Text style={styles.text}>No access to camera or media library</Text>;
  }

  // Main Camera View: shows the camera view and a button to control recording
  return (
    <View style={styles.container}>
      <Camera style={styles.camera} ref={cameraRef} /> {/* Camera component */}
      <Button
        title={isRecording ? "Stop Recording" : "Record Video"} // Button text changes based on recording status
        onPress={handleVideoRecording} // Button press handler
      />
    </View>
  );
}

// StyleSheet for styling the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  camera: {
    width: "100%",
    height: "100%",
  },
  text: {
    fontSize: 18,
    color: "red",
  },
});

Recordings are not saved in a correct gallery folder so I cant see it only find it via computer explorer.

Resolve the problem in a various ways via chat gpt.

I tried differend approaches also deprecated ones.