BioPass ID Fingerprint SDK React Native

Quick Start Guide • Prerequisites • Installation • How to use • LicenseKey • Getting capture status and finger position • Configs • Something else • Changelog • Support

Quick Start Guide

First, you will need a license key to use the SDK. To get your license key contact us through our website BioPass ID.

Check out our official documentation for more in depth information on BioPass ID.

1. Prerequisites:

Attention: To use Fingerprint you will need a physical device, Fingerprint does not work on emulators.

	Android	iOS
Support	SDK 24+	iOS 15+

- A physical device with a camera
- License key
- Internet connection is required to verify the license

2. Installation

1npm install @biopassid/fingerprint-sdk-react-native

Android

Change the minimum Android sdk version to 24 (or higher) in your android/app/build.gradle file.

1minSdkVersion 24

iOS

Requires iOS 15.0 or higher.

Add to the ios/Info.plist:

• the key Privacy - Camera Usage Description and a usage description.

If editing Info.plist as text, add:

1<key>NSCameraUsageDescription</key>
2<string>Your camera usage description</string>

Then go into your project's ios folder and run pod install.

1# Go into ios folder
2$ cd ios
3
4# Install dependencies
5$ pod install

Privacy manifest file

1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3<plist version="1.0">
4<dict>
5	<key>NSPrivacyCollectedDataTypes</key>
6	<array>
7		<dict>
8			<key>NSPrivacyCollectedDataType</key>
9			<string>NSPrivacyCollectedDataTypeOtherUserContent</string>
10			<key>NSPrivacyCollectedDataTypeLinked</key>
11			<false/>
12			<key>NSPrivacyCollectedDataTypeTracking</key>
13			<false/>
14			<key>NSPrivacyCollectedDataTypePurposes</key>
15			<array>
16				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
17			</array>
18		</dict>
19		<dict>
20			<key>NSPrivacyCollectedDataType</key>
21			<string>NSPrivacyCollectedDataTypeDeviceID</string>
22			<key>NSPrivacyCollectedDataTypeLinked</key>
23			<false/>
24			<key>NSPrivacyCollectedDataTypeTracking</key>
25			<false/>
26			<key>NSPrivacyCollectedDataTypePurposes</key>
27			<array>
28				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
29			</array>
30		</dict>
31	</array>
32	<key>NSPrivacyTracking</key>
33	<false/>
34	<key>NSPrivacyAccessedAPITypes</key>
35	<array>
36		<dict>
37			<key>NSPrivacyAccessedAPITypeReasons</key>
38			<array>
39				<string>CA92.1</string>
40			</array>
41			<key>NSPrivacyAccessedAPIType</key>
42			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
43		</dict>
44	</array>
45</dict>
46</plist>

Expo

You can use the library in Expo via a development build.

You will need to use expo-build-properties plugin.

1npx expo install expo-build-properties

Add the configuration in the app.json file.

1{
2  "plugins" : [
3    [
4      "expo-build-properties",
5      {
6        "android": {
7          "extraMavenRepos": [
8            {
9              "url": "https://packagecloud.io/biopassid/FingerprintSDKAndroid/maven2"
10            },
11            {
12              "url": "https://packagecloud.io/biopassid/dlibwrapper/maven2"
13            }
14          ]
15        }
16      }
17    ]
18  ],
19}

3. How to use

To call Fingerprint in your React Native project is as easy as follow:

