{"_id":"@canner/react-native-signature-capture","_rev":"30-467e186a1cd6ee136c6998a83f97786e","name":"@canner/react-native-signature-capture","description":"Lets users sign their signatures","dist-tags":{"latest":"0.4.9"},"versions":{"0.4.8":{"name":"@canner/react-native-signature-capture","version":"0.4.8","description":"Lets users sign their signatures","main":"SignatureCapture.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/RepairShopr/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react-native":">=0.47"},"author":{"name":"RepairShopr"},"license":"ISC","bugs":{"url":"https://github.com/RepairShopr/react-native-signature-capture/issues"},"homepage":"https://github.com/RepairShopr/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"gitHead":"523d2670d00446a1562de730b062f640603da883","_id":"@canner/react-native-signature-capture@0.4.8","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"chilijung","email":"chilijung@gmail.com"},"dist":{"integrity":"sha512-a/4NbqqQY4tJlp7csZyJrbwthULJW2VH5J3thAQb8Pd9c1iCj7S8tNYyReCYcVdmMlQlAN27K/SzT/E526idZg==","shasum":"00690a7a53f60c167ae34908f610fe9419a33fb4","tarball":"https://registry.npmjs.org/@canner/react-native-signature-capture/-/react-native-signature-capture-0.4.8.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqfGGcjYnZpM5++TBUOaJNbfyJEs/ijqOEyDv/ypoidAiEAqTntvwD8R+koMaQYIol1l/b4Y32/Ux7XnpTFO7zYU60="}]},"maintainers":[{"name":"chilijung","email":"chilijung@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture-0.4.8.tgz_1505377279890_0.7954149264842272"},"directories":{}},"0.4.9":{"name":"@canner/react-native-signature-capture","version":"0.4.9","description":"Lets users sign their signatures","main":"SignatureCapture.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/RepairShopr/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react-native":">=0.47"},"author":{"name":"RepairShopr"},"license":"ISC","bugs":{"url":"https://github.com/RepairShopr/react-native-signature-capture/issues"},"homepage":"https://github.com/RepairShopr/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"gitHead":"29176a23b089d99f24f80c0964b92403e17716bd","_id":"@canner/react-native-signature-capture@0.4.9","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"chilijung","email":"chilijung@gmail.com"},"dist":{"integrity":"sha512-RQAR0x2oKLpRI8IaFiZxWIXz7I5vjX9Nh2G3f+pK05xFYe883JgSCCi9AC/nUaw8GLJ5/tSWaILIn72wGIOfDA==","shasum":"7e33891abfd0cf5b035b9fecfc904f8da0cff70f","tarball":"https://registry.npmjs.org/@canner/react-native-signature-capture/-/react-native-signature-capture-0.4.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6O/her0/9aEeG+cQNkHqdN0nPcr8d55ZalZ/jdes2ogIgQxNNkfbzhlhdCw6Rmx6bChAVWABXp7+Y/EjROBfybd0="}]},"maintainers":[{"name":"abz53378","email":"a53378@yahoo.com.tw"},{"name":"chilijung","email":"chilijung@gmail.com"},{"name":"ctxhou","email":"vjack070707@gmail.com"},{"name":"wwwy3y3","email":"wwwy3y3@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture-0.4.9.tgz_1505448166986_0.5728936449158937"},"directories":{}}},"readme":"# react-native-signature-capture\n\n## About this\nReact Native library for capturing signature\n\nUser would sign on the app and when you press the save button it returns the base64 encoded png\n\n### iOS\n<img src=\"http://i.giphy.com/3oEduIyWb48Ws3bSuc.gif\" />\n\n### Android\n<img src=\"http://i.giphy.com/xT0GUKJFFkdDv25FNC.gif\" />\n\n## Install\n\nFirst you need to install react-native-signature-capture:\n\n```sh\nnpm install react-native-signature-capture --save\n```\n\nSecond you need to link react-native-signature-capture:\n\n```sh\nreact-native link react-native-signature-capture\n```\n\nUse above `react-native link` command to automatically complete the installation, or link manually like so:\n\n### iOS\n\n1. In the XCode's \"Project navigator\", right click on your project's Libraries folder ➜ Add Files to <...>\n2. Go to node_modules ➜ react-native-signature-capture ➜ ios ➜ select RSSignatureCapture.xcodeproj\n3. Add libRSSignatureCapture.a to Build Phases -> Link Binary With Libraries\n4. Compile and have fun\n\n### Android\n\nAdd these lines in your file: android/settings.gradle\n\n```\n...\n\ninclude ':reactnativesignaturecapture',':app'\nproject(':reactnativesignaturecapture').projectDir = new File(settingsDir, '../node_modules/react-native-signature-capture/android')\n```\n\nAdd line in your file: android/app/build.gradle\n\n```\n...\n\ndependencies {\n    ...\n    compile project(':reactnativesignaturecapture') // <-- add this line\n}\n```\n\nAdd import and line in your file: android/app/src/main/java/<...>/MainApplication.java\n\n```java\n...\n\nimport com.rssignaturecapture.RSSignatureCapturePackage; // <-- add this import\n\npublic class MainApplication extends Application implements ReactApplication {\n\n    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n\n        @Override\n        protected List<ReactPackage> getPackages() {\n            return Arrays.<ReactPackage>asList(\n                new MainReactPackage(),\n                new RSSignatureCapturePackage() // <-- add this line\n            );\n        }\n  }\n\n...\n}\n```\n\n## Usage\n\nThen you can use SignatureCapture component in your react-native's App, like this:\n```javascript\n...\nimport React, {Component} from 'react';\nimport SignatureCapture from 'react-native-signature-capture';\n\nclass CustomComponent extends Component {\n\n  ...\n  render() {\n    return (\n      <SignatureCapture\n        {...someProps}\n      />\n    );\n  }\n}\n```\n\n### Properties\n\n+ **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\n\n+ **showBorder** : If this props is made to false, it will hide the dashed border (the border is shown on iOS only).\n\n+ **showNativeButtons** : If this props is made to true, it will display the native buttons \"Save\" and \"Reset\".\n\n+ **showTitleLabel** : If this props is made to true, it will display the \"x_ _ _ _ _ _ _ _ _ _ _\" placeholder indicating where to sign.\n\n+ **viewMode** : \"portrait\" or \"landscape\" change the screen orientation based on boolean value\n\n+ **maxSize**  : sets the max size of the image maintains aspect ratio, default is 500\n\n### Methods\n\n+ **saveImage()** : when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback\n\n+ **resetImage()** : when called it will clear the image on the canvas\n\n### Callback Props\n+ **onSaveEvent** : Triggered when saveImage() is called, which return Base64 Encoded String and image file path.\n\n+ **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.\n\n\n### Example\n\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n */\n\nvar React = require('react');\nvar ReactNative = require('react-native');\n\nvar {Component} = React;\n\nvar {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    View, TouchableHighlight\n} = ReactNative;\n\nimport SignatureCapture from 'react-native-signature-capture';\n\nclass RNSignatureExample extends Component {\n    render() {\n        return (\n            <View style={{ flex: 1, flexDirection: \"column\" }}>\n                <Text style={{alignItems:\"center\",justifyContent:\"center\"}}>Signature Capture Extended </Text>\n                <SignatureCapture\n                    style={[{flex:1},styles.signature]}\n                    ref=\"sign\"\n                    onSaveEvent={this._onSaveEvent}\n                    onDragEvent={this._onDragEvent}\n                    saveImageFileInExtStorage={false}\n                    showNativeButtons={false}\n                    showTitleLabel={false}\n                    viewMode={\"portrait\"}/>\n\n                <View style={{ flex: 1, flexDirection: \"row\" }}>\n                    <TouchableHighlight style={styles.buttonStyle}\n                        onPress={() => { this.saveSign() } } >\n                        <Text>Save</Text>\n                    </TouchableHighlight>\n\n                    <TouchableHighlight style={styles.buttonStyle}\n                        onPress={() => { this.resetSign() } } >\n                        <Text>Reset</Text>\n                    </TouchableHighlight>\n\n                </View>\n\n            </View>\n        );\n    }\n\n    saveSign() {\n        this.refs[\"sign\"].saveImage();\n    }\n\n    resetSign() {\n        this.refs[\"sign\"].resetImage();\n    }\n\n    _onSaveEvent(result) {\n        //result.encoded - for the base64 encoded png\n        //result.pathName - for the file path name\n        console.log(result);\n    }\n    _onDragEvent() {\n         // This callback will be called when the user enters signature\n        console.log(\"dragged\");\n    }\n}\n\nconst styles = StyleSheet.create({\n    signature: {\n        flex: 1,\n        borderColor: '#000033',\n        borderWidth: 1,\n    },\n    buttonStyle: {\n        flex: 1, justifyContent: \"center\", alignItems: \"center\", height: 50,\n        backgroundColor: \"#eeeeee\",\n        margin: 10\n    }\n});\n\nAppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample);\n```\n\n-------------\n\nPlease checkout the example folder (iOS/Android):\nhttps://github.com/RepairShopr/react-native-signature-capture/tree/master/Example\n\nLibrary used:\n\nhttps://github.com/jharwig/PPSSignatureView\n\nhttps://github.com/gcacace/android-signaturepad\n\n\nHow to contribute\n-----------------\nSubmit a PR - also please don't be shy and email me. Lastly, I love to see how this project is doing in the wild! please email me screenshot of your app - jed.tiotuico@gmail.com (I will disclose the info, I will not tell anyone about it, I will not blog nor tweet it)\n","maintainers":[{"email":"wwwy3y3@gmail.com","name":"wwwy3y3"},{"email":"william@cannerdata.com","name":"cannerbot"}],"time":{"modified":"2024-02-22T14:09:00.552Z","created":"2017-09-14T08:21:20.021Z","0.4.8":"2017-09-14T08:21:20.021Z","0.4.9":"2017-09-15T04:02:48.836Z"},"homepage":"https://github.com/RepairShopr/react-native-signature-capture#readme","keywords":["react-component","react-native","ios","signature"],"repository":{"type":"git","url":"git+https://github.com/RepairShopr/react-native-signature-capture.git"},"author":{"name":"RepairShopr"},"bugs":{"url":"https://github.com/RepairShopr/react-native-signature-capture/issues"},"license":"ISC","readmeFilename":"README.md"}