native react ssh_react-native-signature-capture

react-native-signature-capture

About this

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

iOS

Android

Install

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

npm installreact-native-signature-capture --save

Second you need to link react-native-signature-capture:

react-native linkreact-native-signature-capture

Use above react-native link command to automatically complete the installation, or link manually like so:

iOS

In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>

Go to node_modules ➜ react-native-signature-capture ➜ ios ➜ select RSSignatureCapture.xcodeproj

Add libRSSignatureCapture.a to Build Phases -> Link Binary With Libraries

Compile and have fun

Android

Add these lines in your file: android/settings.gradle

...

include ':reactnativesignaturecapture',':app'

project(':reactnativesignaturecapture').projectDir = new File(settingsDir, '../node_modules/react-native-signature-capture/android')

Add line in your file: android/app/build.gradle

...

dependencies {

...

compile project(':reactnativesignaturecapture') //

}

Add import and line in your file: android/app/src/main/java/<...>/MainApplication.java

...

import com.rssignaturecapture.RSSignatureCapturePackage; //

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new RSSignatureCapturePackage() //

);

}

}

...

}

Usage

Then you can use SignatureCapture component in your react-native's App, like this:

...

import React, {Component} from 'react';

import SignatureCapture from 'react-native-signature-capture';

class CustomComponent extends Component {

...

render() {

return (

{...someProps}

/>

);

}

}

Properties

saveImageFileInExtStorage : Make this props true, if you want to save the image file in external storage. Default is false. Warning: Image file will be visible in gallery or any other image browsing app

showBorder : If this props is made to false, it will hide the dashed border (the border is shown on iOS only).

showNativeButtons : If this props is made to true, it will display the native buttons "Save" and "Reset".

showTitleLabel : If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign.

viewMode : "portrait" or "landscape" change the screen orientation based on boolean value

maxSize : sets the max size of the image maintains aspect ratio, default is 500

Methods

saveImage() : when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback

resetImage() : when called it will clear the image on the canvas

Callback Props

onSaveEvent : Triggered when saveImage() is called, which return Base64 Encoded String and image file path.

onDragEvent : Triggered when user marks his signature on the canvas. This will not be called when the user does not perform any action on canvas.

Example

/**

* Sample React Native App

* https://github.com/facebook/react-native

*/

var React = require('react');

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

var {Component} = React;

var {

AppRegistry,

StyleSheet,

Text,

View, TouchableHighlight

} = ReactNative;

import SignatureCapture from 'react-native-signature-capture';

class RNSignatureExample extends Component {

render() {

return (

Signature Capture Extended

style={[{flex:1},styles.signature]}

ref="sign"

onSaveEvent={this._onSaveEvent}

onDragEvent={this._onDragEvent}

saveImageFileInExtStorage={false}

showNativeButtons={false}

showTitleLabel={false}

viewMode={"portrait"}/>

onPress={() => { this.saveSign() } } >

Save

onPress={() => { this.resetSign() } } >

Reset

);

}

saveSign() {

this.refs["sign"].saveImage();

}

resetSign() {

this.refs["sign"].resetImage();

}

_onSaveEvent(result) {

//result.encoded - for the base64 encoded png

//result.pathName - for the file path name

console.log(result);

}

_onDragEvent() {

// This callback will be called when the user enters signature

console.log("dragged");

}

}

const styles = StyleSheet.create({

signature: {

flex: 1,

borderColor: '#000033',

borderWidth: 1,

},

buttonStyle: {

flex: 1, justifyContent: "center", alignItems: "center", height: 50,

backgroundColor: "#eeeeee",

margin: 10

}

});

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

Library used: