{"id":4008,"url":"https://github.com/jgrancher/react-native-sketch","last_synced_at":"2025-08-04T00:31:01.166Z","repository":{"id":47868253,"uuid":"58460331","full_name":"jgrancher/react-native-sketch","owner":"jgrancher","description":"🎨 A React Native \u003cSketch /\u003e component for touch-based drawing.","archived":true,"fork":false,"pushed_at":"2021-08-12T07:17:47.000Z","size":405,"stargazers_count":644,"open_issues_count":12,"forks_count":68,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-25T00:50:59.747Z","etag":null,"topics":["drawing","ios","react-native","signature","sketch","touch"],"latest_commit_sha":null,"homepage":"http://npm.im/react-native-sketch","language":"Objective-C","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/jgrancher.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-10T12:41:43.000Z","updated_at":"2024-04-16T20:34:15.000Z","dependencies_parsed_at":"2022-08-26T08:01:42.510Z","dependency_job_id":null,"html_url":"https://github.com/jgrancher/react-native-sketch","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgrancher%2Freact-native-sketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgrancher%2Freact-native-sketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgrancher%2Freact-native-sketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgrancher%2Freact-native-sketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgrancher","download_url":"https://codeload.github.com/jgrancher/react-native-sketch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576891,"owners_count":17939645,"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":["drawing","ios","react-native","signature","sketch","touch"],"created_at":"2024-01-05T20:16:58.319Z","updated_at":"2024-12-07T07:30:56.222Z","avatar_url":"https://github.com/jgrancher.png","language":"Objective-C","funding_links":[],"categories":["Components","\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e","Others"],"sub_categories":["UI"],"readme":"# 🎨 React Native Sketch [Unmaintained]\n\n[![npm](https://img.shields.io/npm/v/react-native-sketch.svg)](https://www.npmjs.com/package/react-native-sketch)\n[![Downloads](https://img.shields.io/npm/dm/react-native-sketch.svg)](https://www.npmjs.com/package/react-native-sketch)\n[![MIT License](https://img.shields.io/npm/l/react-native-sketch.svg)](http://opensource.org/licenses/MIT)\n\n**⚠️ NOTE [12/08/2021]: Archiving this repository because I haven't had the resources to maintain it for a while. Apologies.**\n\nA React Native component for touch-based drawing.\n\n![Capture](https://user-images.githubusercontent.com/5517450/29750544-da3be86c-8b84-11e7-8996-49521f7a13b3.gif)\n\n## Features\n\n- 👆 Draw with your finger, and export an image from it.\n- 🖍 Change the stroke color and thickness on the fly.\n- 👻 Generate a transparent image (or not).\n\n## Setup\n\nInstall the module from npm:\n\n```bash\nnpm i -S react-native-sketch\n```\n\nLink the module to your project:\n\n```bash\nreact-native link react-native-sketch\n```\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport { Alert, Button, View } from 'react-native';\nimport Sketch from 'react-native-sketch';\n\nexport default class MyPaint extends React.Component {\n  save = () =\u003e {\n    this.sketch.save().then(({ path }) =\u003e {\n      Alert.alert('Image saved!', path);\n    });\n  };\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cSketch\n          ref={sketch =\u003e {\n            this.sketch = sketch;\n          }}\n          strokeColor=\"#ff69b4\"\n          strokeThickness={3}\n        /\u003e\n        \u003cButton onPress={this.save} title=\"Save\" /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## API\n\nHere are the `props` of the the component:\n\n| Name | Type | Default value | Comment |\n| ---- | ---- | ------------- | ---- |\n| `fillColor` | `String` | `null` | The color of the sketch background. Default to null to keep it transparent! *Note: This is different from the `style.backgroundColor` property, as the former will be seen in your exported drawing image, whereas the latter is only used to style the view.* |\n| `imageType` | `String` | `png` | The type of image to export. Can be `png` or `jpg`. Default to `png` to get transparency out of the box. |\n| `onChange` | `Function` | `() =\u003e {}` | Callback function triggered after every change on the drawing. The function takes one argument: the actual base64 representation of your drawing.|\n| `onClear` | `Function` | `() =\u003e {}` | Callback function triggered after a `clear` has been triggered. |\n| `strokeColor` | `String` | `'#000000'` | The stroke color you want to draw with. |\n| `strokeThickness` | `Number` | `1` | The stroke thickness, in pixels. |\n| `style` | Style object | `null` | Some `View` styles if you need. |\n\nThe component also has some instance methods:\n\n| Name | Return type | Comment |\n| ---- | ----------- | ------- |\n| `clear()` | `Promise` | Clear the drawing. This method is a Promise mostly to be consistent with `save()`, but you could simply type: `this.sketch.clear();` |\n| `save()` | `Promise` | Save the drawing to an image, using the defined props as settings (`imageType`, `fillColor`, etc...). The Promise resolves with an object containing the `path` property of that image. Ex: `this.sketch.save().then(image =\u003e console.log(image.path));` |\n\n## Examples\n\nThe project contains a folder `examples` that contains few demos of how to use `react-native-sketch`. Just copy and paste the code to your React Native application.\n\n- [`Basic`](https://github.com/jgrancher/react-native-sketch/tree/master/examples/basic): uses the bare minimum to make it work.\n- [`Digital Touch`](https://github.com/jgrancher/react-native-sketch/tree/master/examples/digital-touch): tries to reproduce the look and feel of iOS Message Digital Touch.\n\nFeel free to play with them!\n\n## Known issues\n\n- Rotating the screen gets to a weird behavior of the sketch view: [#23](https://github.com/jgrancher/react-native-sketch/issues/23)\n\n## Notes\n\n- If you're using Expo, you will have to [`detach` to ExpoKit](https://docs.expo.io/versions/latest/guides/detach.html), as this module uses native iOS code.\n- The module is available *only on iOS for now*, as I don't know Android development... But if you think you can help on that matter, please feel free to create a Pull Request!\n- The module uses this [smooth freehand drawing technique](http://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164) under the hood.\n\n## Contributing\n\nFeel free to contribute by sending a pull request or [creating an issue](https://github.com/jgrancher/react-native-sketch/issues/new).\n\n## License\n\n[MIT](https://github.com/jgrancher/react-native-sketch/tree/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgrancher%2Freact-native-sketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgrancher%2Freact-native-sketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgrancher%2Freact-native-sketch/lists"}