BioPass ID Face SDK React Native

Table of Contents

• Quick Start Guide
  • Prerequisites
  • Installation
  • How to use
• FaceConfig
• FaceEvent
• Changelog
• License

Quick Start Guide

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

1. Prerequisites:

- A device with a camera

2. Installation

npm install @biopassid/face-sdk-react-native

Android

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

minSdkVersion 21

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

compileSdkVersion 31

3. How to use

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

import React from "react";
import { StyleSheet, View, Button } from "react-native";
import {
  FaceConfigPreset,
  FaceConfigType,
  FaceEvent,
  buildCameraView,
  FaceCameraLensDirection,
} from "@biopassid/face-sdk-react-native";

const App = () => {
  const config = FaceConfigPreset.getConfig(
    FaceConfigType.FACE_CAPTURE
  )
    .setDefaultCameraPosition(FaceCameraLensDirection.FRONT)
    .setShowFlipCameraButton(true)
    .setStringsScreenTitle("Capturando Face")
    .setStylesOverlayColor("#CC000000");

  const callback = (event: FaceEvent) => {
    // handle Face return
    console.log(event.photo);
  };

  const handleButton = () => {
    buildCameraView(config, callback);
  };

  return (
    <View style={styles.container}>
      <Button onPress={handleButton} title="Capture Face" />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: '#FFFFFF',
  },
});

FaceConfig

You can also use pre-build configurations on your application, so you can automatically start using multiples services and features that better suit your application. You can instantiate each one and use it's default properties, or if you prefer you can change every config available. Here are the types that are supported right now:

FaceCaptureConfig

ContinuousCaptureConfig

FaceStrings

FaceStyles

Changing Font Family

You can use the default font family or set a font you prefer. 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 names must be only: lowercase a-z, 0-9, or underscore. The structure should be some thing like below.

Then, just set the font passing the name of the font file.

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  .setStylesFontFamily("roboto_mono_bold_italic");

Changing Icon

You can use the default icon or set a icon you prefer. To set a icon, download the icon which ever you want and paste it inside drawable folder in your android/app/src/main/res. The structure should be some thing like below.

Then, just set the font passing the name of the icon file.

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  // changing back button icon
  .setStylesBackButtonIcon("ic_baseline_camera")
  // changing flash button icon
  .setStylesFlashButtonIcon("ic_baseline_camera")
  // changing flip camera button icon
  .setStylesFlipCameraButtonIcon("ic_baseline_camera")
  // changing capture button icon
  .setStylesCaptureButtonIcon("ic_baseline_camera");

FaceSize

FaceCameraPreset (enum)

FaceCameraLensDirection (enum)

FaceCaptureFormat (enum)

FaceCaptureButtonType (enum)

Using Custom Capture Button

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  .setCaptureButtonType(FaceCaptureButtonType.CUSTOM)
  .setStylesCustomButtonBackgroundColor("#FFFF00")
  .setStylesCustomButtonTextColor("#FF00FF")
  .setStringsCustomButtonText("Capture");

Using Icon Capture Button

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
    .setCaptureButtonType(FaceCaptureButtonType.ICON)
    .setStylesCaptureButtonIcon("ic_baseline_camera")
    .setStylesCaptureButtonColor("#FF0000")
    .setStylesCaptureButtonSize({width: 76, height: 76});

How to instantiate and functionalities

To instantiate it's easy as to do one function call (as we have seen previously on the example). You only need to specify which type of config you want using a ENUM FaceConfigType. Every type however can have different features implemented, here are the supported types:

FaceEvent

On your Face callback function, you receive a FaceEvent.

FaceEvent

Changelog

v0.1.19

• Bug fix

v0.1.18

• Bug fixes
• Flash mode fixes
• Face detection improvement
• New feature automatic capture
• UI customization improvements
• New feature face detection
• Camera preset fix
• Camera preview fix
• New icon capture button
• Fix in requesting permissions
• Fix in performance of ContinuousCapture
• Parameterizable screenTitle
• New option to set text color
• New custom capture button
• Class name standardization
• New option to set the font

v0.1.13

• Face Capture SDK for Android and iOS

License

This project is under the MIT license. See the LICENSE for more information.