react-native-signature-canvas 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [5.1.0](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v5.0.2...v5.1.0) (2026-07-05)
+
+### Bug Fixes
+
+* harden string injection, prop handling, and WebView bridge ([98f158d](https://github.com/YanYuanFE/react-native-signature-canvas/commit/98f158d4f883981052b88d07f1b7c3c703cd0401))
+
 ## [5.0.2](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v5.0.1...v5.0.2) (2025-12-28)
 
 

package/h5/js/app.js

@@ -5,6 +5,17 @@ export default `
         canvas = wrapper && wrapper.querySelector("canvas"),
         signaturePad;
 
+    // Single bridge entry point. Guards the rare window where the RN WebView
+    // bridge is missing (injection race / WebView torn down) and surfaces the
+    // dropped message instead of swallowing it.
+    function postMessage(data) {
+        if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+            window.ReactNativeWebView.postMessage(data);
+        } else {
+            console.warn("[signature-canvas] RN bridge unavailable, dropped message: " + data);
+        }
+    }
+
     function resizeCanvas() {
         if (!canvas || !canvas.getContext || !signaturePad) {
             return;
@@ -35,8 +46,8 @@ export default `
     }
 
     signaturePad = new SignaturePad(canvas, {
-        onBegin: () => window.ReactNativeWebView.postMessage("BEGIN"),
-        onEnd: () => window.ReactNativeWebView.postMessage("END"),
+        onBegin: () => postMessage("BEGIN"),
+        onEnd: () => postMessage("END"),
         penColor: '<%penColor%>',
         backgroundColor: '<%backgroundColor%>',
         dotSize: <%dotSize%>,
@@ -46,22 +57,26 @@ export default `
     });
 
     // Initial canvas setup
-    resizeCanvas();
+    const observer = new ResizeObserver(() => {
+        resizeCanvas();
+    });
+    
+    observer.observe(canvas);
 
     function clearSignature () {
         signaturePad.clear();
         dataURL='';
-        window.ReactNativeWebView.postMessage("CLEAR");
+        postMessage("CLEAR");
     }
 
     function undo() {
         signaturePad.undo();
-        window.ReactNativeWebView.postMessage("UNDO");
+        postMessage("UNDO");
     }
 
     function redo() {
         signaturePad.redo();
-        window.ReactNativeWebView.postMessage("REDO");
+        postMessage("REDO");
       }
 
     function changePenColor(color) {
@@ -69,7 +84,7 @@ export default `
             return;
         }
         signaturePad.penColor = color;
-        window.ReactNativeWebView && window.ReactNativeWebView.postMessage("CHANGE_PEN");
+        postMessage("CHANGE_PEN");
     }
 
     function changePenSize(minW, maxW) {
@@ -81,34 +96,34 @@ export default `
         }
         signaturePad.minWidth = minW;
         signaturePad.maxWidth = maxW;
-        window.ReactNativeWebView && window.ReactNativeWebView.postMessage("CHANGE_PEN_SIZE");
+        postMessage("CHANGE_PEN_SIZE");
     }
 
     function getData () {
         var data = signaturePad.toData();
-        window.ReactNativeWebView.postMessage(JSON.stringify(data));
+        postMessage(JSON.stringify(data));
     }
 
-    function fromData (pointGroups) {
-        signaturePad.fromData(pointGroups);
-        window.ReactNativeWebView.postMessage(JSON.stringify(pointGroups));
+    function fromData (pointGroups, suppressClear) {
+        signaturePad.fromData(pointGroups, suppressClear);
+        postMessage(JSON.stringify(pointGroups));
     }
 
     function draw() {
       signaturePad.draw();
-      window.ReactNativeWebView.postMessage("DRAW");
+      postMessage("DRAW");
     }
 
     function erase() {
       signaturePad.erase();
-      window.ReactNativeWebView.postMessage("ERASE");
+      postMessage("ERASE");
     }
 
     function cropWhitespace(url) {
         var myImage = new Image();
         myImage.crossOrigin = "Anonymous";
         myImage.onload = function(){
-            window.ReactNativeWebView.postMessage(removeImageBlanks(myImage));
+            postMessage(removeImageBlanks(myImage));
         }
         myImage.src = url;
 
@@ -194,7 +209,7 @@ export default `
         }
 
         if (signaturePad.isEmpty()) {
-            window.ReactNativeWebView && window.ReactNativeWebView.postMessage("EMPTY");
+            postMessage("EMPTY");
         } else {
             var imageType = '<%imageType%>' || 'image/png';
             var url = signaturePad.toDataURL(imageType);
@@ -202,7 +217,7 @@ export default `
             if (trimWhitespace === true) {
                 cropWhitespace(url);
             } else {
-                window.ReactNativeWebView && window.ReactNativeWebView.postMessage(url);
+                postMessage(url);
             }
 
             if (autoClear === true && signaturePad) {
@@ -215,7 +230,8 @@ export default `
 
     var trimWhitespace = <%trimWhitespace%>;
 
-    var dataURL = '<%dataURL%>';
+    // <%dataURL%> is injected as an already-quoted JSON string literal
+    var dataURL = <%dataURL%>;
 
     if (dataURL) signaturePad.fromDataURL(dataURL);
 

package/index.d.ts

@@ -5,9 +5,9 @@ declare module "react-native-signature-canvas" {
 
   // Enhanced type definitions with better error handling
 
-  type ImageType = "image/png" | "image/jpeg" | "image/svg+xml";
+  export type ImageType = "image/png" | "image/jpeg" | "image/svg+xml";
 
-  type DataURL = string; // Simplified - should be base64 data URL
+  export type DataURL = string; // Simplified - should be base64 data URL
 
   type ForwardRef<T, P> = React.ForwardRefExoticComponent<
     React.PropsWithoutRef<P> & React.RefAttributes<T>
@@ -51,7 +51,6 @@ declare module "react-native-signature-canvas" {
     onBegin?: EmptyCallback;
     onEnd?: EmptyCallback;
     onLoadEnd?: EmptyCallback;
-    onError?: ErrorCallback; // Added missing error callback
     overlayHeight?: number;
     overlayWidth?: number;
     overlaySrc?: string;
@@ -91,7 +90,4 @@ declare module "react-native-signature-canvas" {
 
   const SignatureView: SignatureCanvasComponent;
   export default SignatureView;
-
-  // Export additional types for external use
-  export { SignatureViewProps, SignatureViewRef, ImageType, DataURL };
 }

package/index.js

@@ -46,16 +46,11 @@ const styles = StyleSheet.create({
   },
 });
 
-const getParamForInjection = (param) => {
-  switch (typeof param) {
-    case "string":
-      return `'${param}'`
-    case "object":
-      return JSON.stringify(param)
-    default:
-      return param
-  }
-}
+// JSON.stringify produces a valid JS literal with quotes/backslashes/newlines escaped
+const getParamForInjection = (param) =>
+  typeof param === "string" || typeof param === "object"
+    ? JSON.stringify(param)
+    : param;
 
 const SignatureView = forwardRef(
   (
@@ -125,18 +120,21 @@ const SignatureView = forwardRef(
     // Split source generation for better performance
     // Include webViewKey to regenerate script when WebView needs remounting
     const injectedScript = useMemo(() => {
+      // String values go through a function replacer so "$&"-style patterns
+      // in user input are inserted literally instead of being expanded
       let script = injectedSignaturePad + injectedApplication;
       script = script.replace(/<%autoClear%>/g, autoClear);
       script = script.replace(/<%trimWhitespace%>/g, trimWhitespace);
-      script = script.replace(/<%imageType%>/g, imageType || "image/png");
-      // Use currentDataURLRef to get the latest dataURL value
-      script = script.replace(/<%dataURL%>/g, currentDataURLRef.current || "");
-      script = script.replace(/<%penColor%>/g, penColor || "black");
-      script = script.replace(/<%backgroundColor%>/g, backgroundColor || "rgba(255,255,255,0)");
-      script = script.replace(/<%dotSize%>/g, dotSize || "null");
-      script = script.replace(/<%minWidth%>/g, minWidth || 0.5);
-      script = script.replace(/<%maxWidth%>/g, maxWidth || 2.5);
-      script = script.replace(/<%minDistance%>/g, minDistance || 5);
+      script = script.replace(/<%imageType%>/g, () => imageType || "image/png");
+      // Use currentDataURLRef to get the latest dataURL value;
+      // JSON.stringify emits a quoted JS string literal with escaping
+      script = script.replace(/<%dataURL%>/g, () => JSON.stringify(currentDataURLRef.current || ""));
+      script = script.replace(/<%penColor%>/g, () => penColor || "black");
+      script = script.replace(/<%backgroundColor%>/g, () => backgroundColor || "rgba(255,255,255,0)");
+      script = script.replace(/<%dotSize%>/g, dotSize ?? "null");
+      script = script.replace(/<%minWidth%>/g, minWidth ?? 0.5);
+      script = script.replace(/<%maxWidth%>/g, maxWidth ?? 2.5);
+      script = script.replace(/<%minDistance%>/g, minDistance ?? 5);
       script = script.replace(/<%orientation%>/g, rotated || false);
       return script;
     }, [autoClear, trimWhitespace, imageType, penColor, backgroundColor, dotSize, minWidth, maxWidth, minDistance, rotated, webViewKey]);
@@ -144,16 +142,16 @@ const SignatureView = forwardRef(
     const source = useMemo(() => {
       const htmlContentValue = customHtml || htmlContent;
       let html = htmlContentValue(injectedScript);
-      html = html.replace(/<%bgWidth%>/g, bgWidth || 0);
-      html = html.replace(/<%bgHeight%>/g, bgHeight || 0);
-      html = html.replace(/<%bgSrc%>/g, bgSrc || "null");
-      html = html.replace(/<%overlayWidth%>/g, overlayWidth || 0);
-      html = html.replace(/<%overlayHeight%>/g, overlayHeight || 0);
-      html = html.replace(/<%overlaySrc%>/g, overlaySrc || "null");
-      html = html.replace(/<%style%>/g, webStyle || "");
-      html = html.replace(/<%description%>/g, descriptionText || "Sign above");
-      html = html.replace(/<%confirm%>/g, confirmText || "Confirm");
-      html = html.replace(/<%clear%>/g, clearText || "Clear");
+      html = html.replace(/<%bgWidth%>/g, bgWidth ?? 0);
+      html = html.replace(/<%bgHeight%>/g, bgHeight ?? 0);
+      html = html.replace(/<%bgSrc%>/g, () => bgSrc || "null");
+      html = html.replace(/<%overlayWidth%>/g, overlayWidth ?? 0);
+      html = html.replace(/<%overlayHeight%>/g, overlayHeight ?? 0);
+      html = html.replace(/<%overlaySrc%>/g, () => overlaySrc || "null");
+      html = html.replace(/<%style%>/g, () => webStyle || "");
+      html = html.replace(/<%description%>/g, () => descriptionText || "Sign above");
+      html = html.replace(/<%confirm%>/g, () => confirmText || "Confirm");
+      html = html.replace(/<%clear%>/g, () => clearText || "Clear");
       html = html.replace(/<%orientation%>/g, rotated || false);
 
       return { html };
@@ -173,7 +171,7 @@ const SignatureView = forwardRef(
       // Update dataURL in WebView without full reload
       if (dataURL) {
         const script = `
-          dataURL = '${dataURL}';
+          dataURL = ${JSON.stringify(dataURL)};
           if (signaturePad && signaturePad.isEmpty()) {
             signaturePad.fromDataURL(dataURL);
           }
@@ -292,12 +290,12 @@ const SignatureView = forwardRef(
           executeWebViewMethod('changePenSize', [minW, maxW]);
         },
         getData: () => executeWebViewMethod('getData'),
-        fromData: (pointGroups) => {
+        fromData: (pointGroups, suppressClear = false) => {
           if (!pointGroups) {
             console.warn('fromData: pointGroups must be an array');
             return;
           }
-          executeWebViewMethod('fromData', [pointGroups, false]);
+          executeWebViewMethod('fromData', [pointGroups, suppressClear]);
         },
         // New method to set dataURL without causing WebView reload
         setDataURL: (url) => {
@@ -310,7 +308,7 @@ const SignatureView = forwardRef(
             return;
           }
           const script = `
-            dataURL = '${url}';
+            dataURL = ${JSON.stringify(url)};
             if (signaturePad) {
               signaturePad.clear();
               if (dataURL) {
@@ -397,20 +395,6 @@ const SignatureView = forwardRef(
     return (
       <View style={[styles.webBg, style]}>
         <WebView
-          // Key for forcing remount when WebView needs reinitialization
-          key={`signature-webview-${webViewKey}`}
-          // Core functionality props (cannot be overridden)
-          ref={webViewRef}
-          source={source}
-          onMessage={getSignature}
-          onError={renderError}
-          onLoadEnd={handleLoadEnd}
-          onLoadStart={handleLoadStart}
-          onLoadProgress={handleLoadProgress}
-          // Handle iOS WKWebView content process termination (crucial for bottom sheets/modals)
-          onContentProcessDidTerminate={handleContentProcessDidTerminate}
-          javaScriptEnabled={true}
-          useWebKit={true}
           // Default component props (can be overridden by webviewProps)
           bounces={false}
           style={[{ flex: 1 }, webviewContainerStyle]}
@@ -437,6 +421,20 @@ const SignatureView = forwardRef(
           startInLoadingState={true}
           // User-provided WebView props (can override defaults but not core functionality)
           {...webviewProps}
+          // Core functionality props (cannot be overridden — placed after the spread)
+          // Key for forcing remount when WebView needs reinitialization
+          key={`signature-webview-${webViewKey}`}
+          ref={webViewRef}
+          source={source}
+          onMessage={getSignature}
+          onError={renderError}
+          onLoadEnd={handleLoadEnd}
+          onLoadStart={handleLoadStart}
+          onLoadProgress={handleLoadProgress}
+          // Handle iOS WKWebView content process termination (crucial for bottom sheets/modals)
+          onContentProcessDidTerminate={handleContentProcessDidTerminate}
+          javaScriptEnabled={true}
+          useWebKit={true}
         />
         {(loading || hasError) && (
           <View style={styles.loadingOverlayContainer}>

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "react-native-signature-canvas",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "A performant, customizable React Native signature canvas with advanced error handling, WebView optimization, and TypeScript support for iOS, Android, and Expo",
   "main": "index.js",
   "scripts": {
-    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "postversion": "git push --follow-tags"
+    "genlog": "npx -y -p conventional-changelog -p conventional-changelog-angular conventional-changelog -p angular -i CHANGELOG.md",
+    "preversion": "npm whoami",
+    "version": "npm run genlog && git add CHANGELOG.md",
+    "postversion": "git push --follow-tags && npm publish"
   },
   "repository": {
     "type": "git",