{"_id":"@brenohq/react-native-signature-capture","_rev":"1-f2a5ef2f141022cedbdfb5c0d567a5b5","name":"@brenohq/react-native-signature-capture","dist-tags":{"latest":"0.4.10"},"versions":{"0.4.10":{"name":"@brenohq/react-native-signature-capture","version":"0.4.10","private":false,"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/mrcluc/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":"392d4acade007ca86a58565ef69dc4190a9cfff6","_id":"@brenohq/react-native-signature-capture@0.4.10","_nodeVersion":"12.9.1","_npmVersion":"6.11.2","dist":{"integrity":"sha512-BX4NWo761aFvKU3/EztVz2J1Sgg/lfpRNnX8PcDAKRJ90hWxPSkNS9Tp4+nSHULeJq2A24DIpixihpl+l2X30g==","shasum":"65ed9139d9842bb66223d0ce20cdfc7c45bf69ed","tarball":"https://registry.npmjs.org/@brenohq/react-native-signature-capture/-/react-native-signature-capture-0.4.10.tgz","fileCount":81,"unpackedSize":474633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZG/CRA9TVsSAnZWagAAwLYP/iyot5af+t09vm4NbtiL\n+x1YwP0nU2YZRz3Mtmp6FxQVtwQ9xanjEXvivcpWNfgTjL5kXq27quDO27ps\n03cARpJ/Rs5QIx2w8PEBHMxr0WSeo2dYGKzJ+1n6rWABfbpGnAfLIOe64HJC\naPzuC89kLoZ0pRTWiDxvRt5cDOlyDJUZOf3mAN9fbLY6W00I1WxQWPQDHUOq\nAa34KaizQIP2HusiWpLr+idMcSUbHztfRsTZcAdTSPeUkNNhcmbkwWeFlj0A\nSHuT4t8ubBDo5O4TV8tx/X0UVmOoF6xF7dL98L90/gkFM1YZB59cDpMirWTD\nwpz8sqCIXcNMY2PZRns76/J3I+qaNic2/SSojZa867br1mJDIA8wTl/Syt9M\nFWk1pYaE0Zq51ikkwrvPPAhMgSkX1p1sTQFxwR88du6G5JR0+yBZrHuoObK2\nLwiDE4nJyLOgLiE/2Muau3bqjPqCs71e5Eyy6eYvngRS5URc5QDq5FzUHbB9\ns3VeYsCItmrU7lYTSTIFTFBau6D+J4XJwPPYW+ylcUlPwtALYUsPVut7rnWN\ni8dM0gbXUJIdeF/Q8xfDrQs6ejRZOUVw8fl6VqEnsJlYv95YIfmuTv0J0P4o\nO8JX+zoin18fp9UMXo8jOCBKcv08GxWD9E0w+CC3+xoLQcztmqHjPUK1YfE2\nzAVZ\r\n=S1jC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHOwxEZXH5Vgk/t6htpEsk71FgI3AMbXAsDEv/Wk+cKgIhANyuwuQrk8xpkrU4jivJLrrybF14SW8KsYFOYkRI8jY8"}]},"maintainers":[{"name":"brenohq","email":"contato@brenohq.com"}],"_npmUser":{"name":"brenohq","email":"contato@brenohq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture_0.4.10_1566937534391_0.9073575213273808"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-27T20:25:34.188Z","0.4.10":"2019-08-27T20:25:34.592Z","modified":"2022-04-04T20:31:25.879Z"},"maintainers":[{"name":"brenohq","email":"contato@brenohq.com"}],"description":"Lets users sign their signatures","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/mrcluc/react-native-signature-capture.git"},"author":{"name":"RepairShopr"},"bugs":{"url":"https://github.com/RepairShopr/react-native-signature-capture/issues"},"license":"ISC","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","readmeFilename":"README.md"}