CODEWITHSUNDEEP
react-nativereact-native-camera
Abhinav Singh
Abhinav Singh

Reputation: 8090

How to display Image from camera roll url using react-native-camera?

I use react-native-camera for capturing images and saving them in cameraRoll (CaptureTarget) for iOS devices, on capture I get image path in the following form

"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"

How to use this path to display the image in Image component (from react-native)?

Previously I was using disk as CaptureTarget option, and I was able to show that image url Image component but now the requirements are to save image in camera roll?

Upvotes: 3

Views: 3508

Answers (1)

Abhinav Singh
Abhinav Singh

Reputation: 8090

I have used RNFetchBlob to get base64 from "assets-library://.." url, my capture function is

this.camera.capture()
      .then((data) => {
        // console.log(data);
        RNFetchBlob.fs.readFile(data.path, 'base64')
          .then((base64data) => {
            let base64Image = `data:image/jpeg;base64,${base64data}`;
            this.props.addImagesToUntagged(data.path);
          })

      })

after that i give user some in-app functionality on this base64 data and finally when I need to send this to s3 server, I use axios & RNFetchBlob to send this data.following code gives me signed url for s3

axios.get(ENDPOINT_TO_GET_SIGNED_URL, {params:{'file-name': file.name,'file-type': file.type,"content-type": 'evidence'}})
  .then(function (result) {
    //  console.log(result);
    returnUrl = result.data.url;
    var signedUrl = result.data.signedRequest;
    return uploadFile(file,signedUrl)
  })

and in my uploadFile function i upload images through following code

RNFetchBlob.fetch('PUT', signedUrl,
    {'Content-Type' : file.type},
    RNFetchBlob.wrap(file.uri)
  )
  .then(resolve)

Upvotes: 2

Related Questions