1import React from "react";
2import {StyleSheet, View, Button} from "react-native";
3import {
4  FingerprintCaptureType,
5  FingerprintOutputType,
6  useFingerprint,
7  FingerprintCaptureState,
8  FingerprintRect,
9  FingerprintConfig,
10} from "@biopassid/fingerprint-sdk-react-native";
11
12export default function App() {
13  const { takeFingerprint } = useFingerprint();
14
15  const config: FingerprintConfig = {
16    licenseKey: "your-license-key",
17  };
18
19  async function handleButton() {
20    await takeFingerprint({
21      config,
22      onFingerCapture: (images: string[], error: string | null) => {
23        console.log(`onFingerCaptured: ${error ?? images[0]?.substring(0, 20)}`);
24      },
25      onStatusChanged: (state: FingerprintCaptureState) => {
26        console.log("onStatusChanged:", state);
27      },
28      onFingerDetected: (fingerRects: FingerprintRect[]) => {
29        console.log("onFingerDetected:", fingerRects);
30      },
31    });
32  }
33
34  return (
35    <View style={styles.container}>
36      <Button onPress={handleButton} title="Capture Fingers" />
37    </View>
38  );
39}
40
41const styles = StyleSheet.create({
42  container: {
43    flex: 1,
44    alignItems: "center",
45    justifyContent: "center",
46    backgroundColor: "#FFFFFF",
47  },
48});

4. LicenseKey

First, you will need a license key to use the SDK. To get your license key contact us through our website BioPass ID.

To use Fingerprint Capture you need a license key. To set the license key needed is simple as setting another attribute. Simply doing:

1const config: FingerprintConfig = {
2  licenseKey: "your-license-key",
3};

5. Getting capture status and finger position

You can get the capture status and finger position by passing callback functions when calling takeFingeprint. You can write you own listener following this example:

1await takeFingerprint({
2  config: { licenseKey: "your-license-key" },
3  onFingerCapture: (images: string[], error: string | null) => {
4    console.log(`onFingerCaptured: ${error ?? images[0]?.substring(0, 20)}`);
5  },
6  onStatusChanged: (state: FingerprintCaptureState) => {
7    console.log("onStatusChanged:", state);
8  },
9  onFingerDetected: (fingerRects: FingerprintRect[]) => {
10    console.log("onFingerDetected:", fingerRects);
11  },
12});

FingerprintCaptureState (enum)

Name
FingerprintCaptureState.NO_DETECTION
FingerprintCaptureState.MISSING_FINGERS
FingerprintCaptureState.TOO_CLOSE
FingerprintCaptureState.TOO_FAR
FingerprintCaptureState.OK
FingerprintCaptureState.STOPPED
FingerprintCaptureState.PROCESSING
FingerprintCaptureState.MODEL_NOT_FOUND

FingerprintRect

Name	Type
left	number
top	number
right	number
bottom	number

Configs

FingerprintConfig

Name	Type
licenseKey	string
numberFingersToCapture	number
fontFamily	string
overlayColor	string
timeToCapture	number
captureType	FingerprintCaptureType
outputType	FingerprintOutputType
captureCountdown	FingerprintCaptureCountdownOptions
backButton	FingerprintButtonOptions
helpText	FingerprintHelpTextOptions
fingerEllipse	FingerprintFingerEllipseOptions
distanceIndicator	FingerprintDistanceIndicatorOptions

Default configs:

1const defaultConfig: FingerprintConfig = {
2  licenseKey: "",
3  numberFingersToCapture: 4,
4  fontFamily: "fingerprintsdk_opensans_regular",
5  overlayColor: "#80000000",
6  timeToCapture: 5,
7  captureType: FingerprintCaptureType.LEFT_HAND_FINGERS,
8  outputType: FingerprintOutputType.CAPTURE_AND_SEGMENTATION,
9  captureCountdown: {
10    enabled: true,
11    backgroundColor: '#50888888',
12    progressColor: '#D6A262',
13    textColor: '#FFFFFF',
14  },
15  backButton: {
16    enabled: true,
17    backgroundColor: "#00000000",
18    buttonPadding: 0,
19    buttonSize: { width: 56, height: 56 },
20    iconOptions: {
21      enabled: true,
22      iconFile: "fingerprintsdk_ic_close",
23      iconColor: "#FFFFFF",
24      iconSize: { width: 32, height: 32 },
25    },
26    labelOptions: {
27      enabled: false,
28      content: "Voltar",
29      textColor: "#FFFFFF",
30      textSize: 14,
31    },
32  },
33  helpText: {
34    enabled: true,
35    messages: {
36      leftHandMessage:
37        "Encaixe a mão esquerda (sem o polegar)\naté o marcador ficar centralizado.",
38      rightHandMessage:
39        "Encaixe a mão direita (sem o polegar)\naté o marcador ficar centralizado.",
40      thumbsMessage: "Encaixe os polegares\naté o marcador ficar centralizado.",
41    },
42    textColor: "#FFFFFF",
43    textSize: 14,
44  },
45  fingerEllipse: {
46    enabled: true,
47    ellipseColor: "#80D6A262",
48  },
49  distanceIndicator: {
50    enabled: true,
51    selectedBarColor: "#D6A262",
52    unselectedBarColor: "#FFFFFF",
53    arrowColor: "#D6A262",
54    tooCloseText: {
55      enabled: true,
56      content: "Muito perto",
57      textColor: "#FFFFFF",
58      textSize: 14,
59    },
60    tooFarText: {
61      enabled: true,
62      content: "Muito longe",
63      textColor: "#FFFFFF",
64      textSize: 14,
65    },
66  },
67};

