{"id":13776481,"url":"https://github.com/RepairShopr/react-native-signature-capture","last_synced_at":"2025-05-11T10:31:05.388Z","repository":{"id":34830616,"uuid":"38818750","full_name":"RepairShopr/react-native-signature-capture","owner":"RepairShopr","description":"A simple modular component for react native (iOS) to capture a signature as an image","archived":false,"fork":false,"pushed_at":"2024-07-17T10:06:38.000Z","size":1637,"stargazers_count":965,"open_issues_count":201,"forks_count":517,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-01T07:38:07.182Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":"Unmaintained","scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RepairShopr.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":"2015-07-09T12:25:55.000Z","updated_at":"2025-04-08T16:53:00.000Z","dependencies_parsed_at":"2023-01-15T09:30:31.652Z","dependency_job_id":"d6aaddb5-aff4-42cf-8141-1ef441b47366","html_url":"https://github.com/RepairShopr/react-native-signature-capture","commit_stats":{"total_commits":104,"total_committers":24,"mean_commits":4.333333333333333,"dds":0.6442307692307692,"last_synced_commit":"04de315667c4d05653b5732904d74b1e3e73907e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RepairShopr%2Freact-native-signature-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RepairShopr%2Freact-native-signature-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RepairShopr%2Freact-native-signature-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RepairShopr%2Freact-native-signature-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RepairShopr","download_url":"https://codeload.github.com/RepairShopr/react-native-signature-capture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551572,"owners_count":21926317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-08-03T18:00:27.179Z","updated_at":"2025-05-11T10:31:03.725Z","avatar_url":"https://github.com/RepairShopr.png","language":"Objective-C","funding_links":[],"categories":["Objective-C","\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e"],"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## 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 \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+ **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            \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                    backgroundColor=\"#ff00ff\"\n                    strokeColor=\"#ffffff\"\n                    minStrokeWidth={4}\n                    maxStrokeWidth={4}\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRepairShopr%2Freact-native-signature-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRepairShopr%2Freact-native-signature-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRepairShopr%2Freact-native-signature-capture/lists"}