{"id":16454649,"url":"https://github.com/opengeekslab/react-native-signature-capture","last_synced_at":"2026-05-13T08:02:10.095Z","repository":{"id":80261802,"uuid":"114745140","full_name":"openGeeksLab/react-native-signature-capture","owner":"openGeeksLab","description":null,"archived":false,"fork":false,"pushed_at":"2017-12-19T09:25:36.000Z","size":990,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T22:28:16.237Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openGeeksLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-19T09:24:14.000Z","updated_at":"2017-12-19T09:25:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"8cd478cf-d2a8-4ff0-860a-3a21991261c0","html_url":"https://github.com/openGeeksLab/react-native-signature-capture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/openGeeksLab/react-native-signature-capture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openGeeksLab%2Freact-native-signature-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openGeeksLab%2Freact-native-signature-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openGeeksLab%2Freact-native-signature-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openGeeksLab%2Freact-native-signature-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openGeeksLab","download_url":"https://codeload.github.com/openGeeksLab/react-native-signature-capture/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openGeeksLab%2Freact-native-signature-capture/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32973318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T06:31:55.726Z","status":"ssl_error","status_checked_at":"2026-05-13T06:31:51.336Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T10:19:32.921Z","updated_at":"2026-05-13T08:02:10.068Z","avatar_url":"https://github.com/openGeeksLab.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"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\u003cimg src=\"http://i.giphy.com/3oEduIyWb48Ws3bSuc.gif\" /\u003e\n\n### Android\n\u003cimg src=\"http://i.giphy.com/xT0GUKJFFkdDv25FNC.gif\" /\u003e\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 \u003c...\u003e\n2. Go to node_modules ➜ react-native-signature-capture ➜ ios ➜ select RSSignatureCapture.xcodeproj\n3. Add libRSSignatureCapture.a to Build Phases -\u003e 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') // \u003c-- add this line\n}\n```\n\nAdd import and line in your file: android/app/src/main/java/\u003c...\u003e/MainApplication.java\n\n```java\n...\n\nimport com.rssignaturecapture.RSSignatureCapturePackage; // \u003c-- 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\u003cReactPackage\u003e getPackages() {\n            return Arrays.\u003cReactPackage\u003easList(\n                new MainReactPackage(),\n                new RSSignatureCapturePackage() // \u003c-- 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      \u003cSignatureCapture\n        {...someProps}\n      /\u003e\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            \u003cView style={{ flex: 1, flexDirection: \"column\" }}\u003e\n                \u003cText style={{alignItems:\"center\",justifyContent:\"center\"}}\u003eSignature Capture Extended \u003c/Text\u003e\n                \u003cSignatureCapture\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\"}/\u003e\n\n                \u003cView style={{ flex: 1, flexDirection: \"row\" }}\u003e\n                    \u003cTouchableHighlight style={styles.buttonStyle}\n                        onPress={() =\u003e { this.saveSign() } } \u003e\n                        \u003cText\u003eSave\u003c/Text\u003e\n                    \u003c/TouchableHighlight\u003e\n\n                    \u003cTouchableHighlight style={styles.buttonStyle}\n                        onPress={() =\u003e { this.resetSign() } } \u003e\n                        \u003cText\u003eReset\u003c/Text\u003e\n                    \u003c/TouchableHighlight\u003e\n\n                \u003c/View\u003e\n\n            \u003c/View\u003e\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', () =\u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopengeekslab%2Freact-native-signature-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopengeekslab%2Freact-native-signature-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopengeekslab%2Freact-native-signature-capture/lists"}