react-native-canvas-signature

React native signature component (Android + iOS)

This package provides a React Native component for hand-drawn signatures. Developers can use this package in their apps where they want to take hand-drawn signature from the user.

This library uses react-native-canvas.

Installation

This package uses react-native-canvas under the hood. Please follow react-native-canvas's installation guidelines to install it, then install this package using the following commands

# using yarn
yarn add react-native-canvas-signature

# using npm
npm install react-native-canvas-signature

Usage

import React, { useRef } from 'react';
import { Button } from 'react-native';
import Signature from 'react-native-canvas-signature';

const Example = () => {
  const ref = useRef();

  return (
    <>
      <Signature
        ref={ref}
        lineWidth={3}
        lineColor="blue"
        canvasStyle={{ borderWidth: 1, borderColor: 'grey' }}
        onBegin={() => console.log('begin')}
        onEnd={() => console.log('end')}
        onChange={(signature) => console.log(signature)}
      />
      <Button title="Clear" onPress={() => ref.current?.clearSignature?.()} />
    </>
  );
};

export default Example;

Available props

Name	Type	Default	Description
containerStyle	style	{}	Style of the view container
canvasStyle	style	{}	Style of the canvas
lineWidth	number	3	Width of the line
lineColor	string	'black'	Color of the line
onChange	function		Function called on signature change with base64 encoded string as argument
onBegin	function		Function called when user starts drawing the signature
onEnd	function		Function called when user end drawing the signature

Methods

Name	Description
readSignature	Reads the current signature on the canvas and triggers onChange
clearSignature	Clears the current signature on the canvas

Issues

Report any issues here

License

This project is licensed under the terms of the MIT license.