react-native-qrcode doesn't fit it's element

user_8526379 0
Viewed 212

I am using 'react-native-qrcode' library and trying to create a QR Code, it seems to be working up until the point I want to make it take 100% of it's own container.

I've tried to:

  • put it in a View, it doesn't work
  • use flex: 1 on the above mentioned View and on the QR Code

NOTE: I had to change the WebView in the node_modules since now it is a separate library.

import React from 'react';
import QRCode from 'react-native-qrcode';

export default function CardDetails({ navigation }) {
    return (
        <QRCode
            value={"Hello World"}
            size={250}
        />
    )
}

QR code will won't take up 100%

react-native android-studio android-emulator qr-code
1 Answers

The problem originates from the QRCode library. This is the code from the library. If I change the canvas -> context -> size to size * 4 it is will always cover the whole white space and will fit / dynamically change whenever I pass another size.

P.S. still trying to figure it out why x4 is the solution.

return (
            <View>
                <Canvas
                    context={{
                        size: size,
                        value: this.props.value,
                        bgColor: this.props.bgColor,
                        fgColor: this.props.fgColor,
                        cells: qr(value).modules,
                    }}
                    render={renderCanvas}
                    onLoad={this.props.onLoad}
                    onLoadEnd={this.props.onLoadEnd}
                    style={{height: size, width: size}}
                />
            </View>
        );

enter image description here

user_85263790
Related