react-native-signature-canvas
React Native Signature Component based Canvas for Android && IOS && expo
- Supports Android and iOS and Expo
- Pure JavaScript implementation with no native dependencies
- Tested with RN 0.50
- Core use signature_pad.js
- Only depend on react and react native
- Generates a base64 encoded png image of the signature Note: Expo support for React Native Signature Canvas v1.5.0 started with Expo SDK v33.0.0.
Installation(for React Native V0.60.0 or Expo SDK v35.0.0)
npm install --save react-native-signature-canvas
Installation(for React Native V0.5x.x or Expo SDK < v33)
npm install --save react-native-signature-canvas@1.4.2
Usage
;
Properties
Prop | Type | Description |
---|---|---|
descriptionText | string |
description text for signature |
clearText | string |
clear button text |
confirmText | string |
save button text |
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 |
onOK | function |
handle function when you click save button |
onEmpty | function |
handle function of empty signature when you click save button |
onClear | function |
handle function when you click clear button |
onBegin | function |
handle function when a new stroke is started |
onEnd | function |
handle function when the stroke has ended |
customHtml | function |
html string that lets you modify things like the layout or elements. |
autoClear | boolean |
is auto clear the signature after click confirm button |
imageType | string |
default is "", "image/jpeg"、"image/svg+xml", imageType of export signature |
Methods
Function | Description |
---|---|
readSignature() | Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks |
clearSignature() | Clears the current signature |
You need to import the functions from react-native-signature-canvas like:
;
Basic parameters
<Signature// handle when you click save buttononOK= consoleonEmpty= console// description text for signaturedescriptionText="Sign"// clear button textclearText="Clear"// save button textconfirmText="Save"// String, webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.csswebStyle=`.m-signature-pad--footer.button {background-color: red;color: #FFF;}`autoClear=trueimageType="image/svg+xml"/>
If you create your own triggers for the readSignature and/or clearSignature you can hide the built in Clear and Save buttons with css styles passed into the webStyle property.
const webStyle = `.m-signature-pad--footer.save {display: none;}.clear {display: none;}`;...<SignaturewebStyle=webStyleonOK=handleOKonEmpt=handleEmptyonEnd=handleEnd/>
Example
-
Android
-
iOS
;;; Component { superprops; thisstate = signature: null ; } { this; }; { console; } { const style = `.m-signature-pad--footer .button { background-color: red; color: #FFF; }`; return <View style= flex: 1 > <View style=stylespreview> thisstatesignature ? <Image resizeMode="contain" style= width: 335 height: 114 source= uri: thisstatesignature /> : null </View> <Signature onOK=thishandleSignature onEmpty=thishandleEmpty descriptionText="Sign" clearText="Clear" confirmText="Save" webStyle=style /> </View> ; } const styles = StyleSheet;