/react-native-qrcode-scanner-view

A highly customizable QR code scanning component for React Native

Primary LanguageJavaScriptApache License 2.0Apache-2.0

react-native-qrcode-scanner-view

A highly customized qrcode viewfinder base on react-native-camera. You must set up react-native-camera correctly first before use it.If you need to set more react-native-camera props, you can just use Viewfinder which is exported as QRScannerRectView. Please view source code to learn more.


Guide

Features

  • Pure JS code
  • Support Android and iOS
  • Support React Native 0.60+
  • Support scan QR code, Bar code
  • Scanning interface can be customized

ScreenShots

Default WeChat MeiTuan
TikTok DemoHome Demo Gif

Installation

// First
set up react-native-camera

// Second
yarn add react-native-qrcode-scanner-view

// or

npm install react-native-qrcode-scanner-view --save

Basic

import { View } from 'react-native';
import { QRScannerView } from 'react-native-qrcode-scanner-view';

export default class DefaultScreen extends Component {

    renderTitleBar = () => <Text style={{color:'white',textAlign:'center',padding:16}}>Title</Text>

    renderMenu = () => <Text style={{color:'white',textAlign:'center',padding:16}}>Menu</Text>

    barcodeReceived = (event) => { console.log('Type: ' + event.type + '\nData: ' + event.data) };

    render() {
        return (
           <View style={{flex:1}}>
            < QRScannerView
                onScanResult={ this.barcodeReceived }
                renderHeaderView={ this.renderTitleBar }
                renderFooterView={ this.renderMenu }
                scanBarAnimateReverse={ true }/>
           </View>
        )
    }
}

Props

Prop Type Default Optional
maskColor string #0000004D true
rectStyle object height: 300,
width: 300,
borderWidth: 0,
borderColor: '#000000',
marginBottom: 0
true
cornerStyle object height: 32,
width: 32,
borderWidth: 6,
borderColor: '#1A6DD5'
true
cornerOffsetSize number 0 true
isShowCorner bool true true
scanBarStyle object marginHorizontal: 8,
borderRadius: 2,
backgroundColor: '#1A6DD5'
true
isShowScanBar bool true true
scanBarAnimateTime number 3000 true
scanBarAnimateReverse bool false true
scanBarImage any true
hintText string true
hintTextStyle object color: '#fff',
fontSize: 14,
backgroundColor: 'transparent',
marginTop: 32
true
renderHeaderView func - true
renderFooterView func - true
onScanResult func - false
scanInterval number 2000 true
torchOn bool false true
userFront bool false true

About