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

• 中文版
• English Version

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

• 公众号: Marno
• 网站: www.marno.cn
• 掘金: www.juejin.im/user/marno