Quickstart (React Native)

Prerequisites

• License key: Get a trial or production key from the Microblink Developer Hub. Keys are bound to Android's Application ID, and iOS's Bundle Identifier.

React Native requirements

• React Native: 0.68 and newer

Note: The BlinkCard React Native SDK support both the legacy and (Native module) the new (Turbo module) architecture.

iOS requirements

• iOS version: 16.0 and newer

Android requirements

• Minimum SDK: Android 7.0 (API 24)
• Kotlin version: 2.1.20
• Android Gradle Plugin: Requires AGP 8.0+

Fast track: try the example app

Before you start, make sure you have Node & Watchman installed before running the example application:

# install Watcman
brew install watchman

# install Node
brew install node

You can try the SDK by cloning the blinkcard-react-native repository and running the BlinkCard example app.

From the repo root, execute the example app script:

git clone https://github.com/BlinkCard/blinkcard-react-native.git
cd blinkcard-react-native
./initBlinkCardReactNativeSample.sh

After the script has finished executing, go to the BlinkCardSample folder.

Running the application on Android

Run the following command to run the application on Android:

npx react-native run-android

Note: the plugin can be run directly via Android Studio as well:

1. Execute the following command:

npx react-native start

2. Open the android folder via Android Studio in the BlinkCardSample folder to run the Android sample application.

Running the sample application on iOS

1. For running the sample application on iOS, execute the following command:

npx react-native start

2. Open the BlinkCardSample.xcworkspace located in the ios folder
3. Set your development team
4. Press run

Example application use-cases

The example application demonstrates how the BlinkCard plugin is implemented, used and shows how to obtain the scanned results. It contains the implementation for:

• The default implementation with the default BlinkCard UX scanning experience.
• Multiside DirectAPI scanning - extracting the document information from multiple static images (from the gallery).
• Singleside DirectAPI scanning - extracting the document information from a single static images (from the gallery).

Install the SDK

1. To add the BlinkCard plugin to a React Native project, first create empty project if needed:

npx @react-native-community/cli init YourAppName --package-name YourPackageName --title YourAppTitle --version "React Native version"

2. Install the @microblink/blinkcard-react-native dependency:

  npm install @microblink/blinkcard-react-native

Initialize and scan

Import and create

1. Import the neccessary methods from the SDK:

  import { performScan } from '@microblink/blinkcard-react-native';

2. Add the license keys:

/**
* Set your license key, depending on the platform
*/
const blinkCardLicenseKey = Platform.select({
ios: 'your-ios-license-key',
android: 'your-android-license-key',
});

You can get the license key on our Developer Hub account.

3. Pass the neccessary SDK settings:

const sdkSettings = new BlinkCardSdkSettings({
    licenseKey: blinkCardLicenseKey
});
sdkSettings.downloadResources = true;

/**
* Create and modify the Session Settings
*/
const sessionSettings = new BlinkCardSessionSettings();

/**
* Create and modify the scanning settings
*/
const scanningSettings = new ScanningSettings();
scanningSettings.skipImagesWithBlur = true;
scanningSettings.tiltDetectionLevel = DetectionLevel.Mid;

/**
* Create and modify the liveness settings
*/
const livenessSettings = new LivenessSettings();
livenessSettings.enableCardHelpInHandCheck = true;
livenessSettings.photocopyCheckStrictnessLevel = StrictnessLevel.Level5;

/**
* Create and modify the extraction settings
*/
const extractionSettings = new ExtractionSettings();
extractionSettings.extractCardholderName = true;
extractionSettings.extractCvv = true;
extractionSettings.extractInvalidCardNumber = false;

/**
* Create and modify the anonymization settings
*/
const anonymizationSettings = new AnonymizationSettings();
anonymizationSettings.cardholderNameAnonymizationMode = AnonymizationMode.ImageOnly;
anonymizationSettings.cvvAnonymizationMode = AnonymizationMode.FullResult;
anonymizationSettings.cardNumberAnonymizationSettings =
    new CardNumberAnonymizationSettings({
        prefixDigitsVisible: 1,
        suffixDigitsVisible: 2,
    });

/**
* Create and modify the cropped image settings
*/
const croppedImageSettings = new CroppedImageSettings();
croppedImageSettings.returnCardImage = true;

/**
* Place the above defined settings in the Scanning settings
*/
scanningSettings.extractionSettings = extractionSettings;
scanningSettings.livenessSettings = livenessSettings;
scanningSettings.anonymizationSettings = anonymizationSettings;
scanningSettings.croppedImageSettings = croppedImageSettings;

/**
* Place the Scanning settings in the Session settings
*/
sessionSettings.scanningSettings = scanningSettings;

/**
* Create and modify the UX settings
* This paramater is optional
*/
const scanningUxSettings = new ScanningUxSettings();
scanningUxSettings.showHelpButton = true;
scanningUxSettings.showIntroductionAlert = false;
scanningUxSettings.preferredCameraPosition = CameraPosition.Back;
scanningUxSettings.allowHapticFeedback = true;

4. Call the appropriate scanning method (with the default UX, or DirectAPI for static images), handle the results and catch any errors:

/**
 * Call the performScan method, where the SDK and session 
 * settings need to be passed
 * Here, you can also pass the optional ScanningUX object from step 3.
 */ 
const blinkCardResult = await performScan(
    sdkSettings,
    sessionSettings,
    scanningUxSettings,
);

console.log(`${blinkCardResult?.cardholderName}`)

DirectAPI implementation

For the DirectAPI (static image upload) implementation, see the example application here.

Additional documentation

• Additional documentation for BlinkCard React Native can be found in the README file on the official GitHub repository here.