react-native-signature-canvas 4.7.4 → 5.0.1

package/index.js

@@ -5,8 +5,9 @@ import React, {
   useRef,
   forwardRef,
   useImperativeHandle,
+  useCallback,
 } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
+import { View, StyleSheet, ActivityIndicator, Text } from "react-native";
 
 import htmlContent from "./h5/html";
 import injectedSignaturePad from "./h5/js/signature_pad";
@@ -14,6 +15,20 @@ import injectedApplication from "./h5/js/app";
 
 import { WebView } from "react-native-webview";
 
+// Constants for better maintainability
+const MESSAGE_TYPES = {
+  BEGIN: "BEGIN",
+  END: "END",
+  EMPTY: "EMPTY",
+  CLEAR: "CLEAR",
+  UNDO: "UNDO",
+  REDO: "REDO",
+  DRAW: "DRAW",
+  ERASE: "ERASE",
+  CHANGE_PEN: "CHANGE_PEN",
+  CHANGE_PEN_SIZE: "CHANGE_PEN_SIZE"
+};
+
 const styles = StyleSheet.create({
   webBg: {
     width: "100%",
@@ -65,6 +80,7 @@ const SignatureView = forwardRef(
       onBegin = () => { },
       onEnd = () => { },
       onLoadEnd = () => { },
+      onError = () => { },
       overlayHeight = 0,
       overlayWidth = 0,
       overlaySrc = null,
@@ -76,85 +92,69 @@ const SignatureView = forwardRef(
       webStyle = "",
       webviewContainerStyle = null,
       androidLayerType = "hardware",
+      webviewProps = {},
     },
     ref
   ) => {
     const [loading, setLoading] = useState(true);
+
+    const [hasError, setHasError] = useState(false);
+    const [retryCount, setRetryCount] = useState(0);
+    const maxRetries = 3;
     const webViewRef = useRef();
-    const source = useMemo(() => {
-      let injectedJavaScript = injectedSignaturePad + injectedApplication;
-      const htmlContentValue = customHtml ? customHtml : htmlContent;
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%autoClear%>/g,
-        autoClear
-      );
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%trimWhitespace%>/g,
-        trimWhitespace
-      );
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%imageType%>/g,
-        imageType
-      );
-      injectedJavaScript = injectedJavaScript.replace(/<%dataURL%>/g, dataURL);
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%penColor%>/g,
-        penColor
-      );
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%backgroundColor%>/g,
-        backgroundColor
-      );
-      injectedJavaScript = injectedJavaScript.replace(/<%dotSize%>/g, dotSize);
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%minWidth%>/g,
-        minWidth
-      );
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%maxWidth%>/g,
-        maxWidth
-      );
-      injectedJavaScript = injectedJavaScript.replace(
-        /<%minDistance%>/g,
-        minDistance
-      );
+    // Split source generation for better performance
+    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 || "");
+      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]);
 
-      let html = htmlContentValue(injectedJavaScript);
-      html = html.replace(/<%bgWidth%>/g, bgWidth);
-      html = html.replace(/<%bgHeight%>/g, bgHeight);
-      html = html.replace(/<%bgSrc%>/g, bgSrc);
-      html = html.replace(/<%overlayWidth%>/g, overlayWidth);
-      html = html.replace(/<%overlayHeight%>/g, overlayHeight);
-      html = html.replace(/<%overlaySrc%>/g, overlaySrc);
-      html = html.replace(/<%style%>/g, webStyle);
-      html = html.replace(/<%description%>/g, descriptionText);
-      html = html.replace(/<%confirm%>/g, confirmText);
-      html = html.replace(/<%clear%>/g, clearText);
-      html = html.replace(/<%orientation%>/g, rotated);
+    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(/<%orientation%>/g, rotated || false);
 
       return { html };
-    }, [
-      customHtml,
-      autoClear,
-      trimWhitespace,
-      rotated,
-      imageType,
-      webStyle,
-      descriptionText,
-      confirmText,
-      clearText,
-      dataURL,
-      bgSrc,
-      bgWidth,
-      bgHeight,
-    ]);
+    }, [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);
 
     useEffect(() => {
-      if (webViewRef.current) {
-        webViewRef.current.reload();
-      }
+      setShouldReload(true);
     }, [source]);
 
