Set Background to an Image for Save to gallery-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Please try below

import React, { useRef } from 'react';
import { SafeAreaView, Text, TouchableOpacity, Dimensions } from 'react-native';
import QRCode from 'react-native-qrcode-svg';

const { height, width } = Dimensions.get('window');

const App = () => {
  const ref = useRef();

  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <QRCode
        value="http://awesome.link.qr"
        backgroundColor="white"
        getRef={ref}
        size={width}
      />
    </SafeAreaView>
  );
};

export default App;