feat: add onLoadEnd prop

YanYuanFE · Sep 23, 2023 · 49a8664 · 49a8664
1 parent ab34178
commit 49a8664
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -51,37 +51,38 @@ import SignatureScreen from 'react-native-signature-canvas';
 ---
 
 | Prop                                |    Type    | Description                                                                                                                                           |
-| :---------------------------------- | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+|:------------------------------------| :--------: |:------------------------------------------------------------------------------------------------------------------------------------------------------|
 | androidHardwareAccelerationDisabled | `boolean`  | androidHardwareAccelerationDisabled for react-native-webview. Default is false                                                                        |
 | autoClear                           | `boolean`  | should auto clear the signature after clicking the Confirm button                                                                                     |
-| backgroundColor                     |  `string`  | default is "rgba(255,255,255,0)" (_transparent_), background color of the canvas                                                                                           |
+| backgroundColor                     |  `string`  | default is "rgba(255,255,255,0)" (_transparent_), background color of the canvas                                                                      |
 | bgHeight                            |  `number`  | height of the background image                                                                                                                        |
 | bgWidth                             |  `number`  | width of the background image                                                                                                                         |
-| bgSrc                               |  `string`  | background image source uri (_url_)                                                                                                                  |
+| bgSrc                               |  `string`  | background image source uri (_url_)                                                                                                                   |
 | clearText                           |  `string`  | clear button text                                                                                                                                     |
 | confirmText                         |  `string`  | save button text                                                                                                                                      |
 | customHtml                          | `(injectedJavaScript: string) => string` | html string that lets you modify things like the layout or elements                                                                                   |
 | dataURL                             |  `string`  | default is "", Base64 string, draws saved signature from dataURL.                                                                                     |
 | descriptionText                     |  `string`  | description text for signature                                                                                                                        |
 | dotSize                             |  `number`  | radius of a single dot _(not stroke width)_                                                                                                           |
-| imageType                           |  `string`  | "image/png" (_default_), "image/jpeg"、"image/svg+xml", imageType of exported signature                                                               |
+| imageType                           |  `string`  | "image/png" (_default_), "image/jpeg"、"image/svg+xml", imageType of exported signature                                                                |
 | minWidth                            |  `number`  | minimum width of a line. Defaults to 0.5                                                                                                              |
 | maxWidth                            |  `number`  | maximum width of a line. Defaults to 2.5                                                                                                              |
 | onOK                                | `function` | callback function after saving non-empty signature                                                                                                    |
 | onEmpty                             | `function` | callback function after trying to save an empty signature                                                                                             |
 | onClear                             | `function` | callback function after clearing the signature                                                                                                        |
-|onGetData|`function`|callback function when getData() is called
+| onGetData                           |`function`| callback function when getData() is called                                                                                                            
 | onBegin                             | `function` | callback function when a new stroke is started                                                                                                        |
 | onEnd                               | `function` | callback function when the stroke has ended                                                                                                           |
-| onUndo                              | `function` | callback function when undo() is called |
-| onRedo                              | `function` | callback function when redo() is called |
+| onLoadEnd                           | `function` | callback function when the webview canvas load ended                                                                                                  |
+| onUndo                              | `function` | callback function when undo() is called                                                                                                               |
+| onRedo                              | `function` | callback function when redo() is called                                                                                                               |
 | onDraw                              | `function` | callback function when drawing is enabled                                                                                                             |
 | onErase                             | `function` | callback function when erasing is enabled                                                                                                             |
-| onChangePenColor                    | `function` | callback function after changing the pen color |
-| onChangePenSize | `function` | callback function after changing the pen size
-|overlayHeight|`number`|height of the overlay image|
-|overlayWidth|`number`|width of the overlay image|
-|overlaySrc|`string`|overlay image source uri (url) _must be .png with a transparent background_
+| onChangePenColor                    | `function` | callback function after changing the pen color                                                                                                        |
+| onChangePenSize                     | `function` | callback function after changing the pen size                                                                                                         
+| overlayHeight                       |`number`| height of the overlay image                                                                                                                           |
+| overlayWidth                        |`number`| width of the overlay image                                                                                                                            |
+| overlaySrc                          |`string`| overlay image source uri (url) _must be .png with a transparent background_                                                                           
 | penColor                            |  `string`  | default is "black", color of pen                                                                                                                      |
 | rotated                             | `boolean`  | rotate signature pad 90 degrees                                                                                                                       |
 | style                               |  `object`  | style of wrapper view                                                                                                                                 |

