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

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

MarnoDev/react-native-qrcode-scanner-view