react-native-vision-camera save a photo with react-native-fs

Question

I am making a function for saving a photo by react-native-vision-camrea. For that, I am using RNFS from react-native-fs to access the android file path and saving react-native-vision-camera's useRef-Value.

Below is my Code.

function Cam(){
    const devices = useCameraDevices()
    const device = devices.back
    const camera = useRef(null)
    const takePhotoOptions = {
        qualityPrioritization: 'speed',
        flash: 'on'
    }
    const captureHandler = async()=>{
        try{
            if (camera.current == null) throw new Error('Camera Ref is Null');
            console.log('Photo taking ....');

            const data = await camera.current.takePhoto(takePhotoOptions)     
        
           await RNFS.moveFile(`/${data.path}`, `${RNFS.ExternalDirectoryPath}/temp.jpg`)
           .then(()=>console.log("Image Moved",`${data.path}`,'-- to --',`${RNFS.ExternalDirectoryPath}`))

            await RNFS.writeFile(`${RNFS.ExternalDirectoryPath}/temp.jpg`, data, 'ascii')
            .then(()=>console.log("Image wrote",`${data.path}`,'-- to --',`${RNFS.ExternalDirectoryPath}`))
        }catch(err){    
            console.log(err)
        }
    }

    return(<>
    {device != null&&<>
        <Button title='Take a Photo' onPress={()=>captureHandler()}/>
        <View style={{ flex: 1 }}>
            <Camera
                ref={camera}
                style={StyleSheet.absoluteFill}
                device={device}
                photo={true}
                isActive={true}
            />
        </View>
    </>}
    </>)
}

I got permission to CAMERA/WRITE_EXTERNAL_STORAGE.

And available to get data.path and RNFS.ExternalDirectoryPath.

But I could not find the file that I took a picture for saving.

I tried to attempt both moveFile/writeFile functions from RNFS.

Below is the log I got

LOG Photo taking...

LOG Image Moved /data/user/0/com.camera/cache/mrousavy6998557498651783260.jpg -- to -- /storage/emulated/0/Android/data/com.camera/files

LOG Image wrote /data/user/0/com.camera/cache/mrousavy6998557498651783260.jpg -- to -- /storage/emulated/0/Android/data/com.camera/files

Answer 1

From react-native-fs documentation for Android:

Android support is currently limited to only the DocumentDirectory. This maps to the app's files directory.

Try to use DocumentDirectory instead of ExternalDirectoryPath

Answer 2

For me I had to add "file://" in front of the path

      const destinationPath = RNFS.TemporaryDirectoryPath + '/photo.png';
      if (await RNFS.exists(destinationPath)) {
        await RNFS.unlink(destinationPath);
      }
      const photo = await cameraRef.current?.takePhoto({
        qualityPrioritization: 'speed',
      });
      await RNFS.moveFile(photo?.path ?? '', destinationPath);
      const newPhotoUri = 'file://' + destinationPath;

I then later use newPhotoUri:

    await CameraRoll.save(await props.newPhotoUri, {
       type: 'photo',
     });