Is there a way to Reset or Clear the signature

[williamtstanley]

Currently I have to reload the component to clear a signature.

[zhuanglong]

Do you solved?

[williamtstanley]

Rendering an empty view and then re-rendering the signature pad was the only way I found to do this

[sarangan]

this works for me.

when sets a new key to component old component will be thrown from render and new component will be rendered.

clearCanvas =()=>{
this.setState({ key : Math.floor(Math.random(100) * 100) // new key
}

[guitorioadar]

import React, { Component } from 'react';
import { View,StyleSheet,TouchableOpacity,Text,TouchableHighlight } from 'react-native';
import SignaturePad from 'react-native-signature-pad';

export default class SignatureTest extends Component {
    
    //state object
    state = { show: true };

    render = () => {
        return (
            <View style={{ flex: 1 }}>
                {
                        this.state.show ? <SignaturePad
                            ref={'SignaturePad'}
                            onError={this._signaturePadError}
                            // onChange={this._signaturePadChange}
                            style={{ backgroundColor: 'white' }} /> : this.setState({ show: !this.state.show })
                    }

                <View style={{ flex: 1, flexDirection: "row", margin: 16 }}>
                    <TouchableHighlight style={[styles.buttonStyle, { backgroundColor: '#EC1C24', borderRadius: 5 }]}
                        onPress={() => { this._signaturePadChange }} >
                        <Text style={{ color: 'white', fontWeight: 'bold' }}>Save</Text>
                    </TouchableHighlight>

                    <TouchableHighlight style={styles.buttonStyle}
                        onPress={() => { this.onPress() }} >
                        <Text>Reset</Text>
                    </TouchableHighlight>
                </View>
            </View>
        )
    };

    onPress() {
        this.setState({ show: !this.state.show });
    }

    _signaturePadError = (error) => {
        console.error(error);
    };

    _signaturePadChange = ({ base64DataUrl }) => {
        console.log("Got new signature: " + base64DataUrl);
    };
}

const styles = StyleSheet.create({
    buttonStyle: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        height: 50,
        backgroundColor: "#eeeeee",
        margin: 10
    }
})