{"id":15562693,"url":"https://github.com/mym0404/react-native-pencil-kit","last_synced_at":"2025-08-16T21:13:47.624Z","repository":{"id":237082164,"uuid":"793796442","full_name":"mym0404/react-native-pencil-kit","owner":"mym0404","description":"🎨 iOS PencilKit Component for React Native","archived":false,"fork":false,"pushed_at":"2024-07-04T08:21:03.000Z","size":6862,"stargazers_count":46,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-11T03:34:11.750Z","etag":null,"topics":["apple","draw","drawing","ios","pencil","pencil-kit","pencilkit","react","react-native","react-native-draw","react-native-pencil-kit","react-native-pencilkit","sketch"],"latest_commit_sha":null,"homepage":"","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/mym0404.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["mym0404"]}},"created_at":"2024-04-29T22:08:27.000Z","updated_at":"2025-08-04T13:23:27.000Z","dependencies_parsed_at":"2025-03-06T19:31:31.120Z","dependency_job_id":"9a781721-f485-458a-99ce-2e131ddce625","html_url":"https://github.com/mym0404/react-native-pencil-kit","commit_stats":null,"previous_names":["mym0404/react-native-pencil-kit"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/mym0404/react-native-pencil-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-pencil-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-pencil-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-pencil-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-pencil-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mym0404","download_url":"https://codeload.github.com/mym0404/react-native-pencil-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-pencil-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269832315,"owners_count":24482309,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["apple","draw","drawing","ios","pencil","pencil-kit","pencilkit","react","react-native","react-native-draw","react-native-pencil-kit","react-native-pencilkit","sketch"],"created_at":"2024-10-02T16:15:55.904Z","updated_at":"2025-08-16T21:13:47.591Z","avatar_url":"https://github.com/mym0404.png","language":"Objective-C++","funding_links":["https://github.com/sponsors/mym0404"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/mym0404/react-native-pencil-kit\"\u003e\n    \u003cimg width=\"160px\" src=\"https://raw.githubusercontent.com/mym0404/image-archive/master/202405040314257.webp\"\u003e\u003cbr/\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eReact Native Pencil Kit\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-pencil-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-native-pencil-kit.svg?style=flat-square\" alt=\"NPM downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-pencil-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-native-pencil-kit.svg?style=flat-square\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/react-native-pencil-kit.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eiOS Easy \u0026 Robust Pencil Kit Porting\u003c/h3\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n**React Native Pencil Kit** is a full API support iOS PencilKit framework porting.\n\n![preview](https://raw.githubusercontent.com/mym0404/image-archive/master/202405040325760.webp)\n\n## Getting Started\n\n```shell\nyarn add react-native-pencil-kit\n```\n\nLink `PencilKit.framework` in the Xcode application project settings\n\n![xcode](https://raw.githubusercontent.com/mym0404/image-archive/master/202405041628753.webp)\n\n\u003e With Fabric, we should access c++ functions and we should use objective-c++.\n\u003e This prevents us from Apple SDK framework module importing and we cannot link PencilKit automatically at now.\n\u003e If you are using `use_frameworks!`(dynamic linking), this configuration is maybe not required.\n\n## Usage\n\n```tsx\nimport PencilKitView, { type PencilKitRef, type PencilKitTool } from 'react-native-pencil-kit';\n\n\u003cPencilKitView style={{ flex: 1 }} /\u003e\n```\n\n\u003e [!NOTE]\n\u003e You can explore full example! [Full Example](https://github.com/mym0404/react-native-pencil-kit/blob/main/example/src/App.tsx)\n\n## Props\n\n| Props                             | Description                                                                                                                    | Default |\n|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------|---------|\n| alwaysBounceVertical              | A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content.         | true    |\n| alwaysBounceHorizontal            | A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.  | true    |\n| isRulerActive                     | A Boolean value that indicates whether a ruler view is visible on the canvas.                                                  | false   |\n| drawingPolicy                     | The policy that controls the types of touches allowed when drawing on the canvas. This properties can be applied from iOS 14.0 | default |\n| backgroundColor                   | The canvas background color                                                                                                    | none    |\n| isOpaque                          | Whether the canvas is opaque                                                                                                   | true    |\n| toolPickerVisibilityDidChange     | Tells the delegate that the tool picker UI changed visibility.                                                                 |         |\n| toolPickerIsRulerActiveDidChange  | Tells the delegate that the ruler active state was changed by the user.                                                        |         |\n| toolPickerFramesObscuredDidChange | Tells the delegate that the frames the tool picker obscures changed.                                                           |         |\n| toolPickerSelectedToolDidChange   | Tells the delegate that the selected tool was changed by the user.                                                             |         |\n| canvasViewDidBeginUsingTool       | Called when the user starts using a tool, eg. selecting, drawing, or erasing.                                                  |         |\n| canvasViewDidEndUsingTool         | Called when the user stops using a tool, eg. selecting, drawing, or erasing.                                                   |         |\n| canvasViewDrawingDidChange        | Called after the drawing on the canvas did change.                                                                             |         |\n| canvasViewDidFinishRendering      | Called after setting `drawing` when the entire drawing is rendered and visible.                                                |         |\n\n## Commands\n\n\n| Method                                                                                   | Description                                            | Etc                                                                                |\n|------------------------------------------------------------------------------------------|--------------------------------------------------------|------------------------------------------------------------------------------------|\n| `clear(): void`                                                                          | Clear canvas                                           |                                                                                    |\n| `showToolPicker(): void`                                                                 | Show Palette                                           |                                                                                    |\n| `hideToolPicker(): void`                                                                 | Hide Palette                                           |                                                                                    |\n| `redo(): void`                                                                           | Redo last drawing action                               |                                                                                    |\n| `undo(): void`                                                                           | Undo last drawing action                               |                                                                                    |\n| `saveDrawing(path: string): Promise\u003cstring\u003e`                                             | Save drawing data into file system, return base64 data |                                                                                    |\n| `getBase64Data(): Promise\u003cstring\u003e`                                                       | Get current drawing data as base64 string form         |                                                                                    |\n| `getBase64PngData(options: { scale?: number }): Promise\u003cstring\u003e`                         | Get current drawing data as base64 png  form           | `scale = 0` means use default `UIScreen.main.scale`                                |\n| `getBase64JpegData(options: { scale?: number; compression?: number }): Promise\u003cstring\u003e`  | Get current drawing data as base64 jpeg  form          | `scale = 0` means use default `UIScreen.main.scale`. default compression is `0.93` |\n| `loadDrawing(path: string): Promise\u003cvoid\u003e`                                               | Load drawing data from file system                     |                                                                                    |\n| `loadBase64Data(base64: string): Promise\u003cvoid\u003e`                                          | Load base64 drawing data into canvas                   | Use base64 get from `getBase64Data()`                                              |\n| `setTool(params: { toolType: PencilKitTool; width?: number; color?: ColorValue }): void` | Set `PencilKitTool` type with width and color          |                                                                                    |\n\n## Tools\n\n```tsx\n- pen\n- pencil\n- marker\n- monoline // ios 17\n- fountainPen // ios 17\n- watercolor // ios 17\n- crayon // ios 17\n- eraserVector // width is supported from 16.4\n- eraserBitmap // width is supported from 16.4\n- eraserFixedWidthBitmap // ios 16.4\n```\n\n## Utils\n\nUse `PencilKitUtil` for using utilty functions.\n\n- `getAvailableTools(): string[]`\n- `isPencilKitAvailable(): boolean`\n\n## Troubleshooting\n\n- Pencilkit is not rendered\n  - This package supports only equal or greater than 14.0 version.\n  - This package supports only Fabric.\n\n## Contributing\n\n- [Contributing](https://github.com/mym0404/react-native-pencil-kit/blob/main/CONTRIBUTING.md)\n- [Issues](https://github.com/mym0404/react-native-pencil-kit/issues)\n- [PRs](https://github.com/mym0404/react-native-pencil-kit/pulls)\n- [Code of Conduct](https://github.com/mym0404/react-native-pencil-kit/blob/main/CODE_OF_CONDUCT.md)\n\n## License\n\n- See [LICENSE](/LICENSE)\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mjstudio.net/\"\u003e\n    \u003cimg width=\"75px\" src=\"https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp\"\u003e\n  \u003c/a\u003e\n  \u003cp align=\"center\"\u003e\n    Built and maintained by \u003ca href=\"https://mjstudio.net/\"\u003eMJ Studio\u003c/a\u003e.\n  \u003c/p\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmym0404%2Freact-native-pencil-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmym0404%2Freact-native-pencil-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmym0404%2Freact-native-pencil-kit/lists"}