FingerprintCaptureType (enum)

Name
FingerprintCaptureType.RIGHT_HAND_FINGERS
FingerprintCaptureType.LEFT_HAND_FINGERS
FingerprintCaptureType.THUMBS

FingerprintOutputType (enum)

Name
FingerprintOutputType.ONLY_CAPTURE
FingerprintOutputType.CAPTURE_AND_SEGMENTATION

FingerprintButtonOptions

Name	Type
enabled	boolean
backgroundColor	string
progressColor	string
textColor	string

FingerprintButtonOptions

Name	Type
enabled	boolean
backgroundColor	string
buttonPadding	number
buttonSize	FingerprintSize
iconOptions	FingerprintIconOptions
labelOptions	FingerprintTextOptions

FingerprintIconOptions

Name	Type
enabled	boolean
iconFile	string
iconColor	string
iconSize	FingerprintSize

FingerprintTextOptions

Name	Type
enabled	boolean
content	string
textColor	string
textSize	number

FingerprintHelpTextOptions

Name	Type
enabled	boolean
messages	FingerprintHelpTextMessages
textColor	string
textSize	number

FingerprintHelpTextMessages

Name	Type
leftHandMessage	string
rightHandMessage	string
thumbsMessage	string

FingerprintSize

Name	Type
width	number
height	number

FingerprintFingerEllipseOptions

Name	Type
enabled	boolean
ellipseColor	string

FingerprintDistanceIndicatorOptions

Name	Type
enabled	boolean
selectedBarColor	string
unselectedBarColor	string
arrowColor	string
tooCloseText	FingerprintTextOptions
tooFarText	FingerprintTextOptions

How to change font family

on Android side

You can use the default font family or set one of your own. To set a font, create a folder font under res directory in your android/app/src/main/res. Download the font which ever you want and paste it inside font folder. All font file names must be only: lowercase a-z, 0-9, or underscore. The structure should be some thing like below.

on iOS side

To add the font files to your Xcode project:

1. In Xcode, select the Project navigator.
2. Drag your fonts from a Finder window into your project. This copies the fonts to your project.
3. Select the font or folder with the fonts, and verify that the files show their target membership checked for your app’s targets.

Then, add the "Fonts provided by application" key to your app’s Info.plist file. For the key’s value, provide an array of strings containing the relative paths to any added font files.

In the following example, the font file is inside the fonts directory, so you use fonts/roboto_mono_bold_italic.ttf as the string value in the Info.plist file.

on JS side

Finally, just set the font passing the name of the font file when instantiating FingerprintConfig in your React Native app.

1const config: FingerprintConfig = {
2  licenseKey: "your-license-key",
3  fontFamily: "roboto_mono_bold_italic",
4};

How to change icon

on Android side

You can use the default icons or define one of your own. To set a icon, download the icon which ever you want and paste it inside drawable folder in your android/app/src/main/res. All icon file names must be only: lowercase a-z, 0-9, or underscore. The structure should be some thing like below.

on iOS side

To add icon files to your Xcode project:

1. In the Project navigator, select an asset catalog: a file with a .xcassets file extension.
2. Drag an image from the Finder to the outline view. A new image set appears in the outline view, and the image asset appears in a well in the detail area.

