How do I use a captured image with react-native-camera

YPCrumble picture YPCrumble · Oct 15, 2015 · Viewed 9k times · Source

I can get the react-native-camera module to access the camera and save an image. However, I can't figure out how to display this image to the user.

What I'm trying:

Here I take the picture. This generates what looks to be a .jpg file in assets-library://....

    _takePicture() {
        var self = this;
        this.refs.cam.capture(function(err, data) {
          this.setState({photo: data});
          console.log(err, data);
          // data is "assets-library://asset/asset.JPG?id=########-####-####-####-##########&ext=JPG"
          console.log('just took a picture');
        }); 
    }

However, If I try to render the image:

    render: function() {
      return(
         <Image style={styles.image} source={{uri: this.state.photo}}/>
      );
    }

I get this error:

No suitable image URL loader found for assets-library://asset/asset.JPG?id=.......

How can I take a photo, save it to the current state of my application, and render it?

Answer

YPCrumble picture YPCrumble · Oct 15, 2015

The solution was to enable the save to disk option vs. the save to cameraRoll option:

<Camera
  captureTarget={Camera.constants.CaptureTarget.disk}
  // Rest of Camera options here
/>