react-native-signature-canvas 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,4 +1,13 @@
-# [5.0.0](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v4.5.1...v5.0.0) (2025-06-28)
+## [5.0.2](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v5.0.1...v5.0.2) (2025-12-28)
+
+
+### Features
+
+* enhance signature canvas with bottom sheet integration and WebView improvements ([69f84a1](https://github.com/YanYuanFE/react-native-signature-canvas/commit/69f84a1))
+
+
+
+## [5.0.1](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v4.5.1...v5.0.1) (2025-12-28)
 
 
 ### Bug Fixes

package/README.md

@@ -401,12 +401,6 @@ const styles = StyleSheet.create({
 
 ## Performance & Reliability
 
-### Automatic Error Recovery
-- **Smart retry logic** with exponential backoff
-- **Circuit breaker pattern** to prevent cascading failures  
-- **Memory leak prevention** with automatic cleanup
-- **Performance monitoring** with automatic optimization
-
 ### Performance Features
 - **Debounced resize handling** for smooth interaction
 - **Memory pressure detection** with adaptive optimization
@@ -421,7 +415,7 @@ const styles = StyleSheet.create({
 
 ## Migration Guide
 
-### From v4.6.x to v4.7.x
+### From v4.x to v5.x
 
 This version is fully backward compatible. New features:
 
@@ -515,7 +509,7 @@ npm install && npm start
 
 ## Changelog
 
-### v4.7.x (Latest)
+### v5.0.1 (Latest)
 - 🆕 Added `webviewProps` for WebView customization
 - 🆕 Enhanced error handling with automatic recovery
 - 🆕 Performance monitoring and optimization

package/h5/html.js

@@ -12,36 +12,36 @@ export default (script) =>
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
   <style>
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
     body {
       font-family: Helvetica, Sans-Serif;
-    
       -moz-user-select: none;
       -webkit-user-select: none;
       -ms-user-select: none;
-      margin:0;
-      overflow:hidden;
-    }
-    body,html {
-      width: 100%;
-      height: 300px;
     }
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
-    
+
     .rotated-true {
       transform: rotate(90deg);
       transform-origin:bottom left;
-      
+
       position:absolute;
       top: -100vw;
       left: 0;
-      
+
       height:100vw;
       width:100vh;
-      
+
       overflow:auto;
     }
     .rotated-false {
@@ -56,15 +56,16 @@ export default (script) =>
       background-color: #fff;
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
     }
-    
+
     .m-signature-pad--body {
       position: relative;
+      width: 100%;
       height: 100%;
       border: 1px solid #f4f4f4;
     }
-    
-    .m-signature-pad--body
-      canvas {
+
+    .m-signature-pad--body canvas {
+        display: block;
         position: absolute;
         left: 0;
         top: 0;
@@ -125,7 +126,7 @@ export default (script) =>
     
     @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
       .m-signature-pad {
-        margin: 10%;
+        margin: 0;
       }
     }
     

package/h5/js/app.js

@@ -1,56 +1,39 @@
 export default `
-    // Enhanced error handling and validation
     var wrapper = document.getElementById("signature-pad"),
         clearButton = wrapper && wrapper.querySelector("[data-action=clear]"),
         saveButton = wrapper && wrapper.querySelector("[data-action=save]"),
         canvas = wrapper && wrapper.querySelector("canvas"),
         signaturePad;
-        
-    if (!wrapper || !canvas) {
-        console.error('Required DOM elements not found');
-    }
-    
-    // Enhanced canvas resize with debouncing
-    function debounce(func, wait) {
-        var timeout;
-        return function executedFunction() {
-            var later = function() {
-                clearTimeout(timeout);
-                func.apply(this, arguments);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
-    
+
     function resizeCanvas() {
-        if (!canvas || !canvas.getContext) {
-            console.warn('Canvas not available for resize');
+        if (!canvas || !canvas.getContext || !signaturePad) {
             return;
         }
-        
-        try {
-            var context = canvas.getContext("2d");
-            var imgData = signaturePad ? signaturePad.toData() : null;
-            var ratio = Math.max(window.devicePixelRatio || 1, 1);
-            
-            canvas.width = canvas.offsetWidth * ratio;
-            canvas.height = canvas.offsetHeight * ratio;
-            context.scale(ratio, ratio);
-            
-            if (imgData && signaturePad) {
-                signaturePad.fromData(imgData);
-            }
-        } catch (error) {
-            console.error('Error resizing canvas:', error);
+
+        var context = canvas.getContext("2d");
+        var ratio = Math.max(window.devicePixelRatio || 1, 1);
+
+        // Save current signature data before resizing
+        var imgData = signaturePad.toData();
+        var hasDrawnContent = imgData && imgData.length > 0;
+
+        // Use canvas client dimensions
+        var width = canvas.clientWidth;
+        var height = canvas.clientHeight;
+
+        // Resize canvas (this clears the canvas)
+        canvas.width = width * ratio;
+        canvas.height = height * ratio;
+        context.scale(ratio, ratio);
+
+        // Restore signature content
+        if (hasDrawnContent) {
+            signaturePad.fromData(imgData);
+        } else if (dataURL) {
+            signaturePad.fromDataURL(dataURL);
         }
     }
-    
-    // Use debounced resize handler
-    var debouncedResize = debounce(resizeCanvas, 100);
-    window.addEventListener('resize', debouncedResize);
-    resizeCanvas();
-    
+
     signaturePad = new SignaturePad(canvas, {
         onBegin: () => window.ReactNativeWebView.postMessage("BEGIN"),
         onEnd: () => window.ReactNativeWebView.postMessage("END"),
@@ -62,16 +45,20 @@ export default `
         minDistance: <%minDistance%>,
     });
 
+    // Initial canvas setup
+    resizeCanvas();
+
     function clearSignature () {
         signaturePad.clear();
+        dataURL='';
         window.ReactNativeWebView.postMessage("CLEAR");
     }
-    
+
     function undo() {
         signaturePad.undo();
         window.ReactNativeWebView.postMessage("UNDO");
     }
-    
+
     function redo() {
         signaturePad.redo();
         window.ReactNativeWebView.postMessage("REDO");
@@ -79,31 +66,24 @@ export default `
 
     function changePenColor(color) {
         if (!signaturePad) {
-            console.warn('SignaturePad not initialized');
             return;
         }
-        
         signaturePad.penColor = color;
         window.ReactNativeWebView && window.ReactNativeWebView.postMessage("CHANGE_PEN");
     }
 
     function changePenSize(minW, maxW) {
         if (!signaturePad) {
-            console.warn('SignaturePad not initialized');
             return;
         }
-        
-        // Validate numeric values
         if (typeof minW !== 'number' || typeof maxW !== 'number' || minW < 0 || maxW < minW) {
-            console.warn('Invalid pen size values:', minW, maxW);
             return;
         }
-        
         signaturePad.minWidth = minW;
         signaturePad.maxWidth = maxW;
         window.ReactNativeWebView && window.ReactNativeWebView.postMessage("CHANGE_PEN_SIZE");
     }
-    
+
     function getData () {
         var data = signaturePad.toData();
         window.ReactNativeWebView.postMessage(JSON.stringify(data));
@@ -128,11 +108,10 @@ export default `
         var myImage = new Image();
         myImage.crossOrigin = "Anonymous";
         myImage.onload = function(){
-            window.ReactNativeWebView.postMessage(removeImageBlanks(myImage)); //Will return cropped image data
+            window.ReactNativeWebView.postMessage(removeImageBlanks(myImage));
         }
         myImage.src = url;
 
-        //-----------------------------------------//
         function removeImageBlanks(imageObject) {
             var imgWidth = imageObject.width;
             var imgHeight = imageObject.height;
@@ -157,49 +136,40 @@ export default `
                     };
                 },
                 isWhite = function (rgb) {
-                    // many images contain noise, as the white is not a pure #fff white
                     return !rgb.opacity || (rgb.red > 200 && rgb.green > 200 && rgb.blue > 200);
                 },
-                        scanY = function (fromTop) {
-                var offset = fromTop ? 1 : -1;
-
-                // loop through each row
-                for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {
-
-                    // loop through each column
-                    for(var x = 0; x < imgWidth; x++) {
-                        var rgb = getRGB(x, y);
-                        if (!isWhite(rgb)) {
-                            if (fromTop) {
-                                return y;
-                            } else {
-                                return Math.min(y + 1, imgHeight);
+                scanY = function (fromTop) {
+                    var offset = fromTop ? 1 : -1;
+                    for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {
+                        for(var x = 0; x < imgWidth; x++) {
+                            var rgb = getRGB(x, y);
+                            if (!isWhite(rgb)) {
+                                if (fromTop) {
+                                    return y;
+                                } else {
+                                    return Math.min(y + 1, imgHeight);
+                                }
                             }
                         }
                     }
-                }
-                return null; // all image is white
-            },
-            scanX = function (fromLeft) {
-                var offset = fromLeft? 1 : -1;
-
-                // loop through each column
-                for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {
-
-                    // loop through each row
-                    for(var y = 0; y < imgHeight; y++) {
-                        var rgb = getRGB(x, y);
-                        if (!isWhite(rgb)) {
-                            if (fromLeft) {
-                                return x;
-                            } else {
-                                return Math.min(x + 1, imgWidth);
+                    return null;
+                },
+                scanX = function (fromLeft) {
+                    var offset = fromLeft? 1 : -1;
+                    for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {
+                        for(var y = 0; y < imgHeight; y++) {
+                            var rgb = getRGB(x, y);
+                            if (!isWhite(rgb)) {
+                                if (fromLeft) {
+                                    return x;
+                                } else {
+                                    return Math.min(x + 1, imgWidth);
+                                }
                             }
-                        }      
+                        }
                     }
-                }
-                return null; // all image is white
-            };
+                    return null;
+                };
 
             var cropTop = scanY(true),
                 cropBottom = scanY(false),
@@ -210,7 +180,6 @@ export default `
 
             canvas.setAttribute("width", cropWidth);
             canvas.setAttribute("height", cropHeight);
-            // finally crop the guy
             canvas.getContext("2d").drawImage(imageObject,
                 cropLeft, cropTop, cropWidth, cropHeight,
                 0, 0, cropWidth, cropHeight);
@@ -221,34 +190,29 @@ export default `
 
     function readSignature() {
         if (!signaturePad) {
-            console.warn('SignaturePad not initialized');
             return;
         }
-        
-        try {
-            if (signaturePad.isEmpty()) {
-                window.ReactNativeWebView && window.ReactNativeWebView.postMessage("EMPTY");
+
+        if (signaturePad.isEmpty()) {
+            window.ReactNativeWebView && window.ReactNativeWebView.postMessage("EMPTY");
+        } else {
+            var imageType = '<%imageType%>' || 'image/png';
+            var url = signaturePad.toDataURL(imageType);
+
+            if (trimWhitespace === true) {
+                cropWhitespace(url);
             } else {
-                var imageType = '<%imageType%>' || 'image/png';
-                var url = signaturePad.toDataURL(imageType);
-                
-                if (trimWhitespace === true) {
-                    cropWhitespace(url);
-                } else {
-                    window.ReactNativeWebView && window.ReactNativeWebView.postMessage(url);
-                }
-                
-                if (autoClear === true && signaturePad) {
-                    signaturePad.clear();
-                }
+                window.ReactNativeWebView && window.ReactNativeWebView.postMessage(url);
+            }
+
+            if (autoClear === true && signaturePad) {
+                signaturePad.clear();
             }
-        } catch (error) {
-            console.error('Error reading signature:', error);
         }
     }
 
     var autoClear = <%autoClear%>;
-    
+
     var trimWhitespace = <%trimWhitespace%>;
 
     var dataURL = '<%dataURL%>';
@@ -259,18 +223,12 @@ export default `
         clearButton.addEventListener("click", clearSignature);
     }
 
-    // Prevent race conditions by sequencing operations
     if (saveButton) {
         saveButton.addEventListener("click", function() {
-            try {
-                readSignature();
-                // Small delay to prevent race condition
-                setTimeout(function() {
-                    getData();
-                }, 10);
-            } catch (error) {
-                console.error('Error in save button click:', error);
-            }
+            readSignature();
+            setTimeout(function() {
+                getData();
+            }, 10);
         });
     }
 `;

package/index.d.ts

@@ -76,8 +76,11 @@ declare module "react-native-signature-canvas" {
     readSignature: () => void;
     undo: () => void;
     redo: () => void;
-    fromData: (pointGroups, suppressClear = false) => void;
-    // Removed cropWhitespace as it's not exposed in the component
+    fromData: (pointGroups: any[], suppressClear?: boolean) => void;
+    /** Set dataURL without causing WebView reload - useful for restoring signatures */
+    setDataURL: (url: string) => void;
+    /** Force reinitialize WebView - useful for bottom sheets/modals where WebView state is lost */
+    reinitialize: () => void;
   };
 
   // Enhanced component interface with better type safety

package/index.js

@@ -46,6 +46,17 @@ const styles = StyleSheet.create({
   },
 });
 
+const getParamForInjection = (param) => {
+  switch (typeof param) {
+    case "string":
+      return `'${param}'`
+    case "object":
+      return JSON.stringify(param)
+    default:
+      return param
+  }
+}
+
 const SignatureView = forwardRef(
   (
     {
@@ -97,18 +108,29 @@ const SignatureView = forwardRef(
     ref
   ) => {
     const [loading, setLoading] = useState(true);
-
     const [hasError, setHasError] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
+    // Key to force WebView remount when needed (e.g., after content process termination)
+    const [webViewKey, setWebViewKey] = useState(0);
     const maxRetries = 3;
     const webViewRef = useRef();
+    // Store dataURL for injection - updates when dataURL prop changes
+    const currentDataURLRef = useRef(dataURL);
+
+    // Update ref when dataURL prop changes
+    useEffect(() => {
+      currentDataURLRef.current = dataURL;
+    }, [dataURL]);
+
     // Split source generation for better performance
+    // Include webViewKey to regenerate script when WebView needs remounting
     const injectedScript = useMemo(() => {
       let script = injectedSignaturePad + injectedApplication;
       script = script.replace(/<%autoClear%>/g, autoClear);
       script = script.replace(/<%trimWhitespace%>/g, trimWhitespace);
       script = script.replace(/<%imageType%>/g, imageType || "image/png");
-      script = script.replace(/<%dataURL%>/g, dataURL || "");
+      // 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");
@@ -117,7 +139,7 @@ const SignatureView = forwardRef(
       script = script.replace(/<%minDistance%>/g, minDistance || 5);
       script = script.replace(/<%orientation%>/g, rotated || false);
       return script;
-    }, [autoClear, trimWhitespace, imageType, dataURL, penColor, backgroundColor, dotSize, minWidth, maxWidth, minDistance, rotated]);
+    }, [autoClear, trimWhitespace, imageType, penColor, backgroundColor, dotSize, minWidth, maxWidth, minDistance, rotated, webViewKey]);
 
     const source = useMemo(() => {
       const htmlContentValue = customHtml || htmlContent;
@@ -137,23 +159,33 @@ const SignatureView = forwardRef(
       return { html };
     }, [injectedScript, customHtml, bgWidth, bgHeight, bgSrc, overlayWidth, overlayHeight, overlaySrc, webStyle, descriptionText, confirmText, clearText, rotated]);
 
-    // Optimize WebView reload to prevent excessive reloads
-    const [shouldReload, setShouldReload] = useState(false);
+    // Handle dataURL changes dynamically without reloading WebView
+    const prevDataURLRef = useRef(dataURL);
 
     useEffect(() => {
-      setShouldReload(true);
-    }, [source]);
+      // Skip if dataURL hasn't changed or WebView isn't ready
+      if (prevDataURLRef.current === dataURL || !webViewRef.current || loading) {
+        return;
+      }
 
-    useEffect(() => {
-      if (shouldReload && webViewRef.current) {
+      prevDataURLRef.current = dataURL;
+
+      // Update dataURL in WebView without full reload
+      if (dataURL) {
+        const script = `
+          dataURL = '${dataURL}';
+          if (signaturePad && signaturePad.isEmpty()) {
+            signaturePad.fromDataURL(dataURL);
+          }
+          true;
+        `;
         try {
-          webViewRef.current.reload();
-          setShouldReload(false);
+          webViewRef.current.injectJavaScript(script);
         } catch (error) {
-          console.warn("WebView reload failed:", error);
+          console.warn("Failed to update dataURL:", error);
         }
       }
-    }, [shouldReload]);
+    }, [dataURL, loading]);
 
     const isJson = (str) => {
       try {
@@ -228,7 +260,7 @@ const SignatureView = forwardRef(
 
       try {
         const script = params.length > 0
-          ? `${method}(${params.map(p => typeof p === 'string' ? `'${p}'` : p).join(',')});true;`
+          ? `${method}(${params.map(getParamForInjection).join(',')});true;`
           : `${method}();true;`;
         webViewRef.current.injectJavaScript(script);
       } catch (error) {
@@ -267,6 +299,38 @@ const SignatureView = forwardRef(
           }
           executeWebViewMethod('fromData', [pointGroups, false]);
         },
+        // New method to set dataURL without causing WebView reload
+        setDataURL: (url) => {
+          if (typeof url !== 'string') {
+            console.warn('setDataURL: url must be a string');
+            return;
+          }
+          if (!webViewRef.current) {
+            console.warn('WebView ref is null when calling setDataURL');
+            return;
+          }
+          const script = `
+            dataURL = '${url}';
+            if (signaturePad) {
+              signaturePad.clear();
+              if (dataURL) {
+                signaturePad.fromDataURL(dataURL);
+              }
+            }
+            true;
+          `;
+          try {
+            webViewRef.current.injectJavaScript(script);
+          } catch (error) {
+            console.error('Error executing setDataURL:', error);
+          }
+        },
+        // Force reinitialize WebView - useful for bottom sheets/modals where WebView state is lost
+        reinitialize: () => {
+          setLoading(true);
+          setHasError(false);
+          setWebViewKey(prev => prev + 1);
+        },
       }),
       [executeWebViewMethod]
     );
@@ -296,6 +360,16 @@ const SignatureView = forwardRef(
       }
     }, [onError, retryCount, maxRetries]);
 
+    // Handle iOS WebView content process termination (WKWebView can be killed when app is backgrounded)
+    // This is crucial for bottom sheets and modals where the component stays mounted but WebView is killed
+    const handleContentProcessDidTerminate = useCallback(() => {
+      console.warn("WebView content process terminated, reinitializing...");
+      setLoading(true);
+      setHasError(false);
+      // Increment key to force WebView remount with fresh JavaScript context
+      setWebViewKey(prev => prev + 1);
+    }, []);
+
     const handleLoadEnd = useCallback(() => {
       setLoading(false);
       setHasError(false);
@@ -323,6 +397,8 @@ 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}
@@ -331,11 +407,13 @@ const SignatureView = forwardRef(
           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={[webviewContainerStyle]}
+          style={[{ flex: 1 }, webviewContainerStyle]}
           scrollEnabled={scrollable}
           androidLayerType={androidLayerType}
           androidHardwareAccelerationDisabled={

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-native-signature-canvas",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "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 -r 0",
+    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "postversion": "git push --follow-tags"
   },
   "repository": {