react-native-signature-canvas 5.0.1 → 5.1.0

package/CHANGELOG.md

@@ -1,4 +1,19 @@
-# [5.0.0](https://github.com/YanYuanFE/react-native-signature-canvas/compare/v4.5.1...v5.0.0) (2025-06-28)
+# [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)
+
+
+### 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,59 +1,53 @@
 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);
-        };
+
+    // 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) {
-            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"),
+        onBegin: () => postMessage("BEGIN"),
+        onEnd: () => postMessage("END"),
         penColor: '<%penColor%>',
         backgroundColor: '<%backgroundColor%>',
         dotSize: <%dotSize%>,
@@ -62,77 +56,77 @@ export default `
         minDistance: <%minDistance%>,
     });
 
+    // Initial canvas setup
+    const observer = new ResizeObserver(() => {
+        resizeCanvas();
+    });
+    
+    observer.observe(canvas);
+
     function clearSignature () {
         signaturePad.clear();
-        window.ReactNativeWebView.postMessage("CLEAR");
+        dataURL='';
+        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) {
         if (!signaturePad) {
-            console.warn('SignaturePad not initialized');
             return;
         }
-        
         signaturePad.penColor = color;
-        window.ReactNativeWebView && window.ReactNativeWebView.postMessage("CHANGE_PEN");
+        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");
+        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)); //Will return cropped image data
+            postMessage(removeImageBlanks(myImage));
         }
         myImage.src = url;
 
-        //-----------------------------------------//
         function removeImageBlanks(imageObject) {
             var imgWidth = imageObject.width;
             var imgHeight = imageObject.height;
@@ -157,49 +151,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 +195,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,37 +205,33 @@ 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()) {
+            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();
-                }
+                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%>';
+    // <%dataURL%> is injected as an already-quoted JSON string literal
+    var dataURL = <%dataURL%>;
 
     if (dataURL) signaturePad.fromDataURL(dataURL);
 
@@ -259,18 +239,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

@@ -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;
@@ -76,8 +75,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
@@ -88,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,6 +46,12 @@ const styles = StyleSheet.create({
   },
 });
 
+// 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(
   (
     {
@@ -97,63 +103,87 @@ 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(() => {
+      // 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");
-      script = script.replace(/<%dataURL%>/g, dataURL || "");
-      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, 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;
       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 };
     }, [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 = ${JSON.stringify(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 +258,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) {
@@ -260,12 +290,44 @@ 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) => {
+          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 = ${JSON.stringify(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 +358,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,19 +395,9 @@ const SignatureView = forwardRef(
     return (
       <View style={[styles.webBg, style]}>
         <WebView
-          // Core functionality props (cannot be overridden)
-          ref={webViewRef}
-          source={source}
-          onMessage={getSignature}
-          onError={renderError}
-          onLoadEnd={handleLoadEnd}
-          onLoadStart={handleLoadStart}
-          onLoadProgress={handleLoadProgress}
-          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={
@@ -359,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.1",
+  "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 -r 0",
-    "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",