CODEWITHSUNDEEP
androidreact-nativereact-native-camera
John Henry
John Henry

Reputation: 313

`react-native-camera` returns a data.uri but image cannot be accessed (no such file or directory)

I would appreciate any help on this. I'm using react-native-camera and when I get the URI of the image taken using takePictureAsync() method, I can't access that image.

I took the photo and navigate to the next screen, passing the image data as the params:

  const data = await this.camera.takePictureAsync(options);
  console.log(data);
  this.props.navigation.navigate('FFV', {
    postItem: data.uri
  });

In the next screen (FFV) I am loading the photo into <Image/> ,it works if I pass the base64 of the image, but doesn't work if I just pass the URI. 

<Image style={styles.imagePreview}
          source={{ isStatic:true, uri: postItem }}
          resizeMode="contain"
 />

The image doesn't render and if I try to save the file using CameraRoll, I get "No such file or directory".

First the image data is printed out, second is the error accessing the file

I've tested on the emulator and on physical device - same problem. It doesn't seem to be related to WRITE_EXTERNAL_STORAGE permission, because after I granted the permissions, the ENOENT error occurs.

I check the cache of the app on the phone, and it doesn't have those files, does it mean it's not writing it? If there were issues with the RNCamera I would think the URI wouldn't be returned successfully.

"react-native": "0.57.1",
"react-native-camera": "^1.3.0",

Any help would be much appreciated!

Upvotes: 1

Views: 4401

Answers (2)

Bj&#248;rn Egil
Bj&#248;rn Egil

Reputation: 2458

You should remove any file:// prefix of the file, e.g.:

    const uri = data.uri.startsWith('file://')
              ? data.uri.substr('file://'.length)
              : data.uri;

Upvotes: 0

rolz
rolz

Reputation: 80

I encountered the same problem and end up by using this CameraRoll.saveToCameraRoll(data.uri).

Upvotes: 1

Related Questions