How to clear within SketchCanvas

[arufian]

Hi, thanks for created an awesome library for RN.

Currently I am only using SketchCanvas and not using RNSketchCanvas (built in UI), but unfortunately I can't find anyway to clear the canvas. Already searching inside the source and documentation, but I couldn't found it. I saw clear method, but it's not possible to call it directly from the instance of SketchCanvas. this code will give me error:

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'

export default class App extends Component {
...
clear() {
    SketchCanvas.clear()
  }
...
}

Could anyone in here please show me how to do clear correctly ?

[varavan]

https://github.com/terrylinla/react-native-sketch-canvas/blob/master/example/App.js#L183

[FrederickEngelhardt]

@varavan these methods are invoked by using a ref

Example:

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'

export default class App extends Component {
MyApp {
  canvasRef = React.createRef()
  clear() {
      this.canvasRef.current.clear()
    }
  render(){
      return <SketchCanvas ref={canvasRef} />
    }
  }
}

Note that this will work for React class components. If you want to call this in a functional component you will need the useRef() hook

[arufian]

thanks @FrederickEngelhardt will try that later

[tomchify]

Sorry to bother, but I'm attempting to add a clear button as well, but calling this.canvasRef.current.clear() doesn't do anything.

I'm using SketchCanvas exactly as @FrederickEngelhardt shows.

When I inspect the SketchCanvas ref, I don't see any clear() or undo() functions. Here's what I see when I console.log(this.canvasRef.current):

https://www.dropbox.com/s/ippk2fznhi4x1c2/Screenshot%202019-12-07%2011.12.18.png?dl=0

Any pointer would be appreciated on how to access the undo(). Thanks.

[pavermakov]

@FrederickEngelhardt your approach doesn't work