Expensify / react-native-qrcode-svg

A QR Code generator for React Native based on react-native-svg and node-qrcode.
MIT License
1.07k stars 217 forks source link

`toDataUrl()` function outputs base64 string w/ newlines #183

Open go-sean-go opened 1 year ago

go-sean-go commented 1 year ago

base64 images with newlines will not work in some situations (many? most? all?), e.g. the React Native Share() library won't accept it properly as a url param.

FAILURE CASE

      <QRCode
        getRef={c => {
          if (!c?.toDataURL) return;
          c?.toDataURL((base64Image: string) => {
            base64QrCodeRef.current = base64Image;
          });
        }}
        value={url}
        logo={logoUri}
        size={QR_CODE_SIZE}
        logoSize={QR_CODE_SIZE * 0.38}
        ecl="H"
      />

SUCCESS CASE via https://github.com/react-native-share/react-native-share/issues/1393#issuecomment-1568365217

      <QRCode
        getRef={c => {
          if (!c?.toDataURL) return;
          c?.toDataURL((base64Image: string) => {
            // must strip whitespace due to 'bug' in QR code library
            // see https://github.com/react-native-share/react-native-share/issues/1393#issuecomment-1568365217
            base64QrCodeRef.current = base64Image.replace(/(\r\n|\n|\r)/gm, '');
          });
        }}
        {...rest}
      />

Proposed fix: Strip newlines from base64 output, i.e. append .replace(/(\r\n|\n|\r)/gm, '') to the return value of toDataURL().

hryjosn commented 1 year ago

I had the same issue. @go-sean-go Thanks for saving my day!