react-native-signature-pad

React Native wrapper around szimek's Canvas based Signature Pad

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-signature-pad
27420.1.22 years ago8 years agoMinified + gzip package size for react-native-signature-pad in KB

Readme

react-native-signature-pad
npm version star this repo PRs Welcome All Contributors Known Vulnerabilities
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

Demo

SignaturePadDemo SignaturePadDemoAndroid

Installation

$ yarn add react-native-signature-pad

Example

import React, {Component} from 'react';
import {View} from 'react-native';
import SignaturePad from '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);
  };
}