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

Question

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

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:

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

hello, I am sorry bother you. I also have a problem like you. Do you solve this problem. If you ok, can you share the code. I read the doc but I am no experience React native. I hope you share the code . If you agree my suppose. can you send me the code.My email glistenstar00@gmail.com. Thank you — GlistenSTAR, Feb 16 '21 at 18:24

score 3 · Accepted Answer · answered Jul 09 '20 at 11:06

3

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

answered Jul 09 '20 at 11:06

Gaurav Roy

11,175
3
24
45

can your provide a working code ... will be much appreciated – Ali Yar Khan Dec 23 '21 at 06:17

score 2 · Answer 2 · answered Feb 13 '23 at 21:56

QRCodeScanner has a customMarker prop which allows you to use any JSX.Element as marker.

Here is what I am currently using myself:

function marker(color: string, size: string | number, borderLength: string | number, thickness: number = 2, borderRadius: number = 0): JSX.Element {
  return <View style={{ height: size, width: size }}>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, top: 0, left: 0, borderColor: color, borderTopWidth: thickness, borderLeftWidth: thickness, borderTopLeftRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, top: 0, right: 0, borderColor: color, borderTopWidth: thickness, borderRightWidth: thickness, borderTopRightRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, bottom: 0, left: 0, borderColor: color, borderBottomWidth: thickness, borderLeftWidth: thickness, borderBottomLeftRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, bottom: 0, right: 0, borderColor: color, borderBottomWidth: thickness, borderRightWidth: thickness, borderBottomRightRadius: borderRadius }}></View>
  </View>
}

Which, in your case could be used like this:

  <QRCodeScanner
    ...
    customMarker={marker('white', '60%', '25%', 6, 20)}
  />

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

2 Answers2