Code Monkey home page Code Monkey logo

react-native-qrcode-scanner-view's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.