@envoy/react-native-signature-pad

This is a signature pad component for React Native. It only supports iOS for now. The signature curve interpolation algorithm is based on [Smoother Signatures](https://medium.com/square-corner-blog/smoother-signatures-be64515adb33) proposed by [Square](ht

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@envoy/react-native-signature-pad
0.0.75 years ago5 years agoMinified + gzip package size for @envoy/react-native-signature-pad in KB

Readme

react-native-signature-pad
This is a signature pad component for React Native. It only supports iOS for now. The signature curve interpolation algorithm is based on Smoother Signatures proposed by Square, and the implementation heavily references to signaturepad

Install

yarn add @envoy/react-native-signature-pad
react-native link @envoy/react-native-signature-pad 

Usage

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import SignaturePad from '@envoy/react-native-signature-pad'

export default class MyComponent extends React.Component {
    private pad: SignaturePad

    render () {
        return (
            <View style={{flex: 1}}>
                <SignaturePad
                    style={{width: 600, height: 200}}
                    color='red'
                    onChange={this.onChange}
                    ref={this.onRef}
                />
                <TouchableOpacity onPress={this.onClear}>
                    <Text>Clear</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.onCaptureBase64}>
                    <Text>Capture Base64</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.onCaptureFile}>
                    <Text>Capture file</Text>
                </TouchableOpacity>
            </View>
        )
    }
    
    private onRef = (ref: any) => {
        this.pad = ref
    }
    
    private onChange = (event: any) => {
        const { count, length } = event.nativeEvent
        console.log('Signature pad update', count, length)
    }
    
    private onClear = () => {
        this.pad.clear()
    }
    
    private onCaptureBase64 = () => {
        this.pad.capture('base64', {})
            .then(data => {
                // handle image data here
            })
    }
    
    private onCaptureFile = () => {
        this.pad.capture('file', { path: '/path/to/file.png' })
            .then(_ => {
                // handle image file here
            })
    }
}