+    useEffect(() => {
+      if (shouldReload && webViewRef.current) {
+        try {
+          webViewRef.current.reload();
+          setShouldReload(false);
+        } catch (error) {
+          console.warn("WebView reload failed:", error);
+        }
+      }
+    }, [shouldReload]);
+
     const isJson = (str) => {
       try {
         JSON.parse(str);
@@ -164,112 +164,176 @@ const SignatureView = forwardRef(
       return true;
     };
 
-    const getSignature = (e) => {
-      switch (e.nativeEvent.data) {
-        case "BEGIN":
-          onBegin();
-          break;
-        case "END":
-          onEnd();
-          break;
-        case "EMPTY":
-          onEmpty();
-          break;
-        case "CLEAR":
-          onClear();
-          break;
-        case "UNDO":
-          onUndo();
-          break;
-        case "REDO":
-          onRedo();
-          break;
-        case "DRAW":
-          onDraw();
-          break;
-        case "ERASE":
-          onErase();
-          break;
-        case "CHANGE_PEN":
-          onChangePenColor();
-          break;
-        case "CHANGE_PEN_SIZE":
-          onChangePenSize();
-          break;
-        default:
-          isJson(e.nativeEvent.data)
-            ? onGetData(e.nativeEvent.data)
-            : onOK(e.nativeEvent.data);
+    // Enhanced message handling with error handling
+    const getSignature = useCallback((e) => {
+      if (!e?.nativeEvent?.data) {
+        console.warn("Invalid message received from WebView");
+        return;
       }
-    };
+
+      const data = e.nativeEvent.data;
+
+      try {
+        switch (data) {
+          case MESSAGE_TYPES.BEGIN:
+            onBegin();
+            break;
+          case MESSAGE_TYPES.END:
+            onEnd();
+            break;
+          case MESSAGE_TYPES.EMPTY:
+            onEmpty();
+            break;
+          case MESSAGE_TYPES.CLEAR:
+            onClear();
+            break;
+          case MESSAGE_TYPES.UNDO:
+            onUndo();
+            break;
+          case MESSAGE_TYPES.REDO:
+            onRedo();
+            break;
+          case MESSAGE_TYPES.DRAW:
+            onDraw();
+            break;
+          case MESSAGE_TYPES.ERASE:
+            onErase();
+            break;
+          case MESSAGE_TYPES.CHANGE_PEN:
+            onChangePenColor();
+            break;
+          case MESSAGE_TYPES.CHANGE_PEN_SIZE:
+            onChangePenSize();
+            break;
+          default:
+            if (isJson(data)) {
+              onGetData(data);
+            } else if (typeof data === "string" && data.startsWith("data:")) {
+              onOK(data);
+            } else {
+              console.warn("Unknown message type:", data);
+            }
+        }
+      } catch (error) {
+        console.error("Error handling WebView message:", error);
+      }
+    }, [onBegin, onEnd, onEmpty, onClear, onUndo, onRedo, onDraw, onErase, onChangePenColor, onChangePenSize, onGetData, onOK]);
+
+    // Enhanced WebView method execution with error handling
+    const executeWebViewMethod = useCallback((method, params = []) => {
+      if (!webViewRef.current) {
+        console.warn(`WebView ref is null when calling ${method}`);
+        return;
+      }
+
+      try {
+        const script = params.length > 0
+          ? `${method}(${params.map(p => typeof p === 'string' ? `'${p}'` : p).join(',')});true;`
+          : `${method}();true;`;
+        webViewRef.current.injectJavaScript(script);
+      } catch (error) {
+        console.error(`Error executing WebView method ${method}:`, error);
+      }
+    }, []);
 
     useImperativeHandle(
       ref,
       () => ({
-        readSignature: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("readSignature();true;");
-          }
-        },
-        clearSignature: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("clearSignature();true;");
-          }
-        },
-        undo: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("undo();true;");
-          }
-        },
-        redo: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("redo();true;");
-          }
-        },
-        draw: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("draw();true;");
-          }
-        },
-        erase: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("erase();true;");
-          }
-        },
+        readSignature: () => executeWebViewMethod('readSignature'),
+        clearSignature: () => executeWebViewMethod('clearSignature'),
+        undo: () => executeWebViewMethod('undo'),
+        redo: () => executeWebViewMethod('redo'),
+        draw: () => executeWebViewMethod('draw'),
+        erase: () => executeWebViewMethod('erase'),
         changePenColor: (color) => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript(
-              "changePenColor('" + color + "');true;"
-            );
+          if (typeof color !== 'string') {
+            console.warn('changePenColor: color must be a string');
+            return;
           }
+          executeWebViewMethod('changePenColor', [color]);
         },
         changePenSize: (minW, maxW) => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript(
-              "changePenSize(" + minW + "," + maxW + ");true;"
-            );
+          if (typeof minW !== 'number' || typeof maxW !== 'number') {
+            console.warn('changePenSize: minW and maxW must be numbers');
+            return;
           }