on JS side

Finally, just set the icon passing the name of the icon file when instantiating FingerprintConfig in your React Native app.

1const config: FingerprintConfig = {
2  licenseKey: "your-license-key",
3  // Changing back button icon
4  backButton: { iconOptions: { iconFile: "ic_baseline_camera" } },
5};

Something else

Do you like the Fingerprint SDK and would you like to know about our other products? We have solutions for face detection and digital signature capture.

• Face SDK
  • Face SDK Flutter
  • Face SDK React Native
  • Face SDK JavaScript
• Fingerprint SDK
  • Fingerprint SDK Flutter
  • Fingerprint SDK React Native
• Signature SDK
  • Signature SDK Flutter
  • Signature SDK React Native

Changelog

2.1.5

• Documentation update.

2.1.4

• Documentation update;
• Fixed crash error caused by OpenCV resize function on Android.

2.1.3

• Documentation update;
• Refactor exposure compensation handling on Android;
• Add distorted image correction on Moto E7.

2.1.2

• Documentation update;
• Fixed compilation error on Android caused by a mismatch in the expected argument type when passing FingerprintConfig to the native side.

2.1.1

• Documentation update;
• Dlib has been removed and wrapped in an external lib to avoid conflicts with other BioPasss ID SDKs on Android.

2.1.0

• Documentation update;
• Upgrade minSdkVersion to 24 on Android;
• Improvement in the fluidity of the distance indicator on Android;
• Added continuous autofocus on Android;
• Added new time to capture functionality;
• Added countdown view.

2.0.2

• Documentation update;
• Upgrade to React Native 0.74;
• Upgrade minSdkVersion to 23 on Android;
• Added privacy manifest file on iOS.

2.0.1

• Documentation update;
• Bug fixes.

2.0.0

• Documentation update;
• FingerprintConfig refactoring:
  • Removed showFingerEllipseView and fingerColor, they are now in a new configuration class called FingerprintFingerEllipseOptions;
  • Removed showDistanceIndicatorView, distanceIndicatorLineColor, distanceIndicatorHighlightColor, tooCloseText and tooFarText, now they are in a new configuration class called FingerprintDistanceIndicatorOptions.

1.0.2

• Documentation update;
• Focus improvement for Android.

1.0.1

• Documentation update;
• Fixed back button padding for Android;
• Fixed bug that caused a crash when pressing the back button for Android.

1.0.0

• Documentation update;
• Refactoring in onFingerCapture:
  • Now, in addition to the image list, an error message is also returned.
• Removed automatic restart in case of fingerprint extraction failure:
  • Now, if the fingerprint extraction fails, a String will be returned with an error message.

Before

1const images = await takeFingerprint({
2  config: { licenseKey: "your-license-key" },
3});
4console.log("onFingerCaptured:", images[0]?.substring(0, 20));

Now

1await takeFingerprint({
2  config: { licenseKey: "your-license-key" },
3  onFingerCapture: (images: string[], error: string | null) => {
4    if (error) {
5      console.log("onFingerCaptured:", error);
6    } else {
7      console.log("onFingerCaptured:", images[0]?.substring(0, 20));
8    }
9  },
10});

0.1.4

• Documentation update;
• Bug fixes.

0.1.3

• Documentation update;
• Bug fixes.

0.1.2

• Documentation update;
• Fix in focus and exposure mode for Android.

0.1.1

• Documentation update;
• Correction in the resolution of the returned images for iOS;
• Improvement in focus and exposure mode for Android.

0.1.0

• Documentation update;
• Removal of FingerprintCaptureListener;
• Customizable UI.

0.0.10

• Documentation update;
• Focus adjustments for Android.

0.0.9

• Documentation update;
• License functionality fix for iOS.

0.0.8

• Documentation update.

0.0.7

• Documentation update;
• Improved license functionality for iOS.

0.0.6

• Finger capture;
• Fingers segmentation;
• Parameterizable distance, status and fingers indicators.
• Documentation update;
• dlib bug fix;
• New licensing feature;
• Finger indicator fix.