Skip to content

Commit ffd3454

Browse files
YanYuanFEYanYuanFE
authored
Merge pull request #355 from quick691fr/master
Add minDistance property to component
2 parents 2e1a2bd + 58ce0ef commit ffd3454

File tree

5 files changed

+50
-35
lines changed

5 files changed

+50
-35
lines changed

‎README.md

+19-13
Original file line numberDiff line numberDiff line change
@@ -28,30 +28,32 @@ npm install --save react-native-signature-canvas
2828

2929
> This package depends on [react-native-webview](https://github.com/react-native-webview/react-native-webview#readme) and it is particularly needed when you are using **_React Native CLI_**. To install `react-native-webview` follow the steps mentioned [here](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md)
3030
31-
32-
3331
## Installation(for React Native V0.5x.x or Expo SDK < v33)
3432

3533
```bash
3634
npm install --save [email protected]
3735
```
3836

3937
## Usage
38+
4039
Basic
40+
4141
```js
4242
import Signature from "react-native-signature-canvas";
4343
```
44+
4445
Custom
46+
4547
```js
46-
import SignatureScreen from 'react-native-signature-canvas';
48+
import SignatureScreen from "react-native-signature-canvas";
4749
```
4850

4951
## Properties
5052

5153
---
5254

5355
| Prop | Type | Description |
54-
|:------------------------------------|:----------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------|
56+
| :---------------------------------- | :--------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
5557
| androidHardwareAccelerationDisabled | `boolean` | androidHardwareAccelerationDisabled for react-native-webview. Default is false |
5658
| autoClear | `boolean` | should auto clear the signature after clicking the Confirm button |
5759
| backgroundColor | `string` | default is "rgba(255,255,255,0)" (_transparent_), background color of the canvas |
@@ -64,15 +66,16 @@ import SignatureScreen from 'react-native-signature-canvas';
6466
| dataURL | `string` | default is "", Base64 string, draws saved signature from dataURL. |
6567
| descriptionText | `string` | description text for signature |
6668
| dotSize | `number` | radius of a single dot _(not stroke width)_ |
67-
| imageType | `string` | "image/png" (_default_), "image/jpeg"、"image/svg+xml", imageType of exported signature |
69+
| imageType | `string` | "image/png" (_default_), "image/jpeg"、"image/svg+xml", imageType of exported signature |
6870
| minWidth | `number` | minimum width of a line. Defaults to 0.5 |
6971
| maxWidth | `number` | maximum width of a line. Defaults to 2.5 |
72+
| minDistance | `number` | Add the next point only if the previous one is farther than x pixels. Defaults to 5. 5 |
7073
| nestedScrollEnabled | `boolean` | enable nested scrolling for use inside of a scrollview |
71-
| showsVerticalScrollIndicator | `boolean` | Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`, The default value is `true`. |
74+
| showsVerticalScrollIndicator | `boolean` | Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`, The default value is `true`. |
7275
| onOK | `function` | callback function after saving non-empty signature |
7376
| onEmpty | `function` | callback function after trying to save an empty signature |
7477
| onClear | `function` | callback function after clearing the signature |
75-
| onGetData | `function` | callback function when getData() is called
78+
| onGetData | `function` | callback function when getData() is called |
7679
| onBegin | `function` | callback function when a new stroke is started |
7780
| onEnd | `function` | callback function when the stroke has ended |
7881
| onLoadEnd | `function` | callback function when the webview canvas load ended |
@@ -81,23 +84,23 @@ import SignatureScreen from 'react-native-signature-canvas';
8184
| onDraw | `function` | callback function when drawing is enabled |
8285
| onErase | `function` | callback function when erasing is enabled |
8386
| onChangePenColor | `function` | callback function after changing the pen color |
84-
| onChangePenSize | `function` | callback function after changing the pen size
87+
| onChangePenSize | `function` | callback function after changing the pen size |
8588
| overlayHeight | `number` | height of the overlay image |
8689
| overlayWidth | `number` | width of the overlay image |
87-
| overlaySrc | `string` | overlay image source uri (url) _must be .png with a transparent background_
90+
| overlaySrc | `string` | overlay image source uri (url) _must be .png with a transparent background_ |
8891
| penColor | `string` | default is "black", color of pen |
8992
| rotated | `boolean` | rotate signature pad 90 degrees |
9093
| style | `object` | style of wrapper view |
9194
| trimWhitespace | `boolean` | trim image whitespace |
9295
| webStyle | `string` | webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |
93-
| androidLayerType | `none、software、hardware` | Sets the android webview layerType |
96+
| androidLayerType | `none、software、hardware` | Sets the android webview layerType |
9497

9598
## Methods
9699

97100
---
98101

99102
| Function | Description |
100-
| :-------------------- | :-----------------------------------------------------------------------------------------------|
103+
| :------------------------ | :---------------------------------------------------------------------------------------------- |
101104
| clearSignature() | Clear the current signature |
102105
| changePenColor(color) | Change pen color |
103106
| changePenSize(minW, maxW) | Change pen size |
@@ -158,13 +161,15 @@ const Sign = ({ text, onOK }) => {
158161

159162
export default Sign;
160163
```
164+
161165
## Using a background image
166+
162167
You can use a non-erasable background image to draw your signature on using the `bgSrc` prop. Make sure to provide the width and height of the image.
163168

164169
```js
165170
const imgWidth = 300;
166171
const imgHeight = 200;
167-
const style = `.m-signature-pad {box-shadow: none; border: none; }
172+
const style = `.m-signature-pad {box-shadow: none; border: none; }
168173
.m-signature-pad--body {border: none;}
169174
.m-signature-pad--footer {display: none; margin: 0px;}
170175
body,html {
@@ -183,13 +188,14 @@ const style = `.m-signature-pad {box-shadow: none; border: none; }
183188
```
184189

185190
## Using an overlay image
191+
186192
An overlay is a non-erasable image that can be used as a guideline similar to a colouring book. Make sure the image format is .png and that it has a transparent background. Also, don't forget to provide the width and height of the image.
187193
Use the `overlaySrc` prop to provide the link.
188194

189195
```js
190196
const imgWidth = 256;
191197
const imgHeight = 256;
192-
const style = `.m-signature-pad {box-shadow: none; border: none; }
198+
const style = `.m-signature-pad {box-shadow: none; border: none; }
193199
.m-signature-pad--body {border: none;}
194200
.m-signature-pad--footer {display: none; margin: 0px;}
195201
body,html {

‎h5/js/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default `
3333
dotSize: <%dotSize%>,
3434
minWidth: <%minWidth%>,
3535
maxWidth: <%maxWidth%>,
36+
minDistance: <%minDistance%>,
3637
});
3738
3839
function clearSignature () {

‎index.d.ts

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
declare module "react-native-signature-canvas" {
22
import React from "react";
3-
import {StyleProp, ViewStyle} from "react-native";
3+
import { StyleProp, ViewStyle } from "react-native";
44

55
type ImageType = "image/png" | "image/jpeg" | "image/svg+xml";
66

77
type DataURL = "Base64" | string;
88

9-
type ForwardRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
9+
type ForwardRef<T, P> = React.ForwardRefExoticComponent<
10+
React.PropsWithoutRef<P> & React.RefAttributes<T>
11+
>;
1012

1113
type SignatureViewProps = {
1214
androidHardwareAccelerationDisabled?: boolean;
@@ -24,6 +26,7 @@ declare module "react-native-signature-canvas" {
2426
imageType?: ImageType;
2527
minWidth?: number;
2628
maxWidth?: number;
29+
minDistance?: number;
2730
nestedScrollEnabled?: boolean;
2831
showsVerticalScrollIndicator?: boolean;
2932
onOK?: (signature: string) => void;
@@ -50,7 +53,7 @@ declare module "react-native-signature-canvas" {
5053
webStyle?: string;
5154
webviewContainerStyle?: StyleProp<ViewStyle>;
5255
androidLayerType?: "none" | "software" | "hardware";
53-
}
56+
};
5457

5558
export type SignatureViewRef = {
5659
changePenColor: (color: string) => void;
@@ -63,8 +66,8 @@ declare module "react-native-signature-canvas" {
6366
readSignature: () => void;
6467
undo: () => void;
6568
redo: () => void;
66-
}
69+
};
6770

68-
const SignatureView: ForwardRef<SignatureViewRef, SignatureViewProps>
71+
const SignatureView: ForwardRef<SignatureViewRef, SignatureViewProps>;
6972
export default SignatureView;
7073
}

‎index.js

+21-16
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,22 @@ const SignatureView = forwardRef(
4949
imageType = "",
5050
minWidth = 0.5,
5151
maxWidth = 2.5,
52+
minDistance = 5,
5253
nestedScrollEnabled = false,
53-
showsVerticalScrollIndicator= true,
54-
onOK = () => {},
55-
onEmpty = () => {},
56-
onClear = () => {},
57-
onUndo = () => {},
58-
onRedo = () => {},
59-
onDraw = () => {},
60-
onErase = () => {},
61-
onGetData = () => {},
62-
onChangePenColor = () => {},
63-
onChangePenSize = () => {},
64-
onBegin = () => {},
65-
onEnd = () => {},
66-
onLoadEnd = () => {},
54+
showsVerticalScrollIndicator = true,
55+
onOK = () => { },
56+
onEmpty = () => { },
57+
onClear = () => { },
58+
onUndo = () => { },
59+
onRedo = () => { },
60+
onDraw = () => { },
61+
onErase = () => { },
62+
onGetData = () => { },
63+
onChangePenColor = () => { },
64+
onChangePenSize = () => { },
65+
onBegin = () => { },
66+
onEnd = () => { },
67+
onLoadEnd = () => { },
6768
overlayHeight = 0,
6869
overlayWidth = 0,
6970
overlaySrc = null,
@@ -113,6 +114,10 @@ const SignatureView = forwardRef(
113114
/<%maxWidth%>/g,
114115
maxWidth
115116
);
117+
injectedJavaScript = injectedJavaScript.replace(
118+
/<%minDistance%>/g,
119+
minDistance
120+
);
116121

117122
let html = htmlContentValue(injectedJavaScript);
118123
html = html.replace(/<%bgWidth%>/g, bgWidth);
@@ -258,8 +263,8 @@ const SignatureView = forwardRef(
258263
console.warn("WebView error: ", nativeEvent);
259264

260265
const handleLoadEnd = () => {
261-
setLoading(false);
262-
onLoadEnd();
266+
setLoading(false);
267+
onLoadEnd();
263268
}
264269

265270
return (

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-signature-canvas",
3-
"version": "4.7.2",
3+
"version": "4.7.3",
44
"description": "React Native Signature Component based Canvas for Android && IOS && expo",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)