react-native-signature-panel

A React Native signature panel that captures and exports signatures to PNG, JPG or SVG. Works with Expo or Vanilla RN.

Features

• Works with Expo or Vanilla RN
• Export signature as SVG, PNG or JPG
• Customizable width, height, theming etc.

Setup

This library is available on npm, install it with: npm i react-native-signature-panel or yarn add react-native-signature-panel.

Dependencies

You will need to install 'react-native-svg' and 'react-native-view-shot'. If you are working with Expo, you should use the 'expo install' method. If vanilla RN, then follow the usual instructions to add and link these libs.

Usage

1. Import react-native-signature-panel:

import Signature from 'react-native-signature-panel';

2. Use the component with its defaults

render () {
    return (
	<Signature onFingerUp={signature => console.log(signature)}/>
    )
  }

Notes

The onFingerUp method is triggered each time the user takes their finger off the pad. The 'signature' image data is then updated after a 1000ms delay. This allows for multiple strokes to be made without it creating a load of junk images. Note that when using an image format other than SVG, there will be temp image files building up on the device. Be sure to put a process in place to remove these once you have done whatever is it you need to do with the final image. You could push the responses into an array, take the last one and process it, then use RN file system to clear the lot.

You may want to set a slight offset to the touch-point using the x or y offset props. Through personal use, I have found that a yOffset of -60 is often reqired.

Available props

| Name | Type | Default | Description | | --------------- | ---------------- | --------- | ---------------------------------------- | | height | string or number | 300 | Height of the signature panel | | width | string or number | '100%' | Width of the signature panel | | offsetX | number | 0 | X offset of the finger touch point | | offsetY | number | 0 | Y offset of the finger touch point | | strokeColor | string | '#000' | Stroke color | | strokeWidth | number | 3 | Stroke width | | imageOutputSize | number | 480 | Size of image output (non SVG) | | imageQuality | number | 1 | Image output quality, 0.1 to 1 | | imageFormat | string | 'png' | Image output type ['png', 'jpg', 'svg] | | outputType | string | 'tmpfile' | Output ['tmpFile', 'base64', 'data-uri'] | | onFingerUp | function | () => {} | Callback with the image value | | containerStyle | object | {} | Style the signature container |

That's it :)

Pull requests, feedbacks and suggestions are welcome! Any issues, please let me know.