react-native-cipherlab-scanner

react-native-cipherlab-scanner

Use react-native on your Android based CipherLab scanner!

Supported Models:

CipherLab RS31

Getting started

$ react-native init AwesomeScanner
$ cd AwesomeScanner
$ npm install
$ react-native@0.52.0 # this works for me on Windows
$ npm uninstall babel-preset-react-native
$ npm install babel-preset-react-native
$ npm install react-native-cipherlab-scanner --save
$ react-native run-android

Android

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

• Add import au.com.micropacific.react.cipherlab.CipherLabScannerPackage; to the imports at the top of the file
• Add new CipherLabScannerPackage() to the list returned by the getPackages() method

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

   include ':react-native-cipherlab-scanner'
   project(':react-native-cipherlab-scanner').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-cipherlab-scanner/android')
   

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

     compile project(':react-native-cipherlab-scanner')
   

Usage

// App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';


import CipherLabScannerModule from 'react-native-cipherlab-scanner';
import { DeviceEventEmitter, Button } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  constructor(props)
  {
    super(props);

    this.state = {
      barcode: '',
      type: '',
      binary: '',
    }
    
    this.requestScan=this.requestScan.bind(this); 

    // MDR 21/08/2018 - make fake scans if we're on an emulator
    var _this = this;
    this.scanner = {
      requestScan: function() {
        _this.barcodeReadEvent({barcode: '123', type: 'FAKE_BARCODE', binary: []})
      }
    }
    
    this.listeners = [];
  }

  async componentDidMount() {
    this.listeners.push(DeviceEventEmitter.addListener('CIPHERLAB.initEvent', this.scannerInitEvent.bind(this)));
    this.listeners.push(DeviceEventEmitter.addListener('CIPHERLAB.barcodeReadEvent', this.barcodeReadEvent.bind(this)));

    await CipherLabScannerModule.initialise();

    // MDR 21/08/2018 - Note that this incurs a performance hit for each scan
    await CipherLabScannerModule.enableBinaryData();
  }

  async componentWillUnmount() {
    console.log(`componentWillUnmount()`);

    for (var x in this.listeners) {
      this.listeners[x].remove();
    }

    this.listeners = [];
  }
  
  requestScan(e) {
    //CipherLabScannerModule.requestScan();
    this.scanner.requestScan();
  }

  async scannerInitEvent(e) {
    // MDR 21/08/2018 - The onboard scanner has been initialised, overwrite our fake scanner
    console.log(`CIPHERLAB.initEvent initcallback`);
    this.scanner = CipherLabScannerModule;
  }

  async barcodeReadEvent(e) {
    this.setState({barcode: e.barcode, type: e.type, binary: e.binary});
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text style={styles.instructions}>Barcode: {this.state.barcode}</Text>
        <Text style={styles.instructions}>Type: {this.state.type}</Text>
        <Text style={styles.instructions}>Binary: {this.state.binary}</Text>        
        <Button title="Scan" capitalize={false} block primary onPress={this.requestScan} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});