react-native-signature-input 1.0.0

package/README.md

@@ -0,0 +1,147 @@
+# react-native-signature-input ✍️
+
+A lightweight, **pure JavaScript** signature pad for React Native.  
+Built on top of **react-native-svg** for smooth, vector-based drawing without the performance cost or complexity of WebViews.
+
+---
+
+## ✨ Features
+
+- 🚀 **Pure JS** – No native linking required (except `react-native-svg`)
+- ⚡ **High Performance** – Uses `PanResponder` for smooth, lag-free drawing
+- 📐 **Vector Output** – Returns SVG XML strings or raw coordinate paths
+- 🎨 **Customizable** – Control stroke color, width, and background
+- 📱 **Scroll Compatible** – Handles gestures correctly inside `ScrollView`
+
+---
+
+## 📦 Installation
+
+### Install the package
+```bash
+npm install react-native-signature-input
+```
+
+### Install peer dependency
+```bash
+npm install react-native-svg
+```
+
+> If you are using **bare React Native**, run:
+```bash
+cd ios && pod install && cd ..
+```
+
+---
+
+## 💻 Usage
+
+```tsx
+import React, { useRef } from 'react';
+import { View, Button, Alert, StyleSheet } from 'react-native';
+import SignatureInput from 'react-native-signature-input';
+
+export default function App() {
+  const signatureRef = useRef(null);
+
+  const handleClear = () => {
+    signatureRef.current.clear();
+  };
+
+  const handleSave = () => {
+    if (signatureRef.current.isEmpty()) {
+      Alert.alert('Error', 'Please sign first!');
+      return;
+    }
+
+    const svgString = signatureRef.current.getSVG();
+    console.log(svgString);
+    Alert.alert('Success', 'SVG captured! Check console.');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.signatureContainer}>
+        <SignatureInput
+          ref={signatureRef}
+          height={200}
+          color="#000080"
+          strokeWidth={4}
+          backgroundColor="#fff"
+          onEnd={() => console.log('Stroke finished')}
+        />
+      </View>
+
+      <View style={styles.buttonRow}>
+        <Button title="Clear" onPress={handleClear} color="red" />
+        <Button title="Save SVG" onPress={handleSave} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    justifyContent: 'center',
+    backgroundColor: '#f0f0f0',
+  },
+  signatureContainer: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginBottom: 20,
+    elevation: 4,
+    backgroundColor: 'white',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});
+```
+
+---
+
+## 📖 API Documentation
+
+### Props
+
+| Prop | Type | Default | Description |
+|-----|-----|---------|-------------|
+| ref | React.Ref | `null` | Required to access methods |
+| height | number | `200` | Height of drawing area |
+| color | string | `"black"` | Ink color |
+| strokeWidth | number | `3` | Thickness of line |
+| backgroundColor | string | `"#f5f5f5"` | Background color |
+| onEnd | function | `undefined` | Called when stroke ends |
+| onChange | function | `undefined` | Called with `(paths[])` on update |
+
+---
+
+### Methods (via Ref)
+
+| Method | Returns | Description |
+|------|--------|-------------|
+| `getSVG()` | `string` | Full SVG XML string |
+| `getPaths()` | `string[]` | Array of SVG path strings |
+| `clear()` | `void` | Clears the canvas |
+| `isEmpty()` | `boolean` | Returns true if no strokes |
+
+---
+
+## 🤝 Contributing
+
+Pull requests are welcome!
+
+---
+
+## 📄 License
+
+MIT
+
+---
+
+**Author:** Vasanth

package/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface SignatureInputProps {
+  /** Color of the signature pen. Default: "black" */
+  color?: string;
+  /** Thickness of the pen stroke. Default: 3 */
+  strokeWidth?: number;
+  /** Height of the drawing area. Default: 200 */
+  height?: number | string;
+  /** Width of the drawing area. Default: "100%" */
+  width?: number | string;
+  /** Background color of the pad. Default: "#f5f5f5" */
+  backgroundColor?: string;
+  /** Custom container style */
+  style?: ViewStyle;
+  /** Callback when the user lifts their finger */
+  onEnd?: () => void;
+  /** Callback when the paths array changes */
+  onChange?: (paths: string[]) => void;
+}
+
+export interface SignatureInputRef {
+  /** Clears the signature pad */
+  clear: () => void;
+  /** Returns the array of SVG path strings */
+  getPaths: () => string[];
+  /** Returns the complete SVG XML string */
+  getSVG: () => string;
+  /** Returns true if no signature has been drawn */
+  isEmpty: () => boolean;
+}
+
+declare const SignatureInput: React.ForwardRefExoticComponent<
+  SignatureInputProps & React.RefAttributes<SignatureInputRef>
+>;
+
+export default SignatureInput;

