how to auto size

[sweetyguazi]

I want the QR code size to automatically change with parameters such as content, error correction level, and code width, rather than fixed size. What should I do？

[snoodleboot]

I have the same exact use case here. Specifically these situations

1. SafeArea
2. When a bounding container has Max Width expand to that size
3. Reactively shring when screen shrinks - preferrably to a min width as well

[sweetyguazi]

I have the same exact use case here. Specifically these situations

1. SafeArea
2. When a bounding container has Max Width expand to that size
3. Reactively shring when screen shrinks - preferrably to a min width as well

I don't understand what you're saying. What I mean is that I want the size of the QR code to automatically increase as the content increases, but the size of the QR code generated by this component is fixed

[jefawks3]

@sweetyguazi I had the same issue. I ended up not using this package and used the SvgXml component from the react-native-svg package directly with the output from the qrcode toString method.

For instance:

import {useEffect, useState} from 'react';
import {SvgXml} from 'react-native-svg';
import QRCode from 'qrcode';

export default ({data}) => {
  const [svgXml, setSvgXml] = useState();

  useEffect(() => {
    QRCode.toString(data, {type: 'svg' /* other options */ })
      .then(setSvgXml)
      .catch(error => {
        console.error('Unable to render SVG Code', error);
        // Do something with the error
      });
  }, [data]);

  return svgXml ? <SvgXml xml={svgXml} width="100%" height="100%" /> : null /* ActivityIndicator? */;
}

The only downside is that you'll have to handle the logo yourself. I didn't need the logo yet, so I haven't tried implementing this myself. However, if I had to take a stab at implementing it, this is what I would do: I would nest the QRCode SVG inside a root SVG with a predefined view box and nest the logo inside the root, centering the logo to the root SVG and not the QRCode SVG.

Hope this helps.

[vlack-coder]

@jefawks3 , this gave it an extra padding....🤷🏽‍♀️