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
  }
});