More Premium Hugo Themes Premium React Themes

React Native Signature Capture

A simple modular component for react native (iOS) to capture a signature as an image

React Native Signature Capture

A simple modular component for react native (iOS) to capture a signature as an image

Author Avatar Theme by repairshopr
Github Stars Github Stars: 965
Last Commit Last Commit: Jun 7, 2021 -
First Commit Created: Feb 24, 2024 -
React Native Signature Capture screenshot

Overview

The react-native-signature-capture is a useful React Native library designed for capturing signatures within mobile applications. Users can sign directly on the app, and upon pressing the save button, the library returns the signature in base64 encoded PNG format. It is compatible with both iOS and Android platforms, making it a versatile solution for signature capturing needs.

Features

  • saveImageFileInExtStorage: Allows saving the image file in external storage.
  • showBorder: Toggle to hide the dashed border (visible on iOS only).
  • showNativeButtons: Displays native buttons “Save” and “Reset” for user interaction.
  • showTitleLabel: Shows a placeholder to indicate where to sign.
  • viewMode: Supports screen orientation changes based on boolean value.
  • maxSize: Sets the maximum size of the image, maintaining aspect ratio.
  • minStrokeWidth: Determines the minimum stroke line width (Android only).
  • maxStrokeWidth: Specifies the maximum stroke line width (Android only).
  • backgroundColor: Option to set the background color of the component.
  • strokeColor: Sets the color of the signature (default is black).

Installation

To install react-native-signature-capture, follow these steps:

  1. Install the library using npm: npm install react-native-signature-capture.
  2. Link the library by running: react-native link react-native-signature-capture.

iOS

  • Add RSSignatureCapture.xcodeproj by right-clicking on the project’s Libraries folder.
  • Include libRSSignatureCapture.a in Build Phases -> Link Binary With Libraries.

Android

  • Modify android/settings.gradle to include necessary lines.
  • Update android/app/build.gradle with relevant configurations.
  • Adjust MainApplication.java to import the library.

Summary

The react-native-signature-capture library facilitates easy implementation of signature capture functionality in React Native applications. With features like customizable border visibility, native buttons, background color settings, and callback methods for image saving and clearing, this library provides a comprehensive solution for integrating signature capture capabilities seamlessly. Additionally, the library supports both iOS and Android platforms, making it a versatile choice for developers looking to add signature capture features to their mobile apps.