How to clear SignaturePad on clicking button?

[andresouza]

Get the ref and call myRef.current.clear(). Here is an example:

import { useRef } from 'react'
import { Button, View } from 'react-native'
import RNSignaturePad from 'react-native-signature-pad'

const SignaturePad = () => {
  const signPad = useRef(null)

  return (
    <View>
      <RNSignaturePad ref={signPad} />
      <Button title="Clear" onPress={() => signPad.current.clear()} />
    </View>
  )
}

export default SignaturePad

My specs:

"react": "16.9.0"
"react-native": "0.61.4"
"react-native-signature-pad": "kevinstumpf/react-native-signature-pad#master"

[Doha26]

Did'nt work.

[andresouza]

Did'nt work.

Did you get an error or nothing happened? Were you able to get the ref at least? Could you paste your code and specs here, please? I am using this code in production and it is working, I will try to help you.

[smontlouis]

Not working for me either.

signaturePad=React.createRef()
...
<Button onPress={() => this.signaturePad.current.clear()} />
<SignaturePad ref={this.signaturePad} />

getting is not a function

[coutureJ]

Not working here too, I ended up using a show/hide state. You should remove the "cancel" button from your example ;)

[EnderXenocida]

I had the same problem. I have "solved" it creating a new component when press clean button.

import React from 'react';
import { View } from 'react-native';
import SignaturePad from 'react-native-signature-pad';

class SignatureView extends React.Component {

signaturePad: SignaturePad

state = {
        signaturePadKey: 0
    }

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

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

cleanButtonAction = () => {
        this.setState({ signaturePadKey: this.state.signaturePadKey + 1 })
    }

createSignaturePad = () => {
        this.signaturePad = React.createElement(SignaturePad, {
            onError: this._signaturePadError,
            onChange: this._signaturePadChange,
            style: { flex: 1, backgroundColor: 'white' },
            key: this.state.signaturePadKey
        })
        return this.signaturePad
    }

render() {
        return (
            <View style={{ flex: 1 }}>
                {this.createSignaturePad()}
            </View>
        )
}
}
export default SignatureView;

[deekshakellton123]

Used the same code but it is not clearing the signature.

[EnderXenocida]

Used the same code but it is not clearing the signature.

Could you share your code?

[arochedy]

Not working here too, I ended up using a show/hide state. You should remove the "cancel" button from your example ;)

Can you share your code ?

[arochedy]

I try this too and it doesn' work

import RNSignaturePad from 'react-native-signature-pad';

class SignButton extends Component {

    constructor(props: any) {
        super(props);

        this.state = {
        }
    }

    clear() {
        this._signCanvas.clear();
    }

    render() {

        return (
<RNSignaturePad
    key={this.state.signaturePadKey}
    ref={(c) => { this._signCanvas = c; }}
    onError={this._signaturePadError}
    onChange={this._signaturePadChange}
    style={{ height: '100%', width: '100%', borderRadius: 16 }} />
<TouchableHighlight
       style={{ position: 'absolute', zIndex: 33, right: 10, top : 10 }}
       onPress={() => this.clear()}>
        <Icon style={{}} name='close-circle' width={30} height={30} fill={Colors.grey300} />
    </TouchableHighlight>
)

[David-Ly-91]

bump. this is still an issue. cant use the example provided.

[lowzhengrong]

By adding the key can solved the problem

export default class SignaturePad extends Component {

  static propTypes = {
    clear: PropTypes.func,
  };

... ...

  constructor(props) {
    super(props);
    this.state = {
      key: 1,
    };
    ... ...
  }

  clear()
  {
    this.setState({
      key: this.state.key + 1
    });
  }

... ...

  render = () => {
    return (
        <View
          style={this.props.style}>
          <WebView
            key={ this.state.key }
            automaticallyAdjustContentInsets={false}
            onNavigationStateChange={this._onNavigationChange}
            onMessage={this.onMessage}
            renderError={this._renderError}
            renderLoading={this._renderLoading}
            source={this.source}
            javaScriptEnabled={true}
            style={this.props.style}/>
        </View>
    )
  };

}

[pruteanualex]

By adding the key can solved the problem

export default class SignaturePad extends Component {

  static propTypes = {
    clear: PropTypes.func,
  };

... ...

  constructor(props) {
    super(props);
    this.state = {
      key: 1,
    };
    ... ...
  }

  clear()
  {
    this.setState({
      key: this.state.key + 1
    });
  }

... ...

  render = () => {
    return (
        <View
          style={this.props.style}>
          <WebView
            key={ this.state.key }
            automaticallyAdjustContentInsets={false}
            onNavigationStateChange={this._onNavigationChange}
            onMessage={this.onMessage}
            renderError={this._renderError}
            renderLoading={this._renderLoading}
            source={this.source}
            javaScriptEnabled={true}
            style={this.props.style}/>
        </View>
    )
  };

}

that's work fine for me, thank you!!!!

[stevke94]

Is there anyway to clear two Signatures on one page?