react-native-signature-capture
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-signature-capture package

    0.4.12 • Public • Published

    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

    Contribution

    Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given. Please read our Pull request guidelines before submitting your PR

    Install

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

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

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

    react-native link react-native-signature-capture

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

    iOS

    1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
    2. Go to node_modules ➜ react-native-signature-capture ➜ ios ➜ select RSSignatureCapture.xcodeproj
    3. Add libRSSignatureCapture.a to Build Phases -> Link Binary With Libraries
    4. 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 this line
    }
    

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

    ...
    
    import com.rssignaturecapture.RSSignatureCapturePackage; // <-- add this import
    
    public class MainApplication extends Application implements ReactApplication {
    
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new RSSignatureCapturePackage() // <-- add this line
                );
            }
      }
    
    ...
    }

    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 (
          <SignatureCapture
            {...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

    • minStrokeWidth : sets the min stroke line width (Android only)

    • maxStrokeWidth : sets the max stroke line width (Android only)

    • backgroundColor: Sets the background color of the component. Defaults to white. May be 'transparent'.

    • strokeColor: Sets the color of the signature. Defaults to black.

    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 (
                <View style={{ flex: 1, flexDirection: "column" }}>
                    <Text style={{alignItems:"center",justifyContent:"center"}}>Signature Capture Extended </Text>
                    <SignatureCapture
                        style={[{flex:1},styles.signature]}
                        ref="sign"
                        onSaveEvent={this._onSaveEvent}
                        onDragEvent={this._onDragEvent}
                        saveImageFileInExtStorage={false}
                        showNativeButtons={false}
                        showTitleLabel={false}
                        backgroundColor="#ff00ff"
                        strokeColor="#ffffff"
                        minStrokeWidth={4}
                        maxStrokeWidth={4}
                        viewMode={"portrait"}/>
    
                    <View style={{ flex: 1, flexDirection: "row" }}>
                        <TouchableHighlight style={styles.buttonStyle}
                            onPress={() => { this.saveSign() } } >
                            <Text>Save</Text>
                        </TouchableHighlight>
    
                        <TouchableHighlight style={styles.buttonStyle}
                            onPress={() => { this.resetSign() } } >
                            <Text>Reset</Text>
                        </TouchableHighlight>
    
                    </View>
    
                </View>
            );
        }
    
        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);

    Please checkout the example folder (iOS/Android): https://github.com/RepairShopr/react-native-signature-capture/tree/master/Example

    Library used:

    https://github.com/jharwig/PPSSignatureView

    https://github.com/gcacace/android-signaturepad

    Install

    npm i react-native-signature-capture

    DownloadsWeekly Downloads

    6,225

    Version

    0.4.12

    License

    ISC

    Unpacked Size

    221 MB

    Total Files

    2048

    Last publish

    Collaborators

    • avatar