diff --git a/example/sign-app/App.js b/example/sign-app/App.js
@@ -1,4 +1,4 @@
-import { StyleSheet, View, ScrollView, Image, Text } from 'react-native';
+import { StyleSheet, View, ScrollView, Image, Text,  ImageBackground } from 'react-native';
 import SignatureScreen from "react-native-signature-canvas";
 import {useEffect, useRef, useState} from "react";
 import {MySignatureCanvas} from "./ScrollSign";
@@ -7,9 +7,11 @@ import ViewShot from "react-native-view-shot";
 const url = "data:image/png;base64,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"
 
 const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
+
+const bgUrl = 'https://legacy.reactjs.org/logo-og.png';
 const Sign = ({ text, onOK }) => {
   const ref = useRef();
-  const [bg, setBg] = useState(dataURL);
+  const [bg, setBg] = useState(bgUrl);
 
   // Called after ref.current.readSignature() reads a non-empty base64 string
   const handleOK = (signature) => {
@@ -49,6 +51,18 @@ const Sign = ({ text, onOK }) => {
           backgroundColor={'transparent'}
           style={{ flex: 1, height: 300 }}
           androidHardwareAccelerationDisabled={false}
+          webStyle={`
+                .m-signature-pad canvas {
+                  background-image: url('${bg}');
+                  background-size: 100% 100%;
+                  background-repeat: no-repeat;
+                }
+                .m-signature-pad {
+                  flex: 1;
+                  box-shadow: none;
+                  border-radius: 10px;
+                }
+                `}
       />
   );
 };
@@ -93,6 +107,7 @@ export default function App() {
   const [img, setImg] = useState(null);
   const [sign, setSign] = useState(null);
   const ref = useRef();
+  const [bg, setBg] = useState(bgUrl);
 
   const onCapture = () => {
     ref.current.capture().then(uri => {
@@ -112,22 +127,24 @@ export default function App() {
   return (
       <View style={styles.container}>
         <ViewShot ref={ref} options={{ fileName: "Your-File-Name", format: "png", quality: 0.9, result: 'data-uri' }}>
+          <ImageBackground source={{uri: bg}} style={styles.image}>
           <View style={{
             width: 400,
             height: 300
           }}>
             {sign ? (
-                <Image
-                    resizeMode={"contain"}
-                    style={{ width: 400, height: 114 }}
-                    source={{ uri: sign }}
-                />
+                      <Image
+                          resizeMode={"contain"}
+                          style={{ width: 400, height: 300 }}
+                          source={{ uri: sign }}
+                      />
             ) : <Sign text="Test" onOK={(img) => {
               console.log('ok')
               setSign(img);
               onCapture();
             }} />}
           </View>
+          </ImageBackground>
           <Text>...Something to rasterize...</Text>
         </ViewShot>
         <View style={styles.preview}>
@@ -150,6 +167,12 @@ const styles = StyleSheet.create({
     // alignItems: 'center',
     // justifyContent: 'center',
   },
+  image: {
+    // flex: 1,
+    resizeMode: 'cover',
+    justifyContent: 'center',
+    height: 300,
+  },
   preview: {
     height: 114,
     backgroundColor: "green",

diff --git a/index.d.ts b/index.d.ts
@@ -36,6 +36,7 @@ declare module "react-native-signature-canvas" {
     onChangePenSize?: () => void;
     onBegin?: () => void;
     onEnd?: () => void;
+    onLoadEnd?: () => void;
     overlayHeight?: number;
     overlayWidth?: number;
     overlaySrc?: string;

diff --git a/index.js b/index.js
@@ -61,6 +61,7 @@ const SignatureView = forwardRef(
       onChangePenSize = () => {},
       onBegin = () => {},
       onEnd = () => {},
+      onLoadEnd = () => {},
       overlayHeight = 0,
       overlayWidth = 0,
       overlaySrc = null,
@@ -253,6 +254,11 @@ const SignatureView = forwardRef(
     const renderError = ({ nativeEvent }) =>
       console.warn("WebView error: ", nativeEvent);
 
+    const handleLoadEnd = () => {
+        setLoading(false);
+        onLoadEnd();
+    }
+
     return (
       <View style={[styles.webBg, style]}>
         <WebView
@@ -269,7 +275,7 @@ const SignatureView = forwardRef(
           onMessage={getSignature}
           javaScriptEnabled={true}
           onError={renderError}
-          onLoadEnd={() => setLoading(false)}
+          onLoadEnd={handleLoadEnd}
         />
         {loading && (
           <View style={styles.loadingOverlayContainer}>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-signature-canvas",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "React Native Signature Component based Canvas for Android && IOS && expo",
   "main": "index.js",
   "scripts": {