{"_id":"@alanlima/react-native-signature-capture","_rev":"3-f98c238969df6d025bdadac47ad3e477","name":"@alanlima/react-native-signature-capture","dist-tags":{"latest":"0.5.1"},"versions":{"0.4.9":{"name":"@alanlima/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/alanlima/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react":">=15.4.1","react-native":">=0.47"},"author":{"name":"RepairShopr"},"license":"ISC","bugs":{"url":"https://github.com/alanlima/react-native-signature-capture/issues"},"homepage":"https://github.com/alanlima/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"devDependencies":{"@babel/runtime":"^7.3.1","react":"^16.8.3","react-dom":"^16.8.3","react-hot-loader":"^4.7.1","react-native":"^0.58.5"},"gitHead":"6c0ccf25eed23fdb62b04c200c2a0c055ab236a8","_id":"@alanlima/react-native-signature-capture@0.4.9","_nodeVersion":"10.8.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-RdcOrk2PGRa/sYBw6fmL2floEeBNns0mVlAWmFOmnM3PEMrF9imhDzFXNxdVbMlPsulf0pT4b2i+iej0ddqvVg==","shasum":"cdf778adc2470e2c4cc0ee21571f09f4c9c22744","tarball":"https://registry.npmjs.org/@alanlima/react-native-signature-capture/-/react-native-signature-capture-0.4.9.tgz","fileCount":35,"unpackedSize":341001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcckLMCRA9TVsSAnZWagAAU4MP/0nlC1HHYWzE+d/JYyK4\nVY7aqRWXquU/IcZRLKFApFFgFRHfiirkhEV7iQvvk7BycXcaVTNpiAGUWAtx\nt8N5yjQsjspxy776to11xteqLnvHfmcQQICl7d05OhsfULVibAiP/5fp4e1c\nBfEmqffTkSCUQoFveoaCpzRDr7Q8tyQVlw9F8VJ8qoXXdbsf9sk9xxzv18k5\nqzlYSz64J+5HxhgrTIDhZwsyZd73AVDwB9BxyhPNfEosHLd6+Tv/0AHtaeL6\njEdzkAQ8S+2hNXkMlTp0Ba9B2b1hSiDEo7SeL47CvHoFfZHsBdSdQcKVWX67\nanvIfmmykuk8WVz+Q6TBPMc1D7DAV30Dv5k8UZK5OBQVmn372h803VuMUsyQ\n0IHEHYz9s1xjhXIX47EiOZqGH77qQbKrs71azPbzM+LfiTrR7qPZefIq9DOq\nnKsUyd9lO7HIPadUIyJkDvzWTxFqjziAHr3hsgSHuJjMW4mk+zSzxYoD0s/p\nFplmsjKrY/s4UpFLztmykDy/wHd5uDqYclA+dRNPHiYeKoKHBUpKuSoN32ZB\nySD2IW3mLr1A8YfXqjdHUeu+MeDrYOgSKG2QUABY4oXvsGkQuYOv4EOkTz9d\ne/2b7V037WtcF8ZqLZgfpXKYSeHv88Gi/7KMK5MQ3mOpug6AaJMr133Qp2U8\nWqGH\r\n=DguZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl+JOI2kSzmm/LIkC33a0DJCrzei94s/G5+QZQknkUfwIgbA0HpHBrXOyjX0d1am2OJCzU/6Hnui/ytAMg0MNbvo0="}]},"maintainers":[{"name":"alanlima","email":"alan.dev@outlook.com"}],"_npmUser":{"name":"alanlima","email":"alan.dev@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture_0.4.9_1550992075320_0.15984662571228014"},"_hasShrinkwrap":false},"0.5.0":{"name":"@alanlima/react-native-signature-capture","version":"0.5.0","description":"Fork of the original library from RepairShopr.","main":"SignatureCapture.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alanlima/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react":">=15.4.1","react-native":">=0.47"},"author":{"name":"RepairShopr"},"license":"ISC","bugs":{"url":"https://github.com/alanlima/react-native-signature-capture/issues"},"homepage":"https://github.com/alanlima/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"devDependencies":{"@babel/runtime":"^7.3.1","react":"^16.8.3","react-dom":"^16.8.3","react-hot-loader":"^4.7.1","react-native":"^0.58.5"},"gitHead":"a9a3400110943896afbda38398cca38cf270cb8b","_id":"@alanlima/react-native-signature-capture@0.5.0","_nodeVersion":"10.8.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-V4nFSeMLsl5RNNgTh5Ag5ic3s/KyyMycVeYGDzBrroeREH2j1lkdyWe25bE2eqU9esx6pRFb/3QTy+m116TN1Q==","shasum":"baa28798068b70aa3374661f1f5eb4027838c697","tarball":"https://registry.npmjs.org/@alanlima/react-native-signature-capture/-/react-native-signature-capture-0.5.0.tgz","fileCount":34,"unpackedSize":158144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcclHtCRA9TVsSAnZWagAA1DcP/iaqjZFTP8Z7bEFfZgjr\n25k4iRCkVBK9r8lSZn6HYxL1rR6N6QBhsUXcPELK5C9elEPgtTzrO8b/m079\n39oY8QEOrP7Lf7m6BlOJnEqkIiVpDCVtGwNENTqSCvo0uPoEldgGbwsto+4J\nlO88p7l5pdf3F6F19KMtFWmWDSNIMBxGHljZ6HvaelM7SyknyzEKVgz8Eerz\nuBZlXXnfYJHIr/UfAZ/58fQbxy3OacheGXtKhN6nDBmAlH1x3F9T1lR2vGo9\nuujKpqLdbtwNiu6jyxhOSpfld1Os5v7cvdqzdddRdpA2P6ag2iF664D6ZKc/\nUPaoLUj/uqSIsHqug0Fvky1bykLjHcLgRZqwAifPMn+7wg7RsV9zf47vr3ny\nnpicaoHzJBuKQe2zLvsEZw77On8eEDgBRHXEVIZa4UqdezJWzo/aS9sPP8YY\nnpsouL4i/B52dH5xrdK0ViNBoejtl9kTWMDwqPk+/dG+sIdQG0Nn2x2z2wxg\n0haexHoQPhIFkzTfB8YkBAQ2+tvxA1lWu7pgIA9iCZnwY6m13XSzRw1RsYbw\n6KoVWE9lRM8sU+6qsrroRY+nFPcmpZorq3u5iT4M3s+vUKuQWs5o7qtMppB6\nOlsaz9iEBCiS1g6aabqra/Pe1RsVjRu2bQlgZiEj/S7VMzvpvirqV+JqvWIU\nPZTd\r\n=0QY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5Sc4mZ9zmvGvugGPZwg14egioBVzBYy7a9vIDMG0s+wIgWPsCcAgKRLfJiXpkOxmXZtVf841VUzce/dwVl0h2NQc="}]},"maintainers":[{"name":"alanlima","email":"alan.dev@outlook.com"}],"_npmUser":{"name":"alanlima","email":"alan.dev@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture_0.5.0_1550995948409_0.36207265322626014"},"_hasShrinkwrap":false},"0.5.1":{"name":"@alanlima/react-native-signature-capture","version":"0.5.1","description":"Fork of the original library from RepairShopr.","main":"SignatureCapture.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alanlima/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react":">=15.4.1","react-native":">=0.47"},"author":{"name":"RepairShopr"},"license":"ISC","bugs":{"url":"https://github.com/alanlima/react-native-signature-capture/issues"},"homepage":"https://github.com/alanlima/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"devDependencies":{"@babel/runtime":"^7.3.1","react":"^16.8.3","react-dom":"^16.8.3","react-hot-loader":"^4.7.1","react-native":"^0.58.5"},"gitHead":"94f4abd0077c5d6c0e9586370ee87556bee6f722","_id":"@alanlima/react-native-signature-capture@0.5.1","_nodeVersion":"10.8.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-H+wzbmum7NeGZ47wI3JuCRRwffvGBt/MzEdh4aWH37sSEr7RDNPAmeeON1HGoLNj1wiDeP6Jqihc3MeaHXfXjA==","shasum":"c05940a5134f1c7f0ac4c3d563fd92d286d48db7","tarball":"https://registry.npmjs.org/@alanlima/react-native-signature-capture/-/react-native-signature-capture-0.5.1.tgz","fileCount":35,"unpackedSize":342364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdzyXCRA9TVsSAnZWagAA3u8P/05MAuez/l3B+01xbIXj\nhTF0xlLZkJBB+QQv4TdgBb4S1UL7I/rnWh/jo1IE0KMrzkbrJEXWjBzOe/sh\nbKI39JEeG+bk2Oyraj2FA8cjBmUN/3ig4ObAD9iSDiPzKVlBcntbg/21rv6p\nLbzDrQ7EB4XAwPpSPC5oXYZaUy9SxQmIw/L+PTK9vHK/e3jyQhY+ESmHXCqt\nyAzrjudMDlYwr9oJI+l8aXHI9tlmP9N/K8Qq8dk3UwLniOK07ASQ0RisGKuH\nZm6x4FPummZAaCJEFwQOj74O8xqjbtOcK4CfqbssFe2GjHvfNAWJkB5wqEVt\ngIYNGgT4RBOOufF9fPPw3pAgQp1ol+RkxWU+xAFighbrWLvjG+hxCXgGS4oC\ncjMKj4U0fn8pdLnK7XFWQtjh6pURHy9l8kDcZDLSPG13m+zBvwA9KOGd7O34\nFGqXET1dj59hVRtTttaf1nNl7nqUKDBHeUYWkWOSiPQ2M/EyvmtKiuvMN1Xg\najZmBpmRpdfDeNWfpREhSNTfL4bHT06CIBrbM7ZizRBulcP6FwkW1cdOkR6f\nV8quNk39OS4s8TZF6dO3oLpGY4u26x7XvaCpuH4HgeUkqwj52jgwGzvPD8PB\nWnORIH9mmxfmDYFiimHdDZ4gFGegczhjQUbumFRC+rSk8Qu0q9mo9c8YKX4S\nlocC\r\n=lD4V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqxAD7uDrW22l0Qowb0ht/YubSsh4qwYq0lwy7898wGQIgEhB1peCzvNOqxQT5TM9wINeAJ4AcmmeycrAJIRM6TkY="}]},"maintainers":[{"name":"alanlima","email":"alan.dev@outlook.com"}],"_npmUser":{"name":"alanlima","email":"alan.dev@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture_0.5.1_1551318166640_0.28688351520743605"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-24T07:07:55.141Z","0.4.9":"2019-02-24T07:07:55.611Z","modified":"2022-04-04T12:33:07.696Z","0.5.0":"2019-02-24T08:12:28.563Z","0.5.1":"2019-02-28T01:42:46.828Z"},"maintainers":[{"name":"alanlima","email":"alan.dev@outlook.com"}],"description":"Fork of the original library from RepairShopr.","homepage":"https://github.com/alanlima/react-native-signature-capture#readme","keywords":["react-component","react-native","ios","signature"],"repository":{"type":"git","url":"git+https://github.com/alanlima/react-native-signature-capture.git"},"author":{"name":"RepairShopr"},"bugs":{"url":"https://github.com/alanlima/react-native-signature-capture/issues"},"license":"ISC","readme":"> This project is a fork from the original library from [RepairShopr](https://github.com/RepairShopr/react-native-signature-capture)\n\n# 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\n## Changelog (diff from original project)\n* Added option **`outputFormat`** to change the output format to either JPG or PNG **(iOS only)**. *Default on iOS: PNG*\n* Added option **`compressionQuality`** to change the output quality of the signature **(JPG on iOS only)**. *Default: 1.0*\n    ```javascript\n    <SignatureCapture \n                    outputFormat=\"jpg|png\"\n                    compressionQuality={0.5}\n                />\n    ```\n* Changed the size of the output image when **`maxSize`** is set for iOS.\n* Use function **`UIManager.getViewManagerConfig`** to return the native view. Fix for react-native v0.58+. *(For compartibility prior RN 0.58, the previous function will be used on old versions)*\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 @alanlima/react-native-signature-capture --save\n```\n\nSecond you need to link react-native-signature-capture:\n\n```sh\nreact-native link @alanlima/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 ➜ @alanlima ➜ 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 ':@alanlima_react-native-signature-capture'\nproject(':@alanlima_react-native-signature-capture').projectDir = new File(settingsDir, '../node_modules/@alanlima/react-native-signature-capture/android')\n```\n\nAdd line in your file: android/app/build.gradle\n\n```\n...\n\ndependencies {\n    ...\n    implementation project(':@alanlima_react-native-signature-capture') // <-- 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 '@alanlima/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 '@alanlima/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","readmeFilename":"README.md"}