{"_id":"@dck/react-native-signature-canvas","name":"@dck/react-native-signature-canvas","dist-tags":{"latest":"4.7.3"},"versions":{"4.7.3":{"name":"@dck/react-native-signature-canvas","version":"4.7.3","description":"React Native Signature Component based Canvas for Android && IOS && expo","main":"index.js","scripts":{"genlog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","postversion":"git push --follow-tags"},"repository":{"type":"git","url":"git+https://github.com/YanYuanFE/react-native-signature-canvas.git"},"keywords":["react-native","react component","ios","android","signature","pad","canvas","expo"],"author":{"name":"YanYuanFE"},"license":"MIT","bugs":{"url":"https://github.com/YanYuanFE/react-native-signature-canvas/issues"},"homepage":"https://github.com/YanYuanFE/react-native-signature-canvas#readme","peerDependencies":{"react-native-webview":">=13"},"_id":"@dck/react-native-signature-canvas@4.7.3","gitHead":"0840d865ab44cce3c8e0d54dda19372a7cd16b4c","types":"./index.d.ts","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-38jTQMOtMZ3lpozEqkT+SWZCsJK2RdeIKj1CzfjfvERKYwoPT7xt0BE+SXQovc2sUWxWzcBL1Qp6275cA5bFIQ==","shasum":"1fe8c5912653f518786d7c67ae62431a879a5b5a","tarball":"https://registry.npmjs.org/@dck/react-native-signature-canvas/-/react-native-signature-canvas-4.7.3.tgz","fileCount":11,"unpackedSize":76022,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCZUB1UlE13qiyh8Cy14kIoxPLiz/zxEdhFcIPTucOTQgIhAPGWkVlGrkVHKXQPkni7Wsv3Ww2T5qzqpdXeQii58jvv"}]},"_npmUser":{"name":"dck","email":"tqs.deconinck@gmail.com","actor":{"name":"dck","email":"tqs.deconinck@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"dck","email":"tqs.deconinck@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-signature-canvas_4.7.3_1750769076641_0.7370278732086357"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-24T12:44:36.554Z","4.7.3":"2025-06-24T12:44:36.797Z","modified":"2025-06-24T12:44:37.038Z"},"maintainers":[{"name":"dck","email":"tqs.deconinck@gmail.com"}],"description":"React Native Signature Component based Canvas for Android && IOS && expo","homepage":"https://github.com/YanYuanFE/react-native-signature-canvas#readme","keywords":["react-native","react component","ios","android","signature","pad","canvas","expo"],"repository":{"type":"git","url":"git+https://github.com/YanYuanFE/react-native-signature-canvas.git"},"author":{"name":"YanYuanFE"},"bugs":{"url":"https://github.com/YanYuanFE/react-native-signature-canvas/issues"},"license":"MIT","readme":"# React Native Signature Canvas\n\n[![](https://img.shields.io/npm/l/react-native-signature-canvas.svg)](https://www.npmjs.com/package/react-native-signature-canvas)\n[![](https://img.shields.io/npm/v/react-native-signature-canvas)](https://www.npmjs.com/package/react-native-signature-canvas)\n![npm](https://img.shields.io/npm/dt/react-native-signature-canvas)\n![GitHub last commit](https://img.shields.io/github/last-commit/yanyuanfe/react-native-signature-canvas)\n[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://github.com/expo/expo)\n\nA React Native component for capturing signatures or drawing on a canvas with a smooth, native feel. Works on iOS, Android, and Expo.\n\n## Features\n\n- Cross-platform support (iOS, Android, Expo)\n- Smooth, responsive drawing experience\n- Customizable pen color, size, and background\n- Support for background and overlay images\n- Export signatures as PNG, JPEG, or SVG\n- Undo/redo functionality\n- Drawing and erasing modes\n- TypeScript support\n\n## Installation\n\n### For React Native ≥ 0.60.0 or Expo SDK ≥ 35.0.0\n\n```bash\nyarn add react-native-signature-canvas\n```\n\nor\n\n```bash\nnpm install --save react-native-signature-canvas\n```\n\n> This package depends on [react-native-webview](https://github.com/react-native-webview/react-native-webview). If you're using React Native CLI (not Expo), you'll need to install react-native-webview separately:\n>\n> ```bash\n> yarn add react-native-webview\n> cd ios && pod install\n> ```\n\n### For React Native < 0.60.0 or Expo SDK < 33.0.0\n\n```bash\nnpm install --save react-native-signature-canvas@1.4.2\n```\n\n## Basic Usage\n\n```jsx\nimport React, { useRef, useState } from 'react';\nimport { StyleSheet, View, Image } from 'react-native';\nimport SignatureCanvas from 'react-native-signature-canvas';\n\nconst SignatureScreen = () => {\n  const [signature, setSignature] = useState(null);\n  const ref = useRef();\n\n  const handleSignature = (signature) => {\n    console.log(signature);\n    setSignature(signature);\n  };\n\n  const handleEmpty = () => {\n    console.log('Empty');\n  };\n\n  const handleClear = () => {\n    console.log('Clear success!');\n  };\n\n  const handleEnd = () => {\n    ref.current.readSignature();\n  };\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.preview}>\n        {signature && (\n          <Image\n            resizeMode=\"contain\"\n            style={{ width: 335, height: 114 }}\n            source={{ uri: signature }}\n          />\n        )}\n      </View>\n      <SignatureCanvas\n        ref={ref}\n        onEnd={handleEnd}\n        onOK={handleSignature}\n        onEmpty={handleEmpty}\n        onClear={handleClear}\n        autoClear={true}\n        descriptionText=\"Sign here\"\n        clearText=\"Clear\"\n        confirmText=\"Save\"\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  preview: {\n    width: 335,\n    height: 114,\n    backgroundColor: '#F8F8F8',\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginTop: 15,\n  },\n});\n\nexport default SignatureScreen;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `androidHardwareAccelerationDisabled` | `boolean` | `false` | Disable hardware acceleration on Android |\n| `autoClear` | `boolean` | `false` | Auto clear signature after clicking the Confirm button |\n| `backgroundColor` | `string` | `rgba(255,255,255,0)` | Background color of the canvas |\n| `bgHeight` | `number` | `0` | Height of the background image |\n| `bgWidth` | `number` | `0` | Width of the background image |\n| `bgSrc` | `string` | `null` | Background image source URI |\n| `clearText` | `string` | `Clear` | Clear button text |\n| `confirmText` | `string` | `Confirm` | Save button text |\n| `customHtml` | `(injectedJavaScript: string) => string` | `null` | Custom HTML template for the canvas |\n| `dataURL` | `string` | `\"\"` | Base64 string to draw saved signature |\n| `descriptionText` | `string` | `Sign above` | Description text for signature |\n| `dotSize` | `number` | `null` | Radius of a single dot |\n| `imageType` | `string` | `image/png` | Image type for export (`image/png`, `image/jpeg`, `image/svg+xml`) |\n| `minWidth` | `number` | `0.5` | Minimum width of a line |\n| `maxWidth` | `number` | `2.5` | Maximum width of a line |\n| `nestedScrollEnabled` | `boolean` | `false` | Enable nested scrolling for use inside a ScrollView |\n| `showsVerticalScrollIndicator` | `boolean` | `true` | Show vertical scroll indicator in WebView |\n| `onOK` | `function` | - | Callback after saving non-empty signature |\n| `onEmpty` | `function` | - | Callback after trying to save an empty signature |\n| `onClear` | `function` | - | Callback after clearing the signature |\n| `onGetData` | `function` | - | Callback when getData() is called |\n| `onBegin` | `function` | - | Callback when a new stroke is started |\n| `onEnd` | `function` | - | Callback when the stroke has ended |\n| `onLoadEnd` | `function` | - | Callback when the WebView canvas load ended |\n| `onUndo` | `function` | - | Callback when undo() is called |\n| `onRedo` | `function` | - | Callback when redo() is called |\n| `onDraw` | `function` | - | Callback when drawing is enabled |\n| `onErase` | `function` | - | Callback when erasing is enabled |\n| `onChangePenColor` | `function` | - | Callback after changing the pen color |\n| `onChangePenSize` | `function` | - | Callback after changing the pen size |\n| `overlayHeight` | `number` | `0` | Height of the overlay image |\n| `overlayWidth` | `number` | `0` | Width of the overlay image |\n| `overlaySrc` | `string` | `null` | Overlay image source URI (must be PNG with transparent background) |\n| `penColor` | `string` | `black` | Color of the pen |\n| `rotated` | `boolean` | `false` | Rotate signature pad 90 degrees |\n| `style` | `object` | - | Style of the wrapper view |\n| `scrollable` | `boolean` | `false` | Enable scrolling in the signature pad |\n| `trimWhitespace` | `boolean` | `false` | Trim image whitespace |\n| `webStyle` | `string` | - | WebView style to override default style |\n| `webviewContainerStyle` | `object` | - | Style for the WebView container |\n| `androidLayerType` | `none\\|software\\|hardware` | `hardware` | Sets the Android WebView layer type |\n\n## Methods\n\nAccess these methods using a ref to the SignatureCanvas component.\n\n| Method | Description |\n|--------|-------------|\n| `clearSignature()` | Clear the current signature |\n| `changePenColor(color)` | Change pen color |\n| `changePenSize(minW, maxW)` | Change pen size |\n| `draw()` | Enable drawing mode |\n| `erase()` | Enable erasing mode |\n| `getData()` | Triggers the `onGetData` callback with signature data |\n| `readSignature()` | Read the current signature and trigger callbacks |\n| `undo()` | Undo last stroke |\n| `redo()` | Redo last stroke |\n\n## Advanced Usage\n\n### Using a Background Image\n\n```jsx\nconst imgWidth = 300;\nconst imgHeight = 200;\nconst style = `.m-signature-pad {box-shadow: none; border: none; } \n              .m-signature-pad--body {border: none;}\n              .m-signature-pad--footer {display: none; margin: 0px;}\n              body,html {\n              width: ${imgWidth}px; height: ${imgHeight}px;}`;\n\n<View style={{ width: imgWidth, height: imgHeight }}>\n  <SignatureCanvas\n    ref={ref}\n    bgSrc=\"https://example.com/background.jpg\"\n    bgWidth={imgWidth}\n    bgHeight={imgHeight}\n    webStyle={style}\n    onOK={handleSignature}\n  />\n</View>\n```\n\n### Using an Overlay Image\n\n```jsx\nconst imgWidth = 256;\nconst imgHeight = 256;\nconst style = `.m-signature-pad {box-shadow: none; border: none; } \n              .m-signature-pad--body {border: none;}\n              .m-signature-pad--footer {display: none; margin: 0px;}\n              body,html {\n              width: ${imgWidth}px; height: ${imgHeight}px;}`;\n\n<View style={{ width: imgWidth, height: imgHeight }}>\n  <SignatureCanvas\n    ref={ref}\n    overlaySrc=\"https://example.com/overlay.png\" // Must be PNG with transparent background\n    overlayWidth={imgWidth}\n    overlayHeight={imgHeight}\n    webStyle={style}\n    onOK={handleSignature}\n  />\n</View>\n```\n\n### Using in a Modal\n\n```jsx\nimport React, { useState, useRef } from 'react';\nimport { StyleSheet, View, TouchableOpacity, Modal, Text } from 'react-native';\nimport SignatureCanvas from 'react-native-signature-canvas';\n\nconst SignatureModal = ({ onSignature }) => {\n  const [show, setShow] = useState(false);\n  const ref = useRef();\n  \n  const handleSignature = (signature) => {\n    onSignature(signature);\n    setShow(false);\n  };\n\n  return (\n    <View>\n      <TouchableOpacity onPress={() => setShow(true)}>\n        <Text>Open Signature Pad</Text>\n      </TouchableOpacity>\n      \n      {show && (\n        <Modal>\n          <SignatureCanvas\n            ref={ref}\n            onOK={handleSignature}\n            onEmpty={() => console.log('Empty')}\n            descriptionText=\"Sign here\"\n            penColor=\"rgba(255,117,2,1)\"\n          />\n        </Modal>\n      )}\n    </View>\n  );\n};\n```\n\n### Scrollable Signature Canvas\n\n```jsx\nimport React, { useRef, useState } from 'react';\nimport { View, StyleSheet, ScrollView } from 'react-native';\nimport SignatureCanvas from 'react-native-signature-canvas';\n\nconst ScrollableSignature = () => {\n  const [scrollEnabled, setScrollEnabled] = useState(true);\n  const signatureRef = useRef(null);\n\n  return (\n    <ScrollView scrollEnabled={scrollEnabled}>\n      <View style={styles.container}>\n        <SignatureCanvas\n          ref={signatureRef}\n          style={styles.canvas}\n          onBegin={() => setScrollEnabled(false)}\n          onEnd={() => setScrollEnabled(true)}\n        />\n      </View>\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n  },\n  canvas: {\n    width: '90%',\n    height: 300,\n    borderWidth: 1,\n    borderColor: '#000',\n  },\n});\n```\n\n## Core Technology\n\nThis component is built on:\n- [signature_pad.js](https://github.com/szimek/signature_pad) for the core signature functionality\n- React Native WebView for cross-platform rendering\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-d9ae9a959538e0bb2f359060025832f2"}