Unhandled Promise Reject: No such file or directory

[Miyaguisan]

• Record video with react-native-camera (it records ok)
• Verify that file exists with RNFetchBlob (it does, looks like file://...)
• This library will send error "No such file or directory" despite that RNFetchBlob confirms the file exists and it's readable.

[mrrenjithnair]

Same issue is there in my case. Please help me in this

[mayurpatil888]

Facing same issue.. Need help ASAP.

[ericdevries]

Does this happen on android only? On android, you can just use the <Image> component for rendering video thumbnails. This package seems to work only on iOS where it is actually needed because the <Image> component does not render video thumbnails

[flaming-codes]

It's probably how you handle the the URIs in your app. This a working example in a project I'm working on:

import RNVideoThumb from "react-native-thumbnail";
import fs from "react-native-fs";

// ...

async function createVideoItem(tempUri){
  // Get file's suffix.
  // 'tempUri' is a uri returned from react-native-camera
  const type = tempUri.substring(tempUri.lastIndexOf(".") + 1);

  // Create a persistent directory for our video as the provided
  // path by RNCamera is only a temporary cache.
  // 'id' is a simple UID as an example here.
  const id = `${Date.now()}`
  const fileUri = `${fs.DocumentDirectoryPath}/${id}.${type}`;

  // Copy the video now.
  await fs.copyFile(tempUri, fileUri);

  // Handle the thumbnail's creation + storing.
  // We use the newly created, persistent 'fileUri' as source, as
  // this is where our video is now stored, with the file-prefix.
  // Note that we also extract the thumb's image-type to avoid
  // a hardcoded suffix.
  const thumbResult = await RNVideoThumb.get(`file://${fileUri}`);
  const thumbType = thumbResult.path.substring(thumbResult.path.lastIndexOf(".") + 1);

  // Using '_thumb' in the path to distinguish from the video-file.
  const thumbUri = `${fs.DocumentDirectoryPath}/${id}_thumb.${thumbType}`;

  // Now copy the thumbnail image.
  await fs.copyFile(thumbResult.path, thumbUri);

  // Now create an object for later use (e.g. storing in DB).
  const videoItem = {
    id,
    fileUri: `file://${fileUri}`,
    thumbUri: `file://${thumbUri}`,
    createdAt: new Date(),
  };

  return videoItem;
}

[flaming-codes]

I forgot to mention that you may also need the permission on Android (typescript example):

import { PermissionsAndroid } from "react-native";

/*
 *
 * Types.
 *
 */

export type permissionDialog = {
  title: string;
  message: string;
  buttonNeutral?: string;
  buttonNegative?: string;
  buttonPositive?: string;
};

/*
 *
 * Functions.
 *
 */

export async function isPermissionGrantedOnAndroid(permission: Permission, dialog: permissionDialog) {
  const status = await PermissionsAndroid.request(permission, {
    title: dialog.title,
    message: dialog.title,
    buttonNeutral: dialog.buttonNeutral || "Ask Me Later",
    buttonNegative: dialog.buttonNegative || "Don't allow",
    buttonPositive: dialog.buttonPositive || "OK"
  });

  console.log("status", status, "dialog:", dialog);
  return status === PermissionsAndroid.RESULTS.GRANTED;
}

// ...later...

await isPermissionGrantedOnAndroid(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, {
      title: "Media Library Permission",
      message: "App needs the permission to access your camera storage"
    });

 await isPermissionGrantedOnAndroid(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, {
      title: "Media Library Permission",
      message: "App needs the permission to access your camera storage"
    });