SignaturePad

SignaturePad provides an SVG-based touch drawing canvas for capturing digital signatures. Supports undo, clear, and SVG export via ref methods.

Usage

SignatureExample.tsx

import { useRef } from 'react';
import { SignaturePad, type SignaturePadRef } from '@masumdev/rn-ui';

export function SignatureExample() {
  const ref = useRef<SignaturePadRef>(null);

  return (
    <>
      <SignaturePad
        ref={ref}
        height={200}
        strokeWidth={3}
        strokeColor="#6366F1"
        showGuideLine
        guideLineText="SIGN ABOVE THIS LINE"
      />
      <Button onPress={() => ref.current?.clear()}>Clear</Button>
      <Button onPress={() => ref.current?.undo()}>Undo</Button>
    </>
  );
}

Ref Methods

Method	Return	Description
clear()	void	Clear all strokes
undo()	void	Remove the last stroke
getPaths()	string[]	Get SVG path data strings
getSvg()	string	Export as complete SVG markup
isEmpty()	boolean	Check if canvas has strokes

Props API

Prop	Type	Default	Description
strokeColor	string	—	Stroke color for drawing.
strokeWidth	number	2	Stroke width in pixels.
backgroundColor	string	—	Canvas background color.
showGuideLine	boolean	true	Show the dashed guide line.
guideLineText	string	"SIGN ABOVE THIS LINE"	Text below the guide line.
onBegin	() => void	—	Callback when drawing starts.
onEnd	() => void	—	Callback when a stroke ends.
onChange	(paths: string[]) => void	—	Callback when paths change.
height	number	200	Canvas height in pixels.
hapticFeedback	boolean	true	Enable haptic feedback on stroke start.