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

About

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