Skip to content

huzaima/react-native-canvas-signature

Repository files navigation

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.