package/index.js

@@ -0,0 +1,162 @@
+import React, {
+  useState,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import { View, PanResponder, StyleSheet } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+const SignatureInput = forwardRef(
+  (
+    {
+      color = "black",
+      strokeWidth = 3,
+      height = 200,
+      width = "100%",
+      backgroundColor = "#f5f5f5",
+      style,
+      onEnd,
+      onChange,
+    },
+    ref
+  ) => {
+    const [paths, setPaths] = useState([]);
+    const [currentPath, setCurrentPath] = useState("");
+    const currentPathRef = useRef(""); // Ref to track current stroke without lag
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        clear: () => {
+          setPaths([]);
+          setCurrentPath("");
+          currentPathRef.current = "";
+          if (onChange) onChange([]);
+        },
+        getPaths: () => paths,
+        isEmpty: () => paths.length === 0 && currentPathRef.current === "",
+
+        getSVG: () => {
+          // Ensure we use the latest 'paths' from state
+          const bgRect =
+            backgroundColor !== "transparent"
+              ? `<rect width="100%" height="100%" fill="${backgroundColor}" />`
+              : "";
+
+          const pathElements = paths
+            .map(
+              (p) =>
+                `<path d="${p}" stroke="${color}" stroke-width="${strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`
+            )
+            .join("");
+
+          return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+${bgRect}
+${pathElements}
+</svg>`;
+        },
+      }),
+      [paths, backgroundColor, color, strokeWidth, height, width]
+    );
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onStartShouldSetPanResponderCapture: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: () => true,
+
+        onPanResponderGrant: (evt) => {
+          const { locationX, locationY } = evt.nativeEvent;
+          // Start a new path "Move To"
+          const startPath = `M${locationX.toFixed(1)},${locationY.toFixed(1)}`;
+
+          currentPathRef.current = startPath;
+          setCurrentPath(startPath);
+        },
+
+        onPanResponderMove: (evt) => {
+          const { locationX, locationY } = evt.nativeEvent;
+          // Add "Line To"
+          const newPoint = `L${locationX.toFixed(1)},${locationY.toFixed(1)}`;
+
+          currentPathRef.current += newPoint;
+          setCurrentPath(currentPathRef.current);
+        },
+
+        onPanResponderRelease: () => {
+          // 1. CAPTURE the full string into a local variable FIRST
+          const finishedPath = currentPathRef.current;
+
+          if (finishedPath) {
+            // 2. Use the local variable to update state (Safe from resets)
+            setPaths((prev) => {
+              const newPaths = [...prev, finishedPath];
+              if (onChange) onChange(newPaths);
+              return newPaths;
+            });
+
+            // 3. NOW it is safe to reset
+            currentPathRef.current = "";
+            setCurrentPath("");
+            if (onEnd) onEnd();
+          }
+        },
+      })
+    ).current;
+
+    return (
+      <View
+        style={[styles.container, style, { height, width, backgroundColor }]}
+      >
+        <View style={styles.touchArea} {...panResponder.panHandlers}>
+          <Svg style={styles.svgContainer}>
+            {/* Render Saved Paths */}
+            {paths.map((p, i) => (
+              <Path
+                key={i}
+                d={p}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            ))}
+            {/* Render Current Stroke being drawn */}
+            {currentPath ? (
+              <Path
+                d={currentPath}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            ) : null}
+          </Svg>
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    borderRadius: 8,
+  },
+  touchArea: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+  },
+  svgContainer: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+  },
+});
+
+export default SignatureInput;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-native-signature-input",
+  "version": "1.0.0",
+  "description": "A lightweight, pure JS signature capture component for React Native using SVG",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VASANTH3105/react-native-signature-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/VASANTH3105/react-native-signature-input/issues"
+  },
+  "homepage": "https://github.com/VASANTH3105/react-native-signature-input#readme",
+  "author": "Vasanth",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "signature",
+    "handwriting",
+    "svg",
+    "canvas",
+    "drawing"
+  ]
+}