{"id":19303721,"url":"https://github.com/nuremx/react-native-autografo","last_synced_at":"2025-04-22T11:32:13.157Z","repository":{"id":99453862,"uuid":"168641048","full_name":"nuremx/react-native-autografo","owner":"nuremx","description":"React Native component allowing a user to draw their signature with their finger in a realistic style","archived":false,"fork":false,"pushed_at":"2019-02-06T19:14:45.000Z","size":2032,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T22:47:15.657Z","etag":null,"topics":["autografo","drawing","nure","react-native","signature","uber-signature"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/nuremx.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":"2019-02-01T04:14:56.000Z","updated_at":"2023-03-15T07:17:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"e43e810b-fbc0-4168-8e92-6d3f38a83809","html_url":"https://github.com/nuremx/react-native-autografo","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuremx%2Freact-native-autografo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuremx%2Freact-native-autografo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuremx%2Freact-native-autografo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuremx%2Freact-native-autografo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuremx","download_url":"https://codeload.github.com/nuremx/react-native-autografo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250232214,"owners_count":21396595,"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":["autografo","drawing","nure","react-native","signature","uber-signature"],"created_at":"2024-11-09T23:27:16.406Z","updated_at":"2025-04-22T11:32:13.132Z","avatar_url":"https://github.com/nuremx.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eAutografo\u003c/h1\u003e\n\n![React Native Autografo](resources/autografo.gif)\n\n[![npm version](https://badge.fury.io/js/react-native-autografo.svg)](https://www.npmjs.com/package/react-native-autografo)\n[![Swift Version](https://img.shields.io/badge/Swift-4.0.x-orange.svg)](https://swift.org)\n\n[![downloads](https://img.shields.io/npm/dw/react-native-autografo.svg)](https://www.npmjs.com/package/react-native-autografo)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/nuremx/react-native-autografo/pulls)\n\n\u003e Currently iOS only\n\nReact Native component to obtain user signature as a png image, saved to device storage or returned as base64 string. Based on [**Uber Signature**](https://github.com/uber/UberSignature).\n\n## Installation\n\n```bash\nyarn add react-native-autografo\n```\n\nLink module\n\n```bash\nreact-native link react-native-autografo\n```\n\n### iOS Notes\n\n**Important**. Since this module uses Swift and RN projects are based in Obj-C, you will need to \u003cins\u003eadd an empty Swift file\u003c/ins\u003e to your Xcode project to make this library work. See related [Stack Overflow Post](https://stackoverflow.com/questions/50096025/it-gives-errors-when-using-swift-static-library-with-objective-c-project)\n\n## Usage\n\n```jsx\nclass MyComponent extends Component {\n  handleSave = ({ url, base64 }) =\u003e {\n    // Depending how save is called or fileName property is provided, will return url or base 64\n    console.log({ url, base64 })\n  }\n\n  handleReset = () =\u003e {\n    console.log('Signature has been reset')\n  }\n\n  render() {\n    return (\n      \u003cAutografo\n        stroke={{ color: '#000000' }}\n        onSave={this.handleSave}\n        onReset={this.handleReset}\n        fileName=\"signature\"\n      \u003e\n        {(save, reset) =\u003e (\n          {/* This will be the controls showed at the top of the view */}\n          \u003cView\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              flexDirection: 'row',\n              height: 'auto',\n              width: '100%',\n            }}\n          \u003e\n            \u003cButton title=\"Save\" onPress={() =\u003e save()} /\u003e\n            \u003cButton title=\"Reset\" onPress={() =\u003e reset()} /\u003e\n          \u003c/View\u003e\n        )}\n      \u003c/Autografo\u003e\n    )\n  }\n}\n```\n\n### Props\n\n| Name       | Value                                | Description                                                                                                           |\n| ---------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |\n| `stroke`   | `{ color: String }` _optional_       | Properties for signature's stroke, TODO support stroke width                                                          |\n| `onSave`   | `({ url, base64 }) =\u003e {}` _optional_ | Gets called when `save` has triggered and image is ready, will return `url` or `base64` depending on `save` arguments |\n| `fileName` | `String` _optional_                  | Alternative to `save({ fileName: String })` will make to return a url path                                            |\n| `children` | `Function` _optional_                | Function receiving `save` and `reset` parameters to be called                                                         |\n\n### Methods\n\n| Name    | Parameters                              | Description                                                                                                                                                                        |\n| ------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `save`  | `{ asFile: Boolean, fileName: String }` | When called, and nor parameter is given the component will return a base64 encoded png image, if asFile is provided as true will return url path for png image at device's storage |\n| `reset` | None                                    | Will reset the signature's view                                                                                                                                                    |\n\n## Todo\n\n- [ ] Set stroke width\n- [ ] Android version\n\n## License\n\nBased on the awesome project [**Uber Signature**](https://github.com/uber/UberSignature)\n\nMIT - LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuremx%2Freact-native-autografo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuremx%2Freact-native-autografo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuremx%2Freact-native-autografo/lists"}