xiurobert-ac-qrcode-rn

Features and Changes

• Supports QR Codes ONLY
• Supports both Android and iOS
• Based on react-native-camera
• Simple to use scanning boundary
• Supports enabling and disabling torchlight via a prop

Installation

$ yarn add xiurobert-ac-qrcode-rn
$ yarn add react-native-camera
$ react-native link react-native-camera

Basic usage

import React,{Component} from 'react'
import { Text, StyleSheet } from 'react-native'
import { QRScannerView } from 'ac-qrcode-rn'
import { Toast } from 'antd-mobile-rn'

class DefaultScreen extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {}
  
  onScanResultReceived = ({ data, type }) => {
    console.log(`Type: ${type}\nData: ${data}`)
    // do anything
  }

  renderTopBarView() {
    return (
      <Text style={styles.text}>Insert your top menu here</Text>
    )
  }

  renderBottomMenuView() {
    return (
      <Text style={styles.text}>Insert your bottom menu here</Text>
    )
  }

  render() {
    return (
      <QRScannerView
        onScanResultReceived={this.onScanResultReceived}
        renderTopBarView={this.renderTopBarView}
        renderBottomMenuView={this.renderBottomMenuView}
      />
    )
  }
}

const styles = StyleSheet.create({
  text: {
    color: 'white',
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 20,
    padding: 12,
  },
})

export default DefaultScreen

Props

Prop	Type	Default Value	Optional	Explanation
maskColor	string	#0000004D	true	Mask colour
borderColor	string	#000000	true	Border colour
cornerColor	string	#000000	true	Corner colour
borderWidth	number	0	true	Border width
cornerBorderWidth	number	4	true	Corner width
cornerBorderLength	number	20	true	Corner height
rectHeight	number	200	true	Scanning rectangle height
rectWidth	number	200	true	Scanning rectangle height
isCornerOffset	bool	false	true	Whether the corners are offset
cornerOffsetSize	number	0	true	Corner offset size
bottomMenuHeight	number	0	true	Height of the bottom menu
scanBarAnimateTime	number	2500	true	Time for the scan bar to move down fully
scanBarColor	string	#22ff00	true	Colour of the animated scan bar
scanBarImage	any	null	true	Image to be used for the scan bar
scanBarHeight	number	1.5	true	Height of the scan bar
scanBarMargin	number	6	true	Margins of the scan bar
hintText	string	Align the QR code within the viewfinder	true	Hint
hintTextStyle	object	{ color: '#fff', fontSize: 14,backgroundColor:'transparent'}	true	Hint text style
hintTextPosition	number	130	true	Absolute position of the hint text
isShowScanBar	bool	true	true	Should show scan bar?
bottomMenuStyle	object	-	true	Bottom menu style
renderTopBarView	func	-	false	Function to render the top menu view
renderBottomMenuView	func	-	false	Function to render the bottom menu view
onScanResultReceived	func	-	false	Function to call when QR code is scanned
torchEnabled	bool	false	true	Whether the torchlight is enabled

Credits

• react-native-camera
• react-native-qrcode-app
• react-native-qrcode
• AC-QRCode-RN
• AC-QRCode-RN 2