can't use undo,clear and another methods for SketchCanvas import

[nesibeyyubov]

I am using SketchCanvas (named export) But also i want to use methods like undo and clear, but i don't know the way we can access them

<SketchCanvas
         style={{
             width: 175,
             height: 220,
             zIndex: this.props.showDrawScreen ? 44545454545 : 1,
          }}
          strokeColor={this.state.drawingColor}
          strokeWidth={7}
  />

[syedibrahimt]

there are utility me utility methods provided for undo, clean. You can use that.

[selimmidikoglu]

How do we reference the canvas to be able to use these methods? I created my own undo, clear buttons outside of canvas frame. I do want to implement undo mechanism by clicking a touchable opacity onPress={() => something.undo()}. How can I achieve this?

[FrizenVladyslav]

Try to use ref for it.

import { Button, StyleSheet, View } from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

const Sketch = () => {
  const sketchRef = React.createRef<SketchCanvas>();

  const handleClear = () => {
    sketchRef.current.clear();
  };

  return (
    <View style={styles.container}>
      <Button title="clear" onPress={handleClear} />
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <SketchCanvas ref={sketchRef} style={{ flex: 1 }} strokeColor={'red'} strokeWidth={7} />
      </View>
    </View>
  );
};

export default Sketch;