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

Installation

1npm install --save react-native-signature-canvas

Usage

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

Basic parameters

1<Signature
2  // handle when you click save button
3  onOK={(img) => console.log(img)}
4  // description text for signature
5  descriptionText="Sign"
6  // clear button text
7  clearText="Clear"
8  // save button text
9  confirmText="Save"
10  // String, webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css
11  webStyle={`.m-signature-pad--footer
12    .button {
13      background-color: red;
14      color: #FFF;
15    }`}
16/>
17

Example

1import React from 'react';
2import { StyleSheet, Text, View, Image } from 'react-native';
3import Signature from 'react-native-signature-canvas';
4
5export default class SignatureScreen extends React.Component {
6  constructor(props) {
7    super(props);
8    this.state = { signature: null };
9  }
10
11  handleSignature = signature => {
12    this.setState({ signature });
13  };
14
15  render() {
16    const style = `.m-signature-pad--footer
17    .button {
18      background-color: red;
19      color: #FFF;
20    }`;
21    return (
22      <View style={{ flex: 1 }}>
23        <View style={styles.preview}>
24          {this.state.signature ? (
25            <Image
26              resizeMode={"contain"}
27              style={{ width: 335, height: 114 }}
28              source={{ uri: this.state.signature }}
29            />
30          ) : null}
31        </View>
32        <Signature
33          onOK={this.handleSignature}
34          descriptionText="Sign"
35          clearText="Clear"
36          confirmText="Save"
37          webStyle={style}
38        />
39      </View>
40    );
41  }
42}
43
44const styles = StyleSheet.create({
45  preview: {
46    width: 335,
47    height: 114,
48    backgroundColor: "#F8F8F8",
49    justifyContent: "center",
50    alignItems: "center",
51    marginTop: 15
52  },
53  previewText: {
54    color: "#FFF",
55    fontSize: 14,
56    height: 40,
57    lineHeight: 40,
58    paddingLeft: 10,
59    paddingRight: 10,
60    backgroundColor: "#69B2FF",
61    width: 120,
62    textAlign: "center",
63    marginTop: 10
64  }
65});