{"_id":"@aca-mobile-os/aca-mobile-rn-drawing-canvas","name":"@aca-mobile-os/aca-mobile-rn-drawing-canvas","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aca-mobile-os/aca-mobile-rn-drawing-canvas","version":"0.1.0","description":"This package supports drawing on a canvas via Skia. This can be used for signatures or any other requirement which involves drawing and using the result.","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/src/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"example":"yarn workspace aca-mobile-rn-drawing-canvas-example","test":"jest","typecheck":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","clean":"del-cli lib","prepare":"bob build","release":"release-it","postinstall":"patch-package"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://bitbucket.org/aca-it/aca-mobile-drawing-canvas.git"},"author":{"name":"jeffreyvanelderen","email":"jeffrey.vanelderen@acagroup.be","url":"https://github.com/JeffreyVanelderenACA"},"license":"MIT","bugs":{"url":"https://bitbucket.org/aca-it/aca-mobile-drawing-canvas/issues"},"homepage":"https://bitbucket.org/aca-it/aca-mobile-drawing-canvas/src/master/README.md","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@react-native/eslint-config":"^0.72.2","@release-it/conventional-changelog":"^5.0.0","@types/jest":"^28.1.2","@types/react":"~17.0.21","@types/react-native":"0.70.0","del-cli":"^5.0.0","eslint":"^8.4.1","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","jest":"^28.1.1","prettier":"^2.0.5","react":"18.2.0","react-native":"0.72.6","react-native-builder-bob":"^0.23.2","release-it":"^15.0.0","typescript":"^5.0.2"},"resolutions":{"@types/react":"17.0.21"},"peerDependencies":{"react":"*","react-native":"*"},"dependencies":{"@shopify/react-native-skia":"^0.1.221","patch-package":"^8.0.0","react-native-gesture-handler":"^2.13.4","react-native-reanimated":"^3.5.4"},"workspaces":["example"],"packageManager":"yarn@3.6.1","engines":{"node":">= 18.0.0"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"_id":"@aca-mobile-os/aca-mobile-rn-drawing-canvas@0.1.0","gitHead":"0a904909c2da7464f7352760c37ad6ed9719fa0c","_nodeVersion":"20.8.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-6OBra4Omw+V57A5iBzj+EQNGWx4pC+EcCoDeMcRvRuvomQEQ5ERdeGOJp93Tjq/YUbEfwfQsfFLhRcDjNcheiQ==","shasum":"97c2a1df71e72b95bce1db8023eca60117db8467","tarball":"https://registry.npmjs.org/@aca-mobile-os/aca-mobile-rn-drawing-canvas/-/aca-mobile-rn-drawing-canvas-0.1.0.tgz","fileCount":17,"unpackedSize":27340,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOuQ23bV3eBIUBcL3AZ2XmdIkj9S7jT4t4IY04VHyNAAiEA0zsUVw3isoiZBL0FMIYfGUdXBD8p1mcXlyMgPOYzI24="}]},"_npmUser":{"name":"jeffreyvanelderen","email":"jeffrey.vanelderen@acagroup.be"},"directories":{},"maintainers":[{"name":"jeffreyvanelderen","email":"jeffrey.vanelderen@acagroup.be"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aca-mobile-rn-drawing-canvas_0.1.0_1717491835239_0.7821081325713375"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-04T09:03:55.108Z","0.1.0":"2024-06-04T09:03:55.387Z","modified":"2024-06-04T09:03:55.726Z"},"maintainers":[{"name":"jeffreyvanelderen","email":"jeffrey.vanelderen@acagroup.be"}],"description":"This package supports drawing on a canvas via Skia. This can be used for signatures or any other requirement which involves drawing and using the result.","homepage":"https://bitbucket.org/aca-it/aca-mobile-drawing-canvas/src/master/README.md","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://bitbucket.org/aca-it/aca-mobile-drawing-canvas.git"},"author":{"name":"jeffreyvanelderen","email":"jeffrey.vanelderen@acagroup.be","url":"https://github.com/JeffreyVanelderenACA"},"bugs":{"url":"https://bitbucket.org/aca-it/aca-mobile-drawing-canvas/issues"},"license":"MIT","readme":"# aca-mobile-rn-drawing-canvas\n\nThis package supports drawing on a canvas via Skia. This can be used for signatures or any other requirement which\ninvolves drawing and using the result.\n\n## Installation\n\n```sh\nnpm install aca-mobile-rn-drawing-canvas\n```\n\nor\n\n```sh\nyarn add aca-mobile-rn-drawing-canvas\n```\n\nThis library uses `react-native-skia` and `react-native-gesture-handler` to handle touch events. Don't forget to add\nthe `GestureHandlerRootView` in the root of your app!\n\n## Usage\n\n```js\nimport React, { useRef, useState } from 'react';\nimport { Pressable, SafeAreaView, Text, View } from 'react-native';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\nimport { DrawingCanvas } from 'aca-mobile-rn-drawing-canvas';\n\nconst App = () => {\n  const drawingCanvasRef = useRef < DrawingCanvasRef | null > (null);\n  const [isDrawingDisabled, setIsDrawingDisabled] = useState < boolean > (false);\n\n  const Controls = (\n    <View style={S.row}>\n      <Pressable\n        style={[S.controlButton, S.clearButton]}\n        onPress={() => drawingCanvasRef.current?.clearPaths()}>\n        <Text>Clear</Text>\n      </Pressable>\n      <Pressable\n        style={[S.controlButton, S.takeSnapshotButton]}\n        onPress={() =>\n          console.log(\n            'Took snapshot!',\n            drawingCanvasRef.current?.takeSnapshot()?.encodeToBase64(),\n          )\n        }>\n        <Text>Take snapshot</Text>\n      </Pressable>\n      <Pressable\n        style={[S.controlButton, S.disableButton]}\n        onPress={() => setIsDrawingDisabled(previous => !previous)}>\n        <Text>{isDrawingDisabled ? 'Enable' : 'Disable'}</Text>\n      </Pressable>\n    </View>\n  );\n\n  return (\n    <GestureHandlerRootView>\n      <SafeAreaView>\n        {Controls}\n        <DrawingCanvas\n          ref={drawingCanvasRef}\n          onDrawStart={() => console.log('drawing started')}\n          onDrawEnd={() => console.log('drawing ended')}\n          disabled={isDrawingDisabled}\n        />\n      </SafeAreaView>\n    </GestureHandlerRootView>\n  );\n};\n```\n\n## Properties\n\n| Property    | Type                                                     | Required |\n|-------------|----------------------------------------------------------|----------|\n| pathConfig  | `Partial<SkiaDefaultProps<PathProps, 'start' \\| 'end'>>` | No       |\n| disabled    | `boolean`                                                | No       |\n| style       | `ViewStyle`                                              | No       |\n| onDrawStart | `() => void`                                             | No       |\n| onDrawEnd   | `() => void`                                             | No       |\n\n## Methods via forwarded reference\n\n| Name         | Type                                           |\n|--------------|------------------------------------------------|\n| clearPaths   | `() => void`                                   |\n| takeSnapshot | `(rectangle?: SkRect) => SkImage \\| undefined` |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md"}