⚠️ Archived

This repository was archived on 2026-08-11 and is now read-only.

Last commit to the default branch: 2018-11-19 — 7.7 years before archiving. It was archived as part of an organisation-wide review of dormant repositories. No further changes will be made here.

The code remains available to clone and fork. An organisation owner can restore write access via Settings → General → Danger Zone → Unarchive.

---

react-native-signature-pad

React Native wrapper around @szimek's HTML5 Canvas based Signature Pad

• Supports Android and iOS
• Pure JavaScript implementation with no native dependencies
• Tested with RN 0.20
• Can easily be rotated using the "transform" style
• Generates a base64 encoded png image of the signature

Supporting Props

Props	Description
penColor	Controlling pen color
dataURL	Load canvas with default initial data/signature
style	Overriding Styles

Demo

Installation

npm install --save react-native-signature-pad

Example

var React = require('react-native');

var {
  View,
  Component,
  } = React;

var SignaturePad = require('react-native-signature-pad');

export default class Demo extends Component {
  render = () => {
    return (
      <View style={{flex: 1}}>
          <SignaturePad onError={this._signaturePadError}
                        onChange={this._signaturePadChange}
                        style={{flex: 1, backgroundColor: 'white'}}/>
      </View>
    )
  };

  _signaturePadError = (error) => {
    console.error(error);
  };

  _signaturePadChange = ({base64DataUrl}) => {
    console.log("Got new signature: " + base64DataUrl);
  };
}