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 [email protected]

Usage

import Signature from 'react-native-signature-canvas';

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:

import Signature, {readSignature, clearSignature} from 'react-native-signature-canvas';

Basic parameters

<Signature
  // handle when you click save button
  onOK={(img) => console.log(img)}
  onEmpty={() => console.log("empty")}
  // description text for signature
  descriptionText="Sign"
  // clear button text
  clearText="Clear"
  // save button text
  confirmText="Save"
  // String, webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css
  webStyle={`.m-signature-pad--footer
    .button {
      background-color: red;
      color: #FFF;
    }`
  }
  autoClear={true}
  imageType={"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;
	}
`;
...
  <Signature
    webStyle={webStyle}
    onOK={handleOK}
    onEmpt={handleEmpty}
    onEnd={handleEnd}
  />

Example

• Android
  

• iOS
  

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Signature from 'react-native-signature-canvas';

export default class SignatureScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { signature: null };
  }

  handleSignature = signature => {
    this.setState({ signature });
  };

  handleEmpty = () => {
    console.log('Empty');
  }

  render() {
    const style = `.m-signature-pad--footer
    .button {
      background-color: red;
      color: #FFF;
    }`;
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.preview}>
          {this.state.signature ? (
            <Image
              resizeMode={"contain"}
              style={{ width: 335, height: 114 }}
              source={{ uri: this.state.signature }}
            />
          ) : null}
        </View>
        <Signature
          onOK={this.handleSignature}
          onEmpty={this.handleEmpty}
          descriptionText="Sign"
          clearText="Clear"
          confirmText="Save"
          webStyle={style}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  preview: {
    width: 335,
    height: 114,
    backgroundColor: "#F8F8F8",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 15
  },
  previewText: {
    color: "#FFF",
    fontSize: 14,
    height: 40,
    lineHeight: 40,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: "#69B2FF",
    width: 120,
    textAlign: "center",
    marginTop: 10
  }
});