react-nativeborderqr-codereact-native-stylesheet

React Native how to make border to the corner of the square only like QR code marker

I was trying to make a QR code marker like this pic below.

enter image description here

So I'm wondering how to make those 4 corners instead of a full border marker.

I was currently using react-native-qrcode-scanner.

The default marker is like this:

enter image description here

and here is the code that I have:

<QRCodeScanner
        // containerStyle={{ height: '100%' }}
        // cameraStyle={{ height: '100%' }}
        onRead={handleScan}
        showMarker
        markerStyle={{ borderColor: colors.primary, borderRadius: 20 }}
        cameraProps={{
          captureAudio: false,
          flashMode: RNCamera.Constants.FlashMode.auto,
        }}

But I want to change it to the first image I gave.

Appreciate it if someone could help. Thanks

Solution

  • if it would have been a straight line, it would have been easy by putting border radius. But since its bit different , you can achieve this by using this library :

    RN-svg , where you can provide the xml pattern and it will render acordingly, just you need to position beside the marker, that's it.

    Hopeit helps. feel free for doubts