{"_id":"@anan.k/react-native-signature-capture","_rev":"5-d12e9fb1780eaaf79823422e69358f81","name":"@anan.k/react-native-signature-capture","dist-tags":{"latest":"0.4.17"},"versions":{"0.4.12":{"name":"@anan.k/react-native-signature-capture","version":"0.4.12","keywords":["react-component","react-native","ios","signature"],"author":{"name":"Anan2kid"},"license":"ISC","_id":"@anan.k/react-native-signature-capture@0.4.12","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"dist":{"shasum":"faa5abba190f3a5466ba60e3442308471e626bcd","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.12.tgz","fileCount":95,"integrity":"sha512-pz+6Nv2NlXv7LPk0XU6YYEVXzxuHc6ST/NbHnvqpA0PxoX33U5PfEsvUKu6QOir4mjBxm5JwInnB61A4eY6uFQ==","signatures":[{"sig":"MEQCIFI8j3m4InpVKcut+ziQVrH/HPyn3vLCDLRjFJwhE0ifAiA+61IOCsboz5SG/bI/JVeVuCnl4JSi33dcCrOKmzm53g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":716773},"main":"SignatureCapture.js","gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"repository":{"url":"git+https://github.com/Anan2kid/react-native-signature-capture.git","type":"git"},"_npmVersion":"6.14.16","description":"Lets users sign their signatures","directories":{},"_nodeVersion":"12.22.12","dependencies":{"prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"peerDependencies":{"react-native":">=0.47"},"_npmOperationalInternal":{"tmp":"tmp/react-native-signature-capture_0.4.12_1731990388247_0.9871041478495859","host":"s3://npm-registry-packages"}},"0.4.13":{"name":"@anan.k/react-native-signature-capture","version":"0.4.13","keywords":["react-component","react-native","ios","signature"],"author":{"name":"Anan2kid"},"license":"ISC","_id":"@anan.k/react-native-signature-capture@0.4.13","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"dist":{"shasum":"98fc5459377767e47b5f81dd5d71cee4cc07e524","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.13.tgz","fileCount":95,"integrity":"sha512-rkqgFLZpZ6YV2hmIIPZcAtYshRrJ2haSlVP0Lsc39GXvbiWQ94gskOXz3JmB868QB1qzulhqoaL/8ka1OAkhmQ==","signatures":[{"sig":"MEUCIBgWFnPFIeQTsGfUAZWIBDtFu98jDVODNMk+ThEgviSLAiEAgH9fQausQJo4bhDF44MybVdIC+2SEJR3rICUaxu9fN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":716929},"main":"SignatureCapture.js","gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"repository":{"url":"git+https://github.com/Anan2kid/react-native-signature-capture.git","type":"git"},"_npmVersion":"6.14.16","description":"Lets users sign their signatures","directories":{},"_nodeVersion":"12.22.12","dependencies":{"prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"peerDependencies":{"react-native":">=0.47"},"_npmOperationalInternal":{"tmp":"tmp/react-native-signature-capture_0.4.13_1731993107840_0.15076875861243555","host":"s3://npm-registry-packages"}},"0.4.14":{"name":"@anan.k/react-native-signature-capture","version":"0.4.14","keywords":["react-component","react-native","ios","signature"],"author":{"name":"Anan2kid"},"license":"ISC","_id":"@anan.k/react-native-signature-capture@0.4.14","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"dist":{"shasum":"80f54b04cd70f07638a089bf6f4391427166f62d","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.14.tgz","fileCount":95,"integrity":"sha512-PQok2lJ+Ff5Li481/xrVhZKCCzOiSfNBfFTeJrsmvThiDFazzFwxJedN7gpxQeIPMg1xvF131EPEmyOXhGmCDQ==","signatures":[{"sig":"MEYCIQDNpkEvpFQpwplZed2jTbIVt2pNmtFNjO9ToSmASHyiygIhAMVsaYTwfT+J6g+h5XJ2tYByUT5n0s3gflAQKVlTcDSf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":716847},"main":"SignatureCapture.js","gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"repository":{"url":"git+https://github.com/Anan2kid/react-native-signature-capture.git","type":"git"},"_npmVersion":"6.14.16","description":"Lets users sign their signatures","directories":{},"_nodeVersion":"12.22.12","dependencies":{"prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"peerDependencies":{"react-native":">=0.47"},"_npmOperationalInternal":{"tmp":"tmp/react-native-signature-capture_0.4.14_1731994827823_0.1730012938547385","host":"s3://npm-registry-packages"}},"0.4.15":{"name":"@anan.k/react-native-signature-capture","version":"0.4.15","keywords":["react-component","react-native","ios","signature"],"author":{"name":"Anan2kid"},"license":"ISC","_id":"@anan.k/react-native-signature-capture@0.4.15","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"dist":{"shasum":"d587f5627f1317a8babbf79f592cd7805b4a211c","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.15.tgz","fileCount":95,"integrity":"sha512-x31DjeXYp70li9yKvUp9hMQhs+qQtVvenKiV/xaz4sj+N7kIvZng7IxtYrlmuSFk0Jf6AYUXNo7+XDlr+Doiqg==","signatures":[{"sig":"MEUCIFswM0U6ouHW6+6ygbSQhbDoKQrhZlK20rTW7l/Au1oeAiEA5S18+unZ+vYeMujtJe9YinxiM92JNYpz+/0UTKkmjc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":716831},"main":"SignatureCapture.js","gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"repository":{"url":"git+https://github.com/Anan2kid/react-native-signature-capture.git","type":"git"},"_npmVersion":"6.14.16","description":"Lets users sign their signatures","directories":{},"_nodeVersion":"12.22.12","dependencies":{"prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"peerDependencies":{"react-native":">=0.47"},"_npmOperationalInternal":{"tmp":"tmp/react-native-signature-capture_0.4.15_1731995647382_0.02654207638724304","host":"s3://npm-registry-packages"}},"0.4.16":{"name":"@anan.k/react-native-signature-capture","version":"0.4.16","keywords":["react-component","react-native","ios","signature"],"author":{"name":"Anan2kid"},"license":"ISC","_id":"@anan.k/react-native-signature-capture@0.4.16","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"dist":{"shasum":"c53e3223e29c972d7fc0b6b99fce5f036ffafece","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.16.tgz","fileCount":95,"integrity":"sha512-9QFktvTpxIAr7QIHt2uurDpTUcV4pUU7N2EM0oWtp58lJXykVZqNbKYDHqGr9ohBtTqkUocHJ3juUWmxridDUQ==","signatures":[{"sig":"MEUCIQCbZvufimz+cuGywLJZIcJC646k/NZfivfeVmgtuPYH4gIgDW7QmjxyutNYpnpHzp5pcuQBx20zb1hxZzU/TLRhop4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721258},"main":"SignatureCapture.js","gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"repository":{"url":"git+https://github.com/Anan2kid/react-native-signature-capture.git","type":"git"},"_npmVersion":"6.14.16","description":"Lets users sign their signatures","directories":{},"_nodeVersion":"12.22.12","dependencies":{"prop-types":"^15.5.10"},"_hasShrinkwrap":false,"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"peerDependencies":{"react-native":">=0.47"},"_npmOperationalInternal":{"tmp":"tmp/react-native-signature-capture_0.4.16_1732002743209_0.5531238262409506","host":"s3://npm-registry-packages"}},"0.4.17":{"name":"@anan.k/react-native-signature-capture","version":"0.4.17","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/Anan2kid/react-native-signature-capture.git"},"keywords":["react-component","react-native","ios","signature"],"peerDependencies":{"react-native":">=0.47"},"author":{"name":"Anan2kid"},"license":"ISC","bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","dependencies":{"prop-types":"^15.5.10"},"devDependencies":{"react":"16.13.1","react-native":"0.63.2"},"gitHead":"12d03d1a4eb56f9035a887c40b0b9e5125486156","_id":"@anan.k/react-native-signature-capture@0.4.17","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-4fhD3v/5c0uKmAmeZ1YVRwAjOCoYvq8k+2lYl9wk6EfWsCGbTYwAX80/Q1iyEAPaR/yRy4Mzhz9mmXqojqUBeA==","shasum":"b030daa76ef1b26629f010f03a503d4070f08e08","tarball":"https://registry.npmjs.org/@anan.k/react-native-signature-capture/-/react-native-signature-capture-0.4.17.tgz","fileCount":95,"unpackedSize":721363,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFid6UBgTv/b5A/fuW3f0nN6AIGIrBSroEDPut1ekCngAiEAyXGnZ+KRN9tPMyfZrMfOWJ0gmHl05wOAs2D/74sx3vA="}]},"_npmUser":{"name":"anan.k","email":"anan.kidchai@gmail.com"},"directories":{},"maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-signature-capture_0.4.17_1732003376636_0.8112454449520201"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-19T04:26:28.158Z","modified":"2024-11-19T08:02:57.086Z","0.4.12":"2024-11-19T04:26:28.496Z","0.4.13":"2024-11-19T05:11:48.096Z","0.4.14":"2024-11-19T05:40:28.070Z","0.4.15":"2024-11-19T05:54:07.640Z","0.4.16":"2024-11-19T07:52:23.454Z","0.4.17":"2024-11-19T08:02:56.905Z"},"bugs":{"url":"https://github.com/Anan2kid/react-native-signature-capture/issues"},"author":{"name":"Anan2kid"},"license":"ISC","homepage":"https://github.com/Anan2kid/react-native-signature-capture#readme","keywords":["react-component","react-native","ios","signature"],"repository":{"type":"git","url":"git+https://github.com/Anan2kid/react-native-signature-capture.git"},"description":"Lets users sign their signatures","maintainers":[{"name":"anan.k","email":"anan.kidchai@gmail.com"}],"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## Contribution\nContributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given. Please read our [Pull request guidelines](https://github.com/RepairShopr/react-native-signature-capture/wiki/Pull-Request-Guidelines) before submitting your PR\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+ **minStrokeWidth**  :  sets the min stroke line width (_Android only_)\n\n+ **maxStrokeWidth**  :  sets the max stroke line width (_Android only_)\n\n+ **backgroundColor**: Sets the background color of the component. Defaults to white. May be 'transparent'.\n\n+ **strokeColor**: Sets the color of the signature. Defaults to black.\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                    backgroundColor=\"#ff00ff\"\n                    strokeColor=\"#ffffff\"\n                    minStrokeWidth={4}\n                    maxStrokeWidth={4}\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"}