react-native-canvas-signature v1.0.2

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

Methods

Issues

Report any issues here

License

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