Search code examples
react-nativeqr-codereact-native-svgreact-native-fs

Set Background to an Image for Save to gallery

I have a qr-code in my react-native project from react-native-qrcode-svg like this:

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  getRef={(c) => (svg = c)}
/>;

I want to save this QR to the gallery! I use this code for saving it to gallery!

svg.toDataURL((data) => {
  RNFS.writeFile(
    RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
    data,
    "base64"
  )
    .then((success) => {
      return CameraRoll.save(
        RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
        "photo"
      );
    })
    .then(() => {
      onClose();
    })
    .catch((e) => {
      console.log("saveToGallery", e);
    });
});

Now I want to save this QR with white background in the gallery!

Because now, I save QR to gallery and gallery show this in black background and scanner does not detect QR-code!!! Is there any solution??

In other words, how to combine two images (white background and QR-code) or how to set a background for this image??

enter image description here

Solution

  • You can simply add quietZone props to QRCode component. This props is the margin around the QR-code and when yo save the QR it is shown!!

    <QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  quietZone={10} // this props
  getRef={c => (svg = c)}
/>