rn-barcode-zxing

rn-barcode-zxing

Getting started

$ npm install rn-barcode-zxing react-native-camera react-native-barcode-mask --save

$ yarn add rn-barcode-zxing react-native-camera react-native-barcode-mask

Mostly automatic installation

$ react-native link rn-barcode-zxing react-native-camera

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ rn-barcode-zxing and add RNBarcodeZXing.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNBarcodeZXing.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNBarcodeZXingPackage; to the imports at the top of the file
• Add new RNBarcodeZXingPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':rn-barcode-zxing'
   project(':rn-barcode-zxing').projectDir = new File(rootProject.projectDir, 	'../node_modules/rn-barcode-zxing/android')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':rn-barcode-zxing')
   

  <key>NSCameraUsageDescription</key>
  <string>Use the built-in Camera to scan any QR code</string>

Usage

import {ScanCode} from 'rn-barcode-zxing';

<SafeAreaView style={[{flex: 1}, backgroundStyle]}>
  <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
  <View style={{flex: 1}}>
    <ScanCode onScanBarcode={(ScanBarcode) => console.log({ScanBarcode})} />
  </View>
</SafeAreaView>;

import {BarcodeScanner} from 'rn-barcode-zxing';
import BarcodeMask from 'react-native-barcode-mask';

<View style={[styles.content, StyleSheet.flatten(contentStyle)]}>
  <BarcodeScanner
    style={[styles.cameraStyle, StyleSheet.flatten(cameraStyle)]}
    shouldScan={true}
    onBarcodesDetected={onScanBarcode}>
    <BarcodeMask
      width={300}
      height={300}
      showAnimatedLine={true}
      outerMaskOpacity={0.8}
      edgeHeight={48}
      edgeWidth={48}
      animatedLineColor={'#FFFFFF'}
      animatedLineHeight={3}
      backgroundColor={'rgba(3, 3, 3, 0.3)'}
      animatedLineWidth={204}
      lineAnimationDuration={2000}
    />
  </BarcodeScanner>
</View>;