+          executeWebViewMethod('changePenSize', [minW, maxW]);
         },
-        getData: () => {
-          if (webViewRef.current) {
-            webViewRef.current.injectJavaScript("getData();true;");
+        getData: () => executeWebViewMethod('getData'),
+        fromData: (pointGroups) => {
+          if (!pointGroups) {
+            console.warn('fromData: pointGroups must be an array');
+            return;
           }
+          executeWebViewMethod('fromData', [pointGroups, false]);
         },
       }),
-      [webViewRef]
+      [executeWebViewMethod]
     );
 
-    const renderError = ({ nativeEvent }) =>
-      console.warn("WebView error: ", nativeEvent);
+    const renderError = useCallback(({ nativeEvent }) => {
+      console.error("WebView error: ", nativeEvent);
+      setHasError(true);
+
+      // Call user-provided error handler
+      try {
+        onError(new Error(`WebView error: ${nativeEvent.description || nativeEvent.code}`));
+      } catch (err) {
+        console.warn('Error in onError callback:', err);
+      }
+
+      // Attempt to recover from error with retry logic
+      if (webViewRef.current && nativeEvent.code !== -999 && retryCount < maxRetries) {
+        setTimeout(() => {
+          try {
+            setRetryCount(prev => prev + 1);
+            webViewRef.current.reload();
+            setHasError(false);
+          } catch (error) {
+            console.error("Failed to reload WebView after error:", error);
+          }
+        }, Math.min(1000 * Math.pow(2, retryCount), 5000)); // Exponential backoff
+      }
+    }, [onError, retryCount, maxRetries]);
 
-    const handleLoadEnd = () => {
+    const handleLoadEnd = useCallback(() => {
       setLoading(false);
-      onLoadEnd();
-    }
+      setHasError(false);
+      setRetryCount(0);
+
+      try {
+        onLoadEnd();
+      } catch (error) {
+        console.warn('Error in onLoadEnd callback:', error);
+      }
+    }, [onLoadEnd]);
+
+    // Performance monitoring
+    const handleLoadStart = useCallback(() => {
+      setLoading(true);
+    }, []);
+
+    const handleLoadProgress = useCallback(({ nativeEvent }) => {
+      // Optional: Add progress monitoring
+      if (nativeEvent.progress === 1) {
+        setLoading(false);
+      }
+    }, []);
 
     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]}
           scrollEnabled={scrollable}
@@ -277,19 +341,34 @@ const SignatureView = forwardRef(
           androidHardwareAccelerationDisabled={
             androidHardwareAccelerationDisabled
           }
-          ref={webViewRef}
-          useWebKit={true}
-          source={source}
-          onMessage={getSignature}
-          javaScriptEnabled={true}
-          onError={renderError}
-          onLoadEnd={handleLoadEnd}
           nestedScrollEnabled={nestedScrollEnabled}
           showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          // Default performance optimizations
+          cacheEnabled={true}
+          allowsInlineMediaPlayback={false}
+          mediaPlaybackRequiresUserAction={true}
+          allowsBackForwardNavigationGestures={false}
+          // Default security enhancements
+          allowsLinkPreview={false}
+          allowFileAccess={false}
+          allowFileAccessFromFileURLs={false}
+          allowUniversalAccessFromFileURLs={false}
+          mixedContentMode="never"
+          originWhitelist={['*']}
+          // Default error recovery
+          startInLoadingState={true}
+          // User-provided WebView props (can override defaults but not core functionality)
+          {...webviewProps}
         />
-        {loading && (
+        {(loading || hasError) && (
           <View style={styles.loadingOverlayContainer}>
-            <ActivityIndicator color={"transparent"} />
+            {hasError ? (
+              <Text style={{ color: '#ff0000', textAlign: 'center', padding: 10 }}>
+                Error loading signature pad{retryCount > 0 ? ` (Retry ${retryCount}/${maxRetries})` : ''}
+              </Text>
+            ) : (
+              <ActivityIndicator color={"#007AFF"} size="small" />
+            )}
           </View>
         )}
       </View>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-signature-canvas",
-  "version": "4.7.4",
-  "description": "React Native Signature Component based Canvas for Android && IOS && expo",
+  "version": "5.0.1",
+  "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",
@@ -17,9 +17,16 @@
     "ios",
     "android",
     "signature",
-    "pad",
+    "signature-pad",
     "canvas",
-    "expo"
+    "expo",
+    "typescript",
+    "drawing",
+    "webview",
+    "performance",
+    "error-handling",
+    "undo-redo",
+    "svg-export"
   ],
   "author": "YanYuanFE",
   "license": "MIT",