blinkid-react-native-ios

BlinkID iOS SDK wrapper for React Native

This repository contains example wrapper for BlinkID native SDK iOS. For 100% of features and maximum control, consider using native SDK.

Licensing

• Generate a free demo license key to start using the SDK in your app (registration required)

• Get information about pricing and licensing of BlinkID

Installation

First generate an empty project if needed:

react-native init NameOfYourProject

Add the blinkid-react-native-ios module to your project:

cd <path_to_your_project>
npm i --save blinkid-react-native-ios

Link module with your project:

react-native link blinkid-react-native-ios

Installation with CocoaPods

CocoaPods is a dependency manager for Objective-C, which automates and simplifies the process of using 3rd-party libraries like BlinkID in your projects.

• If you wish to use version v1.4.0 or above, you need to install Git Large File Storage by running these comamnds:

brew install git-lfs
git lfs install

• Be sure to restart your console after installing Git LFS

Podfile

In your project, you will need to add MicroBlink.framework/MicroBlink framework. Go to your ./NameOfYourProject/ios folder and create Podfile at the root of your iOS project:

platform :ios, '8.0'

target 'TargetName' do
  pod 'PPBlinkID', '~> 2.7.1'
end

After you have added Podfile, install it by running this command:

pod install

Demo

This repository contains initReactNativeiOSDemoApp.sh script which you can download that will create React Native project and download all of its dependencies. Put that script in your wanted folder and run this command:

./initReactNativeiOSDemoApp.sh

After some time, XCode will open your project. Go to Targets -> General and for each Target set your team.

Usage

To use the module you call it in your index.ios.js file like the example below:

/**
* Use these scanner types
* Available: "USDL", "MRTD", "EKDL"
* USDL - scans barcodes located on the back of US driver's license
* MRTD - scans Machine Readable Travel Document, contained in various IDs and passports
* EUDL - scans the front of European driver's license
*/

/**
 * There are several options you need to pass to scan function to add recognizers and to obtain the image and results
 * available:
 *  "isFrontCamera" : if it's set to false, back camera is used, else front
 *  "addEudlRecognizer" : set to true if you want to add EUDL recognizer
 *  "addMrtdRecognizer" : set to true if you want to add MRTD recognizer
 *  "addUsdlRecognizer" : set to true if you want to add USDL recognizer
 *  "addDocumentFaceRecognizer" : set to true if you want to add Document Face recognizer
 *  "shouldReturnCroppedDocument": if true, dewarped images in the recognition process will be saved
 *  "shouldReturnSuccessfulFrame": if true, image on which scan gave valid scanning result will be saved
 */

/**
 * Scan method returns scan fields in JSON format and image (image is returned as Base64 encoded JPEG)
 *  "scanningResult.resultImage" : image is returned as Base64 encoded JPEG
 *  "scanningResult.resultList[0].fields" : all the fields in JSON format
 */

import React, { Component } from 'react';
import { scan, setBlinkIDLicenseKey } from 'blinkid-react-native-ios';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
  ScrollView
} from 'react-native';

console.disableYellowBox = true;

export default class BlinkIDReactNative extends Component {
    constructor(props) {
    super(props);
    this.state = {showResults: false, 
                  resultImage: '',
                  resultsList: '',
                  licenseKeyErrorMessage: ''};
  }
  async scan() {
    try {
      setBlinkIDLicenseKey('3SU5N6JB-ZDIE3O7P-7PCWDKWW-GYVO766Y-XLENEMDV-BFTOESUJ-AFG3WD7K-5YYAF7UO')
    }
    catch (e) {
      this.setState({licenseKeyErrorMessage: 'Please set Your Microblink license key'})
  }
    const scanningResult = await scan({
      isFrontCamera: false,
      addEudlRecognizer: true,
      addMrtdRecognizer: false,
      addUsdlRecognizer: true,
      addDocumentFaceRecognizer: true,
      shouldReturnCroppedDocument: true,
      shouldReturnSuccessfulFrame: true
    })
    if (scanningResult) {
       this.setState({ showResults: true, resultImage: scanningResult.resultImage, resultsList: JSON.stringify(scanningResult.resultList[0].fields)});
       console.log(JSON.stringify(this.state.resultsList));
    }
  }
  render() {
    let displayImage = this.state.resultImage;
    let displayFields = this.state.resultsList;
    let licenseKeyErrorMessage = this.state.licenseKeyErrorMessage;
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.scan.bind(this)} style={styles.button}>
          <Text style={styles.results}>Scan</Text>
        </TouchableHighlight>
        <Text style={styles.results}>{licenseKeyErrorMessage}</Text>
        <Text style={styles.results}>MicroBlink Ltd</Text>
        <ScrollView
          automaticallyAdjustContentInsets={false}
          scrollEventThrottle={200}y> 
          <Image source={{uri: displayImage, scale: 3}} style={styles.imageResult}/>
          <Text style={styles.results}>{displayFields}</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button:{
        paddingTop:70,
        paddingBottom:10
    },
  results: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  imageLogo: {
    width: 100,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center'
  },
  imageResult: {
    width: 300,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center'
  },
});

AppRegistry.registerComponent('BlinkIDReactNative', () => BlinkIDReactNative);

• Available scanners are:

  • USDL - scans barcodes located on the back of US driver's license
  • MRTD - scans Machine Readable Travel Document, contained in various IDs and passports
  • EUDL - scans the front of European driver's license

• Scan method returns scan fields in JSON format and image (image is returned as Base64 encoded JPEG)

  • scanningResult.resultImage : image is returned as Base64 encoded JPEG
  • scanningResult.resultList[0].fields : all the fields in JSON format

• License parameter must be provided for iOS.