Thinkmill / react-native-signature-capture

A simple modular component for react native (iOS) to capture a signature as an image

react-native-signature-capture

React Native library for capturing signature

User would sign on the app and when you press the save button it returns the base64 encoded png

Usage

First you need to install react-native-signature-capture:

npm install react-native-signature-capture --save

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-signature-capture and add the .xcodeproj file

In XCode, in the project navigator, select your project. Add the lib*.a from the signature-capture project to your project's Build Phases ➜ Link Binary With Libraries Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.

Run your project (Cmd+R)

Examples

'use strict';

var React = require('react-native');
var SignatureCapture = require('react-native-signature-capture');
var {
  AppRegistry,
} = React;

var NPMTest = React.createClass({
  _onSaveEvent: function(result) {
    //result.encoded - for the base64 encoded png
    //result.pathName - for the file path name
    console.log(result);
  },

  render: function() {
    return (
        <SignatureCapture onSaveEvent={this._onSaveEvent}/>
    );
  }
});

AppRegistry.registerComponent('NPMTest', () => NPMTest);

Library used: https://github.com/jharwig/PPSSignatureView