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.