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

Question

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 1

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
/>

Answer 2

So, I was using the @YPCrumble answer for some time.

But now I have to save the image in my camera roll.

If anyone want to continue saving in camera roll, you have to manually link RTCCameraRoll library.

Documentation to link library here:

https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking

It is so simple:

You can find the RCTImage.xcodeproj in your node_modules/react-native/Libraries/CameraRoll

Drag and drop this file inside Libraries folder in your XCode project.

After that, click in your main project, and find in the right pane "Build Phases".

Inside "Link Binary With Libraries", drag and drop the file called "libRCTCameraRoll.a" from left pane -> Libraries -> RTCCameraRoll.xcodeproj -> Products