Capture Digital Signature in React Native App for Android and iOS

In this post, we will see How to Capture Digital Signature in React Native App. We all know digitalization is everywhere and everyone is using digital ways to store the data as it becomes very fast and easy to access the data. Taking a digital signature is also a part of this digitalization.

If I talk about the general example where we can see the use of digital signature then the logistic delivery industry is the best fit for that as they take the digital signature from the user on delivery to assure the completion of delivery. This was just an example you can implement a digital signature feature for other uses also.

Taking a digital signature in React Native is super easy with react-native-signature-capture library as it provides a SignatureCapture component with features like save or reset signature. This is how you can use the SignatureCapture component.

Signature Capture Component

This component provides the following useful props, methods, and callbacks:

1. Props

showBorder : If this props is made to false, it will hide the dashed border (the border is shown on iOS only).

showNativeButtons : If this props is made to true, it will display the native buttons “Save” and “Reset”.

showTitleLabel : If this props is made to true, it will display the “x_ _ _ _ _ _ _ _ _ _ _” placeholder indicating where to sign.

viewMode : “portrait” or “landscape” change the screen orientation.

maxSize : sets the max size of the image maintains aspect ratio, default is 500

2. Methods

saveImage() : when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback

resetImage() : when called it will clear the image on the canvas

3. Callback Props

onSaveEvent : Triggered when saveImage() is called, which returns Base64 Encoded String and image file path.

onDragEvent : Triggered when a user marks his signature on the canvas. This will not be called when the user does not perform any action on the canvas.

Now let’s get started with the example and see how to capture the signature in React Native.

In this example, we are going to make a screen with lots of space to take the signature. We are going to make 2 custom buttons (Save and Reset) instead of native buttons. On the click of Save, we are printing the signature in base64 formate on the console and generating an alert to confirm everything is good and the signature was captured. On the click of the Reset button, we will clear the canvas to sign again.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use SignatureCapture component we have to install react-native-signature-capture dependency. To install the dependency open the terminal and jump into your project

Now install the dependency

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the libraries but need to install pods. In this example, we need to install the pods for react-native-signature-capture.

Please use the following command to install CocoaPods

Code to Capture Signature in React Native

Now Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

      

This is how you can capture the signature in the React Native app for Android and iOS. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.