How to render an image from React Native Image Picker

Hello

I’m making an app which takes a picture from the phone’s camera, overlays the timestamp as text and a logo as watermark on the picture. And let’s the user store it on their phone.

I’m using react-native-image-picker to access the camera. I get the image and can display it using RN’s Image or ImageBackground components, but can’t seem to display it on the canvas.

Initial Canvas

_initCanvas = (canvas) => {
  let ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 1200;

  let image = new CanvasImage(canvas, 200, 200);
  image.src = this.state.image.path; 

  image.addEventListener('load', () => {
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
    ctx.drawImage(image, 10, 10, 200, 200);
  });
}

Image Picker Response

image: {
  data: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQ",
  fileName: "image-14a74c48-fcf3-4528-bdf1-b7c925acd293.jpg",
  fileSize: 133818,
  height: 600,
  isVertical: true,
  originalRotation: 0,
  path: "/storage/emulated/0/Android/data/com.image_watermark/files/Pictures/image-14a74c48-fcf3- 
  4528-bdf1-b7c925acd293.jpg",
  type: "image/jpeg",
  uri: "file:///storage/emulated/0/Android/data/com.image_watermark/files/Pictures/image-14a74c48- 
  fcf3-4528-bdf1-b7c925acd293.jpg", 
  width: 338,
}

Note The canvas is rendered after the response from react-native-image-picker is added to the state. I have tried ‘uri’, ‘path’ and ‘data’ attributes but always get a blank canvas. I do get the purple rectangle though.

End Result I want to be able to add the picture on canvas. Then add a logo and text over the picture and save it to my mobiles camera roll.

[iddan]

@hzburki there is no progress to be made, it’s a use case needed to be figured out not a bug.

[hzburki]

Any progress ?? I’m kinda on a deadline ?? 😨