{"_id":"@amwebexpert/react-native-sign-here","_rev":"18-c96add2e6776be4d29468045f72b62e8","name":"@amwebexpert/react-native-sign-here","dist-tags":{"latest":"1.3.5"},"versions":{"1.3.5":{"name":"@amwebexpert/react-native-sign-here","version":"1.3.5","keywords":["react-native","signature","signature-pad","drawing","canvas","svg","typescript","handwriting","digital-signature","gesture-handler","reanimated"],"author":{"name":"André Masson","email":"amwebexpert@gmail.com"},"license":"MIT","_id":"@amwebexpert/react-native-sign-here@1.3.5","maintainers":[{"name":"amwebexpertorg","email":"amwebexpert@gmail.com"}],"homepage":"https://github.com/amwebexpert/react-native-sign-here#readme","bugs":{"url":"https://github.com/amwebexpert/react-native-sign-here/issues"},"dist":{"shasum":"180a342497e7b54828a7e3d069d74c099bc35fee","tarball":"https://registry.npmjs.org/@amwebexpert/react-native-sign-here/-/react-native-sign-here-1.3.5.tgz","fileCount":66,"integrity":"sha512-RxpnFnoht3sJoxNQAJ+1/lxFx2Xrv5o36nVH6hZ/k2mmnRLb7Rxj58zERnJuXgMTOUQs7IQqqzhIcD9aUFdC7g==","signatures":[{"sig":"MEYCIQDDbALjdeBmv+4w3AKcTPfHEw86bEPTmAxXRpGInkakwgIhAOkgEAnmJ3UrVbCi3n0F38XlY9YFhZydQGQ0s46DHmc2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":125266},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"ab3718b39398319164f7876a7f3a5bc8295554af","scripts":{"lint":"eslint . --ext .js,.jsx,.ts,.tsx","test":"jest","build":"rimraf dist && tsc","format":"prettier --write \"src/**/*.{js,jsx,ts,tsx}\"","lint:fix":"eslint . --ext .js,.jsx,.ts,.tsx --fix","clean:node":"npx rimraf node_modules yarn.lock","format:check":"prettier --check \"src/**/*.{js,jsx,ts,tsx}\""},"_npmUser":{"name":"amwebexpertorg","email":"amwebexpert@gmail.com"},"repository":{"url":"git+https://github.com/amwebexpert/react-native-sign-here.git","type":"git"},"_npmVersion":"11.5.2","description":"![Framework | React Native](https://img.shields.io/badge/Framework-React%20Native-61DAFB.svg) ![Platform | Android](https://img.shields.io/badge/Platform-Android-green.svg) ![Platform | iOS](https://img.shields.io/badge/Platform-iOS-blue.svg)","directories":{},"_nodeVersion":"23.3.0","dependencies":{"simplify-js":"^1.2.4","parse-svg-path":"^0.1.2","fast-xml-parser":"^5.2.5"},"_hasShrinkwrap":false,"devDependencies":{"jest":"29","eslint":"^9.32.0","rimraf":"^6.0.1","ts-jest":"^29.4.1","prettier":"^3.6.2","typescript":"^5.8.4","@types/jest":"^29.0.0","@types/react":"^19.1.9","@types/react-native":"^0.73.0","eslint-plugin-react":"^7.37.5","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.3","@babel/preset-typescript":"^7.27.1","@typescript-eslint/parser":"^8.38.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-native":"^5.0.0","metro-react-native-babel-preset":"^0.77.0","@typescript-eslint/eslint-plugin":"^8.38.0"},"peerDependencies":{"react":">=18.0.0","react-native":"*","react-native-svg":"*","react-native-reanimated":"*","react-native-gesture-handler":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-sign-here_1.3.5_1765215442159_0.7389058088411578","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-12-08T17:37:22.039Z","modified":"2025-12-08T17:54:42.801Z","1.0.0":"2025-08-03T21:30:04.758Z","1.0.1":"2025-08-03T22:53:01.059Z","1.0.2":"2025-08-04T10:23:25.545Z","1.0.3":"2025-08-04T10:41:32.153Z","1.0.5":"2025-08-04T10:57:10.697Z","1.0.6":"2025-08-04T12:16:46.103Z","1.0.7":"2025-08-04T20:09:31.142Z","1.1.0":"2025-08-04T21:44:33.741Z","1.2.0":"2025-08-04T22:30:24.620Z","1.2.1":"2025-08-04T23:34:37.558Z","1.2.2":"2025-08-05T00:32:32.043Z","1.2.3":"2025-08-05T12:14:47.641Z","1.2.4":"2025-08-06T01:06:27.609Z","1.3.0":"2025-08-06T15:19:55.470Z","1.3.1":"2025-12-08T16:31:26.372Z","1.3.5":"2025-12-08T17:37:22.353Z"},"bugs":{"url":"https://github.com/amwebexpert/react-native-sign-here/issues"},"author":{"name":"André Masson","email":"amwebexpert@gmail.com"},"license":"MIT","homepage":"https://github.com/amwebexpert/react-native-sign-here#readme","keywords":["react-native","signature","signature-pad","drawing","canvas","svg","typescript","handwriting","digital-signature","gesture-handler","reanimated"],"repository":{"url":"git+https://github.com/amwebexpert/react-native-sign-here.git","type":"git"},"description":"![Framework | React Native](https://img.shields.io/badge/Framework-React%20Native-61DAFB.svg) ![Platform | Android](https://img.shields.io/badge/Platform-Android-green.svg) ![Platform | iOS](https://img.shields.io/badge/Platform-iOS-blue.svg)","maintainers":[],"readme":"# react-native-sign-here\n\n![Framework | React Native](https://img.shields.io/badge/Framework-React%20Native-61DAFB.svg) ![Platform | Android](https://img.shields.io/badge/Platform-Android-green.svg) ![Platform | iOS](https://img.shields.io/badge/Platform-iOS-blue.svg) \n\n[![npm](https://img.shields.io/npm/v/@amwebexpert/react-native-sign-here)](https://www.npmjs.com/package/@amwebexpert/react-native-sign-here)\n[![npm downloads](https://img.shields.io/npm/dm/@amwebexpert/react-native-sign-here)](https://www.npmjs.com/package/@amwebexpert/react-native-sign-here) [![License](https://img.shields.io/npm/l/@amwebexpert/react-native-sign-here)](./LICENSE) ![GitHub last commit](https://img.shields.io/github/last-commit/amwebexpert/react-native-sign-here) ![Latest tag](https://img.shields.io/github/v/tag/amwebexpert/react-native-sign-here)\n\n\nA React Native signature pad with SVG support and smooth drawing capabilities. Perfect for capturing digital signatures and handwriting in mobile applications. Built with the following native dependencies:\n\n- [`react-native-svg`](https://www.npmjs.com/package/react-native-svg)\n- [`react-native-gesture-handler`](https://www.npmjs.com/package/react-native-gesture-handler)\n- [`react-native-reanimated`](https://www.npmjs.com/package/react-native-reanimated)\n\n## Screenshots\n\niOS                                                   | Android\n------------------------------------------------------|----------------------------------------------------------\n<img width=\"300\" src=\"docs/images/example-ios.png\" /> | <img width=\"300\" src=\"docs/images/example-android.jpg\" />\n\n## Why Choose `react-native-sign-here`?\n\n### Key Advantages\n\n- **Native Performance**: Built with native React Native components (SVG + Gesture Handler) instead of WebView, providing smoother drawing and better performance.\n- **Lightweight**: No WebView dependency means smaller bundle size and faster startup times.\n- **Better Integration**: Seamless integration with the React Native ecosystem and easier debugging.\n\n## Features\n\n- Smooth signature drawing with gesture handling\n- SVG-based rendering for crisp signatures\n- Support for both `iOS` and `Android` platforms, compatible with Expo SDK\n- Built-in `TypeScript` definitions\n- Customizable stroke width and color\n- Undo, Clear, and Reset features\n- Import & Export SVG signatures as XML\n\n> **Note**: Import / Export are in XML (SVG file format) by default. If your project requires a bitmap format (like PNG or JPEG) consider using [react-native-view-shot](https://github.com/gre/react-native-view-shot).\n\nIf this project has helped you, please support us with a GitHub star 🌟.\n\n### Alternative Libraries\n\n- [react-native-signature-canvas](https://npmjs.com/package/react-native-signature-canvas)\n- [react-native-canvas](https://npmjs.com/package/react-native-canvas)\n\n\n## Setup\n\n### Installation\n\nTo install the library and all its peer dependencies, run one of the following commands:\n\n```bash\nyarn add react-native-sign-here react-native-gesture-handler react-native-reanimated react-native-svg\n```\n\nor\n\n```bash\nnpm install --save react-native-sign-here react-native-gesture-handler react-native-reanimated react-native-svg\n```\n\n### Basic Usage\n\nThe simplest way to use the signature pad:\n\n```tsx\nimport React, { useRef } from 'react';\nimport { View, Button } from 'react-native';\nimport SignHere, { ExportFormat, DrawHereRef } from 'react-native-sign-here';\n\nconst SignatureScreen = () => {\n  const signatureRef = useRef<DrawHereRef>(null);\n\n  const handleSave = async () => {\n    if (signatureRef.current) {\n      const svg = await signatureRef.current.exportSvg();\n      console.log('Signature SVG:', svg);\n    }\n  };\n\n  const handleClear = () => {\n    signatureRef.current?.clear();\n  };\n\n  return (\n    <View style={{ flex: 1, padding: 20 }}>\n      <SignHere\n        ref={signatureRef}\n        strokeColor=\"black\"\n        strokeWidth={1}\n        onChange={(state: DrawingState) => {\n          console.log('Drawing state changed:', state);\n        }}\n      />\n      <Button title=\"Save Signature\" onPress={handleSave} />\n      <Button title=\"Clear\" onPress={handleClear} />\n    </View>\n  );\n};\n```\n\n### Advanced Usage\n\n#### Custom Styling and Configuration\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport { View, Button, Text } from 'react-native';\nimport SignHere, { DrawingState, ExportFormat, DrawHereRef } from 'react-native-sign-here';\n\nconst AdvancedSignatureScreen = () => {\n  const signatureRef = useRef<DrawHereRef>(null);\n  const [isSigned, setIsSigned] = useState(false);\n\n  const handleSignatureChange = (state: DrawingState) => {\n    setIsSigned(state.elements.length > 0);\n  };\n\n  const handleUndo = () => {\n    signatureRef.current?.undo();\n  };\n\n  const handleReset = () => {\n    signatureRef.current?.reset();\n  };\n\n  const handleImportSvg = () => {\n    const sampleSvg = `<svg width=\"200\" height=\"100\">\n      <path d=\"M10 10 L50 50 L90 10\" stroke=\"#000\" stroke-width=\"2\" fill=\"none\"/>\n    </svg>`;\n    signatureRef.current?.importSvg(sampleSvg);\n  };\n\n  return (\n    <View style={{ flex: 1, padding: 20 }}>\n      <Text style={{ fontSize: 18, marginBottom: 10 }}>\n        {isSigned ? 'Signature captured' : 'Please sign below'}\n      </Text>\n      \n      <SignHere\n        ref={signatureRef}\n        strokeColor=\"#2E86AB\"\n        strokeWidth={3}\n        onChange={handleSignatureChange}\n      />\n      \n      <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }}>\n        <Button title=\"Undo\" onPress={handleUndo} />\n        <Button title=\"Reset\" onPress={handleReset} />\n        <Button title=\"Import SVG\" onPress={handleImportSvg} />\n      </View>\n    </View>\n  );\n};\n```\n\n### Even more advanced usage \n\n- [Expo SDK demo screen](https://github.com/amwebexpert/poc-archiver-expo/blob/master/src/features/experiments/native-signature-pad.tsx)\n\n## Examples\n\nWorking examples are available in the `src/examples/` directory:\n\n- **Basic Usage**: Simple signature capture with save and clear functionality\n- **Advanced Usage**: Custom styling, undo/reset, and SVG import capabilities  \n- **Form Validation**: Integration with form validation and submission\n\n\n## API Reference\n\nThe default exported component (you name it the way you want like `SignHere` or `DrawHere`) for capturing gestures.\n\n#### Props\n\n| Prop          | Type                            | Default     | Description                               |\n|---------------|---------------------------------|-------------|-------------------------------------------|\n| `strokeColor` | `string`                        | `\"black\"`   | Color of the drawing stroke               |\n| `strokeWidth` | `number`                        | `1`         | Width of the drawing stroke               |\n| `onChange`    | `(state: DrawingState) => void` | `undefined` | Callback fired when drawing state changes |\n\n#### Ref Methods\n\n| Method                  | Parameters                | Return Type | Description                                     |\n|-------------------------|---------------------------|-------------|-------------------------------------------------|\n| `clear()`               | -                         | `void`      | Clears all drawings from the canvas             |\n| `undo()`                | -                         | `void`      | Undoes the last drawing action                  |\n| `reset(elements?)`      | `SvgElement[]` (optional) | `void`      | Resets the canvas, optionally with new elements |\n| `exportSvg()`           | -                         | `string`    | Exports the drawing as SVG string               |\n| `importSvg(svgContent)` | `string`                  | `void`      | Imports an SVG string into the canvas           |\n\n## References\n\n* [Useful Information & Commands](docs/usefull-commands.md)\n* [Contributing](docs/CONTRIBUTING.md)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}