Custom Qr Code Scanner

[alz10]

I just wanna share my custom Qr Code Scanner with scanBar that animates up and down

You need to install this first (Google them because their installation requires linking)

react-native-vector-icons
react-native-animatable

Just change the color, size of the following depending on your needs

const overlayColor = "rgba(0,0,0,0.5)"; // this gives us a black color with a 50% transparency

const rectDimensions = SCREEN_WIDTH * 0.65; // this is equivalent to 255 from a 393 device width
const rectBorderWidth = SCREEN_WIDTH * 0.005; // this is equivalent to 2 from a 393 device width
const rectBorderColor = "#fff";

const scanBarWidth = SCREEN_WIDTH * 0.46; // this is equivalent to 180 from a 393 device width
const scanBarHeight = SCREEN_WIDTH * 0.0025; //this is equivalent to 1 from a 393 device width
const scanBarColor = "red";  

const iconScanColor = "#fff";

Full Code

import React, { Component } from "react";

import { View, Dimensions, Text } from "react-native";
import QRCodeScanner from "react-native-qrcode-scanner";
import Icon from "react-native-vector-icons/Ionicons";
import * as Animatable from "react-native-animatable";

const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;

console.disableYellowBox = true;

class QrCodeCamera extends Component {
  onSuccess(e) {
    alert(e);
  }

  makeSlideOutTranslation(translationType, fromValue) {
    return {
      from: {
        [translationType]: SCREEN_WIDTH * -0.18
      },
      to: {
        [translationType]: fromValue
      }
    };
  }

  render() {
    return (
      <QRCodeScanner
        showMarker
        onRead={this.onSuccess.bind(this)}
        cameraStyle={{ height: SCREEN_HEIGHT }}
        customMarker={
          <View style={styles.rectangleContainer}>
            <View style={styles.topOverlay}>
              <Text style={{ fontSize: 30, color: "white" }}>
                QR CODE SCANNER
              </Text>
            </View>

            <View style={{ flexDirection: "row" }}>
              <View style={styles.leftAndRightOverlay} />

              <View style={styles.rectangle}>
                <Icon
                  name="ios-qr-scanner"
                  size={SCREEN_WIDTH * 0.73}
                  color={iconScanColor}
                />
                <Animatable.View
                  style={styles.scanBar}
                  direction="alternate-reverse"
                  iterationCount="infinite"
                  duration={1700}
                  easing="linear"
                  animation={this.makeSlideOutTranslation(
                    "translateY",
                    SCREEN_WIDTH * -0.54
                  )}
                />
              </View>

              <View style={styles.leftAndRightOverlay} />
            </View>

            <View style={styles.bottomOverlay} />
          </View>
        }
      />
    );
  }
}

const overlayColor = "rgba(0,0,0,0.5)"; // this gives us a black color with a 50% transparency

const rectDimensions = SCREEN_WIDTH * 0.65; // this is equivalent to 255 from a 393 device width
const rectBorderWidth = SCREEN_WIDTH * 0.005; // this is equivalent to 2 from a 393 device width
const rectBorderColor = "red";

const scanBarWidth = SCREEN_WIDTH * 0.46; // this is equivalent to 180 from a 393 device width
const scanBarHeight = SCREEN_WIDTH * 0.0025; //this is equivalent to 1 from a 393 device width
const scanBarColor = "#22ff00";

const iconScanColor = "blue";

const styles = {
  rectangleContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent"
  },

  rectangle: {
    height: rectDimensions,
    width: rectDimensions,
    borderWidth: rectBorderWidth,
    borderColor: rectBorderColor,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent"
  },

  topOverlay: {
    flex: 1,
    height: SCREEN_WIDTH,
    width: SCREEN_WIDTH,
    backgroundColor: overlayColor,
    justifyContent: "center",
    alignItems: "center"
  },

  bottomOverlay: {
    flex: 1,
    height: SCREEN_WIDTH,
    width: SCREEN_WIDTH,
    backgroundColor: overlayColor,
    paddingBottom: SCREEN_WIDTH * 0.25
  },

  leftAndRightOverlay: {
    height: SCREEN_WIDTH * 0.65,
    width: SCREEN_WIDTH,
    backgroundColor: overlayColor
  },

  scanBar: {
    width: scanBarWidth,
    height: scanBarHeight,
    backgroundColor: scanBarColor
  }
};

export default QrCodeCamera;

[jiangdi0924]

it's awsome!!!

[moaazsidat]

@Albert0405 this is awesome! we should definitely add this as part of the examples!

[smrd1377]

Amazing 💃 it work correctly ... i love it tnq very much 💯

[dramalcolm]

nice, i like it

[eduardodcastro]

I am developing a project, which uses qr code reader, your project helped me a lot in the development of the layout of this screen, I leave here my congratulations and thank you. Eduardo / Brazil

[MttNajafi]

how to scan just only the center small area? When we have 2 QR code on the screen, the first one without need to go to the center area is scanned!

[sharadkatre19]

Nice!! It's Amazing, Thanks!!@:D

[motogod]

Thanks for sharing the code.

But I found an issue it happens on

<View style={styles.bottomOverlay}>
  <TouchableOpacity onPress={() => alert('bottom)}><Text>Click</Text></TouchableOpacity></View>

onPress function won't trigger on Android. ( iOS is working )

I have no idea why.

If just test a code like this it's still not working with yellow background.

<QRCodeScanner
        showMarker
        onRead={onSuccess}
        cameraStyle={{ height: qrCodeHeight }}
        customMarker={
          <View style={styles.rectangleContainer}>
            <View style={{ flex: 1, backgroundColor: 'pink' }} onStartShouldSetResponder={() => alert('1')}><Text style={{ fontSize: 32 }}>1</Text></View>
            <View style={{ flex: 1, backgroundColor: 'blue' }} onStartShouldSetResponder={() => alert('2')}><Text style={{ fontSize: 32 }}>2</Text></View>
            <View style={{ flex: 1, backgroundColor: 'yellow' }} onStartShouldSetResponder={() => alert('3')}><Text style={{ fontSize: 32 }}>3</Text></View>
          </View>
        }
      />

[VSV6]

Hi @alz10 , I tried this code and it's a nice design but I just need background color black transparent and the marker should be only curved edges, not a full square width with color. Can somebody have that code? Thanks in advance. :)

[moasko]

Nice!! It's Amazing, Thanks ! :D

[GlistenSTAR]

amazing. It's fantastic. thank you

[dangnguyen1004]

how to scan just only the center small area? When we have 2 QR code on the screen, the first one without need to go to the center area is scanned!

anyone have solution? i'm stuck with this too

[KubilayKerim]

for anyone struggilng with icon not popping up in/after 2022 its probably icon name change ? Changing icon name under Icon as
< name="ios-scan" > worked for me