@biopassid/signature-sdk-react-native

BioPass ID Signature SDK React Native

Quick Start Guide • Prerequisites • Installation • How to use • LicenseKey • SignatureConfig • 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:

	Android	iOS
Support	SDK 21+	iOS 13+

- License key
- Internet connection is required to verify the license

2. Installation

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

If you are using Yarn:

yarn add @biopassid/signature-sdk-react-native

Android

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

minSdkVersion 21

iOS

Requires iOS 13.0 or higher.

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

# Go into ios folder
$ cd ios

# Install dependencies
$ pod install

Expo

• ✅ You can use this library with Development Builds. No config plugin is required.
• ❌ This library can't be used in the "Expo Go" app because it requires custom native code.

3. How to use

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

import React from "react";
import { StyleSheet, View, Button } from "react-native";
import { useSignature } from "@biopassid/signature-sdk-react-native";

export default function App() {
  const { takeSignature } = useSignature();

  async function handleButton() {
    const signature = await takeSignature({
      licenseKey: "your-license-key",
    });
    console.log("Signature: ", signature.substring(0, 20));
  }

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

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

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 Signature Capture you need a license key. To set the license key needed is simple as setting another attribute. Simply doing:

const signature = await takeSignature({
  licenseKey: "your-license-key",
});

SignatureConfig

You can also use pre-build configurations on your application, so you can automatically start using multiples 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:

SignatureConfig

Name	Type
licenseKey	string
screenOrientation	SignatureScreenOrientation
pencilColor	string
pencilWidth	number
backgroundColor	string
overlayColor	string
fontFamily	string
titleText	SignatureTextOptions
backButton	SignatureButtonOptions
saveButton	SignatureButtonOptions
deleteButton	SignatureButtonOptions
undoButton	SignatureButtonOptions
noDrawingAlert	SignatureNoDrawingAlertOptions

Default configs:

const defaultConfig: SignatureConfig = {
  licenseKey: "",
  screenOrientation: SignatureScreenOrientation.PORTRAIT,
  pencilColor: "#000000",
  pencilWidth: 5,
  backgroundColor: "#FFFFFF",
  overlayColor: "#80000000",
  fontFamily: "signaturesdk_opensans_bold",
  titleText: {
    enabled: true,
    content: "Captura de assinatura digital",
    textColor: "#FFFFFF",
    textSize: 20,
  },
  backButton: {
    enabled: true,
    backgroundColor: "#00000000",
    buttonPadding: 0,
    buttonSize: { width: 56, height: 56 },
    iconOptions: {
      enabled: true,
      iconFile: "signaturesdk_ic_close",
      iconColor: "#FFFFFF",
      iconSize: { width: 32, height: 32 },
    },
    labelOptions: {
      enabled: false,
      content: "Voltar",
      textColor: "#323232",
      textSize: 14,
    },
  },
  saveButton: {
    enabled: true,
    backgroundColor: "#FFFFFF",
    buttonPadding: 0,
    buttonSize: { width: 56, height: 56 },
    iconOptions: {
      enabled: true,
      iconFile: "signaturesdk_ic_save",
      iconColor: "#323232",
      iconSize: { width: 32, height: 32 },
    },
    labelOptions: {
      enabled: false,
      content: "Salvar",
      textColor: "#323232",
      textSize: 14,
    },
  },
  deleteButton: {
    enabled: true,
    backgroundColor: "#FFFFFF",
    buttonPadding: 0,
    buttonSize: { width: 56, height: 56 },
    iconOptions: {
      enabled: true,
      iconFile: "signaturesdk_ic_delete",
      iconColor: "#323232",
      iconSize: { width: 32, height: 32 },
    },
    labelOptions: {
      enabled: false,
      content: "Deletar",
      textColor: "#323232",
      textSize: 14,
    },
  },
  undoButton: {
    enabled: true,
    backgroundColor: "#FFFFFF",
    buttonPadding: 0,
    buttonSize: { width: 56, height: 56 },
    iconOptions: {
      enabled: true,
      iconFile: "signaturesdk_ic_undo",
      iconColor: "#323232",
      iconSize: { width: 32, height: 32 },
    },
    labelOptions: {
      enabled: false,
      content: "Desfazer",
      textColor: "#323232",
      textSize: 14,
    },
  },
  noDrawingAlert: {
    enabled: true,
    title: "Nenhuma assinatura",
    message: "Não há nenhuma assinatura a ser salva.",
    labelButton: "OK",
  },
};

SignatureButtonOptions

Name	Type
enabled	boolean
backgroundColor	string
buttonPadding	number
buttonSize	SignatureSize
iconOptions	SignatureIconOptions
labelOptions	SignatureTextOptions

SignatureIconOptions

Name	Type
enabled	boolean
iconFile	string
iconColor	string
iconSize	SignatureSize

SignatureTextOptions

Name	Type
enabled	boolean
content	string
textColor	string
textSize	number

SignatureNoDrawingAlertOptions

Name	Type
enabled	boolean
title	string
message	string
labelButton	string

SignatureSize

Name	Type
width	number
height	number

SignatureScreenOrientation (enum)

Name
SignatureScreenOrientation.PORTRAIT
SignatureScreenOrientation.LANDSCAPE

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:

• In Xcode, select the Project navigator.
• Drag your fonts from a Finder window into your project. This copies the fonts to your project.
• 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 SignatureConfig in your React Native app.

const signature = await takeSignature({
  licenseKey: "your-license-key",
  fontFamily: "roboto_mono_bold_italic",
});

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:

• In the Project navigator, select an asset catalog: a file with a .xcassets file extension.
• 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 SignatureConfig in your React Native app.

const signature = await takeSignature({
  licenseKey: "your-license-key",
  // Changing back button icon
  backButton: { iconOptions: { iconFile: "ic_baseline_camera" } },
  // Changing save button icon
  saveButton: { iconOptions: { iconFile: "ic_baseline_camera" } },
  // Changing delete button icon
  deleteButton: { iconOptions: { iconFile: "ic_baseline_camera" } },
  // Changing undo button icon
  undoButton: { iconOptions: { iconFile: "ic_baseline_camera" } },
});

Something else

Do you like the Signature SDK and would you like to know about our other products? We have solutions for face and fingerprint detection.

• 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

v0.1.2

• Documentation update;
• Added new configuration noDrawingAlert:
  • It's now possible to show an alert dialog when trying to save a blank signature.
• Bug fix in license functionality for Android;
• Added guidance to screen rotation for iOS.

v0.1.1

• Documentation update;
• Fixes and improvements.

v0.1.0

• Add documentation;
• Signature capture functionality;
• Customizable UI;
• Return of captured signature image.