How to set a fixed width and height for QR code

[alecdewitz]

If I want to set a fixed width for a dynamic QR code, how would I do that?

If the data is smaller than my set width and height, it doesn't fill the whole container and scale up. On the flip side, if my data is larger, it goes outside the bounds of the container.

How would I achieve this?

• Too small

• Too big

[tokkozhin]

There is no such possibility yet, but for now you can use useQRCodeData to get qrCodeSize and calculate pieseSize

[Vinod-Mane3021]

first get the height and width of screen const deviceWidth = Dimensions.get('screen').width; const deviceHeight = Dimensions.get('screen').height;

according to that add heigh and width for qr code

this may fix you issue

[phgn0]

Okay this is how I implemented a dynamic height / width:

export default function QRCode({ link }: { link: string }) {
    const [width, setWidth] = useState<number>(0);
    const padding = 16;
    const data = useQRCodeData(link, {});

    return (
        <View
            onLayout={(event) => {
                const { width } = event.nativeEvent.layout;
                setWidth(width);
            }}
        >
            <QRCodeStyled
                // See https://github.com/tokkozhin/react-native-qrcode-styled
                data={link}
                pieceSize={(width - 2 * padding) / data.qrCodeSize}
                pieceScale={1.02} // fix small gap between pieces
            />
        </View>
    );
}

[ibrahim-ytl]

Are there any plan to support size props in the future? @tokkozhin